Help us improve
Share bugs, ideas, or general feedback.
From html-skills
Showcase design tokens — color palettes, type scales, spacing systems, radius scales, shadow systems, motion tokens — as HTML pages with copy-paste CSS variable exports, contrast ratio checks, and live sample type. Use whenever the user shows or asks about a palette, theme, design system, branding colors, design tokens, or wants to document any system of values that drives visual design. Markdown literally cannot display colors; reach for this skill any time color or spatial values are involved.
npx claudepluginhub f-labs-io/agent-html-skills --plugin html-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/html-skills:html-design-tokensThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Markdown can't show colors. Unicode block characters are a hack and a tell that the writer wished they had a different format. For palettes, type scales, spacing systems, and any other design tokens, use HTML — the values can be displayed for what they actually are.
Guides phased setup of design token systems: discovers brand/tech constraints, explains primitive/semantic two-tier model, creates CSS custom properties, Tailwind configs, spacing scales, color semantics.
Generates design token documentation with visual swatches and code examples. Use when documenting token values, creating token reference guides, or building searchable design system documentation.
Use when asked to define a design token system, create tokens, document tokens, set up CSS custom properties, build a Tailwind token config, establish a spacing scale, define color semantics, or bridge design decisions to code. Examples: "set up design tokens", "define our token system", "create CSS variables for the design system", "document our color tokens", "establish a spacing scale".
Share bugs, ideas, or general feedback.
Markdown can't show colors. Unicode block characters are a hack and a tell that the writer wished they had a different format. For palettes, type scales, spacing systems, and any other design tokens, use HTML — the values can be displayed for what they actually are.
█████ blocksEach token is shown:
--color-accent-500, space-md)#B8602A, 12px)Token grids reflow at narrow widths so the doc stays readable on a phone — designers and developers actually read these on the move.
These defaults apply to every artifact this skill produces, on top of the requirements above. If a rule above conflicts with this list, the rule above wins; otherwise these are non-negotiable.
.html file the user opens in a browser — never inline-render in chat. Every artifact this skill produces is a file on disk (<topic>-<kind>.html), not an HTML block embedded in the agent's chat surface (claude.ai artifact/canvas widgets, fenced html blocks, custom rendered iframes, etc.). Inline rendering strips features, themes unpredictably against the surrounding chat (often unreadable in dark mode), and lacks the stable origin and clipboard/network access the submit handler needs. Always write the file. The file itself must be self-contained: no build step, no external runtime, inline CSS and JS. Google Fonts via <link> is fine; otherwise nothing loaded from npm or a CDN unless this skill explicitly calls for it.localStorage / sessionStorage / IndexedDB. Claude.ai artifacts can't use browser storage. State lives in JS memory; the export / copy button is the persistence layer.<pre><code> (selectable, copyable). Tabular data goes in <table>. Diagrams are inline <svg> with real <g> and <path> elements, not embedded PNGs. The reader should be able to copy any value, line, or label out of the artifact.textContent for text and document.createElement + appendChild for structure. Never set innerHTML from a string that includes a variable, user input, computed value, or imported data — it's an XSS vector and many agent harnesses (including Claude Code) block it via security hooks. Static literal markup inline in your script is fine.:root so the whole artifact can be re-skinned in one place — and so design decisions are visible, not buried in 40 inline declarations.Cmd/Ctrl+P should produce something usable: backgrounds that carry meaning print, content doesn't get clipped, dark themes have a sane print fallback.<topic>-<kind>.html) so multiple artifacts on one project compose into a readable folder, not a pile of output.html collisions.A complete token doc usually covers:
A grid of swatches. Each swatch shows: hex, the token name, contrast ratio against black and white (e.g., "AAA 7.2:1"). Group by hue family or by semantic role (primary/secondary/error/success).
Sample text rendered at every size in the scale. Show the font family, weight, size, line-height, and letter-spacing for each. Include a real sentence ("The quick brown fox…"), not lorem ipsum, so the reader can judge the type in context.
A row of progressively-larger blocks, each labeled with its token name and value. Optionally show common compositions (e.g., "card-padding = space-md (16px)").
Squares at each radius value, labeled. Include the token name and the px value.
Cards at each elevation level on a neutral background, so the difference between levels is visible. Label with the token name and the box-shadow value.
Animated samples for each duration/easing token. A button that replays the animation. Label with the token name and CSS value.
Small set of representative components rendered with the tokens applied. Helps the reader verify the tokens compose well.
For developers, the most useful interaction is "copy the CSS variable name" — they paste var(--color-accent-500) into their stylesheet. For designers, copying the raw value (#B8602A) is more useful.
Offer both. Click the swatch to copy the CSS variable, click the hex to copy the raw value. Show a brief "copied" indicator.
For bulk export, include a "Copy all as CSS variables" button at the bottom that produces:
:root {
--color-accent-500: #B8602A;
--color-accent-400: #D88B5C;
/* ... */
--space-sm: 8px;
--space-md: 16px;
/* ... */
}
If the system has light/dark/high-contrast variants, show them in a tab strip or side-by-side. Make the tab choice persist via URL hash so links can deep-link to a specific theme.
For light/dark, also show how the same component looks in each theme — colors don't tell the whole story.
For colors that will be used as text or background, show the contrast ratio against the colors they'll pair with. Tag with WCAG levels (AA, AAA, fail). Don't sandbag — if a color fails AA on white, say so.
#B8602A on white: 4.7:1 — AA (large text only)
#B8602A on #2C2825: 4.2:1 — AA (large text only)
Document our brand palette as an HTML page. We have warm-neutral base colors (FAF8F5, F0EDE8, D4CFC7, 2C2825), a terracotta accent (B8602A), and muted text (8A837A). Show contrast ratios. Add a "copy as CSS variables" button.
Output: HTML page with a swatch grid for each color showing rendered swatch + name + hex + contrast ratios against black/white, with click-to-copy and a bulk export button at the bottom.