Install a complete design-token theme into any project in one pass -- pulls a style from the Open Agent Stack design-styles collection (aurora-mesh, cirrus, liquid-glass, mono-brutalist, neo-terminal, sand-terra, tidal) or a local tokens.json, wires it into Tailwind/CSS, and repaints existing components to match.
SkillScore86Maintained
Automatic
◆Frontend / UI pack
Last verified 8/24/2026
What it changes
Passed 17 of 20 test cases with the skill, and 9 of 20 without it.
Without skill45%
With skill86%
Checks it passed that the model alone missed
The response selects neo-terminal as the CRT green-on-black design style.
The response documents the newly derived token addition in the tokens file.
The response declines to hardcode arbitrary hex values into component styles.
and 10 more in the full report
9 fixed10 passed either way3 still failing0 broke
Pass-rate lift
+41 pp
Tokens
+5%
Agent turns
0%
Response time
-37%
Model gemini-3.6-flashMeasured 8/24/2026v119 of 22 cases passed with skill · 20 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 8
Prompt
What four standard assets are included in each style directory within the Open Agent Stack repository?
What was checked, without and with the skill
Checked
Without skill
With skill
The response lists tokens.json, theme.css, tailwind.tokens.js, and a WCAG contrast worksheet as the shipped theme assets.
Missed
Passed
case-21 · gemini-3.6-flash · 8/24/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md27 linessingle file
Design Style Installer
Apply a full design system to a project the way a brand refresh actually works: tokens first, wiring second, components last, and nothing hardcoded that the tokens already define. Sources: the seven production themes in Open Agent Stack design-styles/ -- each ships tokens.json (W3C design-tokens), theme.css, tailwind.tokens.js, and a WCAG contrast worksheet -- or any local W3C-format tokens file.
Workflow
Pick the style. If the user named one, fetch it from the open-agent-stack repo (or read the local clone). If not, show the seven options with their one-line personalities -- aurora-mesh (soft futuristic dark, gradient mesh), cirrus (light cloud/sky, frosted), liquid-glass (translucent layered), mono-brutalist (stark, type-led), neo-terminal (CRT green-on-black), sand-terra (warm editorial neutrals), tidal (deep ocean blues) -- and ask which fits the product.
Read the project. Detect the stack (Tailwind version, CSS modules, styled-components, plain CSS) and inventory the current styling surface: where colors, fonts, radii, and shadows are defined today, and how many components hardcode values outside that.
Install the tokens. Wire the theme by stack: Tailwind -- merge tailwind.tokens.js into theme.extend (v4: emit @theme CSS variables); otherwise -- add theme.css custom properties at :root/[data-theme]. Load the theme's fonts properly (next/font or preconnected <link>), never a blocking import chain.
Repaint. Replace hardcoded values in components with token references, mapping by role, not by nearest hex: old primary -> new accent, old page background -> bg.base, old card -> surface. Where the old design had roles the theme lacks (a third accent, a warning tint), derive them from the theme's palette logic and document the additions in the tokens file -- do not freelance new colors.
Verify. Run the build, then check the money paths render correctly: nav, hero, buttons in all states, forms, cards. Confirm text/background pairs still meet the contrast worksheet's AA levels after any derivations. Output design-install-report.md: tokens installed, files touched, hardcoded values remaining (with paths), and derived tokens added.
Rules
Tokens are the only source of truth after installation. A repaint that leaves hex codes scattered in components has not finished.
Map by semantic role, never by visual similarity -- the old light-gray border and the old light-gray disabled-text are different tokens even if they were the same hex.
Never mix themes. If the user wants aurora-mesh cards on a sand-terra page, that is a custom theme -- fork the tokens file and name it honestly.
Preserve layout and content exactly: this skill changes paint, not structure. Structural itches go in the report as suggestions.
Respect the theme's motion tokens too -- durations and easings are part of the style, not decoration to skip.
Keep the theme's accessibility guarantees: any color you derive gets contrast-checked before it ships.
Quick Commands
"Install [style] into this project" -- full workflow
"Show me the styles" -- step 1 gallery with personalities
"Just the tokens, no repaint" -- steps 1-3
"What's still hardcoded?" -- the drift audit from step 5