| name | apply-style |
| description | Apply the OneWave design style (tokens + theme) to a frontend project. Trigger when the user asks to brand a site, apply the OneWave look, set up design tokens, theme an app, or fix off-brand colors and typography. |
Apply OneWave Style
Apply a warm, earth-toned, dark-background design system as tokens and a theme
binding. Keep entry work lean; pull exact values from references/tokens.md and
stack notes from references/stacks.md.
Constraints
- Never emit purple in any color, token, gradient, or preview.
- Never put emoji in UI output; use an icon library reference instead.
- Never invent secrets. This skill needs no API key. If the user provides a live
brand URL, read it with the built-in web tool, which needs no configuration.
Workflow
- Detect the stack. Look for
tailwind.config.{js,ts,cjs,mjs}, a global CSS
file, and the framework in package.json. Record what you find.
- Read
references/tokens.md for the canonical color, type, spacing, and radius
values. Treat that file as the source of truth.
- If the user supplied a brand reference URL, read it with the web tool and note
any overrides; otherwise use the reference defaults unchanged.
- Write the token block as CSS custom properties on
:root in the project's
global stylesheet. Group by color, typography, spacing, and radius.
- Bind the tokens to the stack using
references/stacks.md: extend the Tailwind
theme to consume the custom properties, or map plain-CSS utility classes.
- Add one preview snippet (a header, a button, and a card) that consumes only
the tokens, so the user can verify the look in isolation.
- Scan the result for violations: any purple value or emoji is a failure. Remove
and replace before finishing.
- Report the files changed and the next step (adopt tokens across components).
