Structured Renderers Skill
Use this skill before emitting native Web UI structured fences:
compose-blocksearch-resultsdataframechart-jsondiff
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.
1---2name: jaw-structured-renderers3description: Native Web UI structured renderer schemas for compose-block drafts, search-results cards, dataframe tables, chart-json charts, and diff output4---56# Structured Renderers Skill78Use this skill before emitting native Web UI structured fences:910- `compose-block`11- `search-results`12- `dataframe`13- `chart-json`14- `diff`1516These 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.1718## When To Use1920Use the smallest native renderer that matches the answer:2122| Intent | Fence |23|---|---|24| Search results, source cards, citations with URLs | `search-results` |25| Editable email, message, or document drafts | `compose-block` |26| Filterable/sortable/pageable row data | `dataframe` |27| Simple single-series bar, line, or pie chart | `chart-json` |28| File patch or unified diff display | `diff` or raw unified diff |2930If the current channel cannot render Web UI widgets, fall back to clear Markdown.3132## Required Schema Check3334Before emitting a structured fence, read `references/schemas.md` and match the exact schema for the fence.3536Important drift guards:3738- `compose-block` requires `schemaVersion: "compose-block-v1"`, `kind`, and `variants[]`.39- Never emit shorthand `compose-block` objects such as `{ "type": "...", "title": "...", "body": "..." }`.40- Put draft text in `variants[].body`, `variants[].paragraphs`, or `variants[].bodyLines`; top-level `body` is not the editable draft body.41- Renderer fences must contain strict JSON, not JavaScript-like object literals.42- 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`.43- 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.44- For long single-string drafts, prefer JSON produced by `JSON.stringify` or compact JSON so every newline inside string content is escaped.45- `search-results`, `dataframe`, and `chart-json` also require their `*-v1` `schemaVersion`.46- Use `diagram-html` instead of `chart-json` for multi-series charts, maps, advanced chart types, external libraries, or custom JavaScript.4748## Relationship To Diagram4950`diagram` owns SVG, Mermaid, maps, advanced chart widgets, interactive visualizations, and `diagram-html`.5152This 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`.
lidge-jun