Visualization Ops Skill

JsxCreate — JSX Component Rendering

Renders JSX components live inside the chat interface. Suitable for displaying custom cards, status panels, information summaries, and other structured content.

Parameters:

• content (required): JSX string

Core rules:

1. Write only a JSX fragment, the top level must be one or more element nodes. Do not write import/export/const/let/function/function definitions.
2. No IIFE: do not wrap everything in an immediately-invoked function like {() => { ... return (...) }()} or {(function(){...})()}—the validator will reject it. This is the single most common anti-pattern from models such as MiniMax.
3. Construct data with inline expressions: {[{name:'A'},{name:'B'}].map(x => <div key={x.name}>{x.name}</div>)}
4. {} expressions, map, conditional rendering, and style={{...}} are allowed
5. The {...props} spread syntax is not supported
6. Call JsxCreate only once per reply

Wrong vs. correct example:

// ❌ Wrong: top level is a function, validation fails
{() => {
  const items = [{title: 'A'}, {title: 'B'}]
  return <div>{items.map(i => <p>{i.title}</p>)}</div>
}()}

// ✅ Correct: top level is an element, data expressed inline
<div className="flex flex-col gap-2 p-3">
  {[{title: 'A'}, {title: 'B'}].map((item, i) => (
    <div key={i} className="rounded-lg bg-card p-2 text-sm">{item.title}</div>
  ))}
</div>

After validation fails: the tool returns an absolute path and the error reason. Prefer re-calling JsxCreate with a full corrected content (a complete rewrite is less error-prone than a partial Edit). Only use Edit on that absolute path when the issue is clearly an isolated character-level problem. Do not Glob/Read to look for the file—the absolute path is already in the error message.

Color scheme conventions:

OpenLoaf uses an Apple-style flat palette. All colors are routed through semantic tokens that adapt to light/dark themes. Writing bg-white or text-gray-800 directly will turn into a harsh white block or invisible text in dark mode—so only use semantic tokens:

Base colors: bg-card, bg-muted, text-foreground, text-muted-foreground

Semantic accent colors (low-opacity background + flat text, legible in both themes):

• Blue / Info: bg-ol-blue/10 text-ol-blue
• Green / Success: bg-ol-green/10 text-ol-green
• Amber / Warning: bg-ol-amber/10 text-ol-amber
• Red / Error: bg-ol-red/10 text-ol-red
• Purple / Special: bg-ol-purple/10 text-ol-purple

Tags / badges: rounded-full px-2.5 py-0.5 text-xs combined with the flat colors above.

Do not use gradients (bg-gradient-*), shadows (shadow-*), or outer borders (border/ring)—JSX components are embedded inside the chat message stream, and such decorations make the card look like a standalone popup rather than part of the message, breaking reading flow.

Style conventions:

• Rounded corners rounded-lg/rounded-xl, tight spacing (p-3p-4, gap-2gap-3)
• Prefer small font sizes text-sm/text-xs and wide horizontal layouts—chat window width is limited, and overly tall content forces the user to scroll for a long time.

Allowed component whitelist (case-sensitive): Message, MessageContent, Panel, Snippet, SnippetAddon, SnippetText, SnippetInput, SnippetCopyButton, CodeBlock, Checkpoint, Task, TaskTrigger, TaskContent, TaskItem, TaskItemFile, Image, Attachments, Attachment, AudioPlayer, AudioPlayerElement, AudioPlayerControlBar, AudioPlayerPlayButton, AudioPlayerSeekBackwardButton, AudioPlayerSeekForwardButton, AudioPlayerTimeDisplay, AudioPlayerTimeRange, AudioPlayerDurationDisplay, AudioPlayerMuteButton, AudioPlayerVolumeRange, WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl, WebPreviewBody, WebPreviewConsole

Using bordered components such as Message/Panel/Snippet as outer containers is not recommended.

Validation and correction:

• The server validates JSX syntax; violations error out directly
• Even if validation fails the file is still written; the error message includes the path. Fix it with Edit and the preview will refresh
• After a failure, fix via Edit—do not call JsxCreate again

Write location: [<sessionId>]/asset/jsx/<messageId>.jsx (inside the session's asset directory; Edit can patch it in place).

Interactive forms: when you need to collect user input, ask the user directly in plain text and wait for a reply. JsxCreate is for display only.

When to use ChartRender vs JsxCreate