Menu

Individual skill

design-style-installer

0upvotes

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.

design-style-installer/SKILL.md

Read pinned source

Source commit b2267d9171af4f56848d82992381b20b89b44056

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Instructions only
Last checked
Nov 10, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
425
Repository last updated
Oct 20, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# 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/`](https://github.com/OneWave-AI/open-agent-stack/tree/main/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

1. **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.
2. **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.
3. **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.
4. **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.
5. **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
Back to top