Artifact Styler

Artifact Styler

Take an existing artifact and re-render it in a different theme. The styler never edits HTML by hand — it works on the semantic envelope and lets the renderer own every visual decision. Theme is the only thing that changes; the content stays identical.

When to use

• "Restyle this in the apple theme" / "make it look like tailwind".
• "Apply our brand style to this report."
• "Same dashboard, but the stripe look."
• You produced an Artifact Organizer output earlier and want a themed variant.

The 7 themes

| Theme | Character | |---|---| | notion | Warm cream, Notion Blue, reading-first (default) | | linear | Dark-native, indigo, tight Inter | | vercel | Gallery white, Geist, shadow-as-border | | stripe | Weight-300 luxury, deep navy | | supabase | Dark-native, emerald, border hierarchy | | apple | SF-style, cool greys, Apple Blue, soft elevation, true-black dark | | tailwind | Inter, slate ramp, indigo-600, layered shadows |

How the input is obtained

The renderer parses JSON envelopes, never HTML. So:

1. Artifact Organizer output — every render saves a .json envelope

next to the .html. Restyle by re-rendering that sidecar JSON with a new --theme. No re-extraction needed.

1. Raw HTML with no sidecar (e.g. a Claude chat artifact) — you (the

model) read the HTML and reconstruct the semantic envelope: map each block to a catalog component (Section, DataTable, Callout, KPICard, Chart, CodeBlock, diagrams, …). Emit data only — no colors, fonts, or classes. This "HTML → envelope" step is a model job, by design.

See references/catalog.md in the artifact-organizer skill for prop schemas.

How to use

1. Locate the renderer engine (shipped with the artifact-organizer skill):

``bash AO=$(for p in \ ./.claude/skills/artifact-organizer ~/.claude/skills/artifact-organizer \ ./.codex/skills/artifact-organizer ~/.codex/skills/artifact-organizer \ ./.cursor/skills/artifact-organizer ~/.cursor/skills/artifact-organizer \ ./.opencode/skills/artifact-organizer ~/.opencode/skills/artifact-organizer \ ~/.claude/plugins/cache/artifact-organizer-marketplace/*/plugins/artifact-organizer \ ./plugins/artifact-organizer do [ -x "$p/scripts/outprint" ] && { echo "$p/scripts/outprint"; break; }; done) ``

1. Get the envelope. If restyling an Artifact Organizer output, use its

sidecar .json. Otherwise build the envelope from the source content.

1. Re-render with the target theme:

``bash mkdir -p ~/.artifact-organizer/out "$AO" --theme apple --out ~/.artifact-organizer/out/-apple.html (macOS) / xdg-open (Linux), then reply with the path and the theme applied.

Rules

• Change the theme only — never rewrite the content while restyling.
• props carry semantic data exclusively. A styling request is satisfied by the

theme, never by color/fontSize/className props (the schema rejects them).

• To stack restyled artifacts into one growing dashboard, hand off to the

artifact-organizer skill instead.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: keepYaoung
• Source: keepYaoung/artifact-organizer
• License: MIT

Install and usage instructions live in the source repository linked above.