lidge-jun/structured-renderers

Structured Renderers Skill

Use this skill before emitting native Web UI structured fences:

• compose-block
• search-results
• dataframe
• chart-json
• diff

These are final-answer-only renderer contracts. Emit complete JSON only in the final assistant response, never partial JSON during streaming, and never include secrets, hidden chain-of-thought, credentials, local-only URLs, or internal state.

When To Use

Use the smallest native renderer that matches the answer:

| Intent | Fence | |---|---| | Search results, source cards, citations with URLs | search-results | | Editable email, message, or document drafts | compose-block | | Filterable/sortable/pageable row data | dataframe | | Simple single-series bar, line, or pie chart | chart-json | | File patch or unified diff display | diff or raw unified diff |

If the current channel cannot render Web UI widgets, fall back to clear Markdown.

Required Schema Check

Before emitting a structured fence, read references/schemas.md and match the exact schema for the fence.

Important drift guards:

• compose-block requires schemaVersion: "compose-block-v1", kind, and variants[].
• Never emit shorthand compose-block objects such as { "type": "...", "title": "...", "body": "..." }.
• Put draft text in variants[].body, variants[].paragraphs, or variants[].bodyLines; top-level body is not the editable draft body.
• Renderer fences must contain strict JSON, not JavaScript-like object literals.
• Never put raw literal line breaks inside quoted JSON string values. For multiline draft text, use escaped newlines like \\n or \\n\\n inside variants[].body.
• For multiline drafts, prefer variants[].paragraphs: string[] (joined with blank lines) or variants[].bodyLines: string[] (joined with single line breaks) so no newline escape is needed inside JSON strings.
• For long single-string drafts, prefer JSON produced by JSON.stringify or compact JSON so every newline inside string content is escaped.
• search-results, dataframe, and chart-json also require their *-v1 schemaVersion.
• Use diagram-html instead of chart-json for multi-series charts, maps, advanced chart types, external libraries, or custom JavaScript.

Relationship To Diagram

diagram owns SVG, Mermaid, maps, advanced chart widgets, interactive visualizations, and diagram-html.

This skill owns native non-diagram Web UI renderer schemas. For simple charts, prefer chart-json; for advanced charts or custom interaction, load diagram and use diagram-html.