agentsclimarketplace
Sign in

Apply style

Skill OneWave-AI/open-agent-stack/plugins/brand-kit/skills/apply-style

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.From its SKILL.md

Install
npx -y skills add OneWave-AI/open-agent-stack --skill apply-style

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.8 KB, 380 tokens by cl100k_base, as published. Nobody here has run it

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

  1. 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.
  2. Read references/tokens.md for the canonical color, type, spacing, and radius values. Treat that file as the source of truth.
  3. If the user supplied a brand reference URL, read it with the web tool and note any overrides; otherwise use the reference defaults unchanged.
  4. Write the token block as CSS custom properties on :root in the project's global stylesheet. Group by color, typography, spacing, and radius.
  5. 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.
  6. 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.
  7. Scan the result for violations: any purple value or emoji is a failure. Remove and replace before finishing.
  8. Report the files changed and the next step (adopt tokens across components).

What ships with it: 2 files

5.1 KB alongside SKILL.md

references/

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.