design-style-installer
Installation
SKILL.md
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.jsintotheme.extend(v4: emit@themeCSS variables); otherwise -- addtheme.csscustom 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.