How do I install the Apply Style skill?

Run npx skillmds@latest add onewave-ai/apply-style in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Apply Style safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Apply Style?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Apply Style free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Apply Style?

onewave-ai (@onewave-ai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Apply Style by onewave-ai — Agent Skill

Name: Apply Style
Author: onewave-ai

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.

onewave-ai b5d55d1 3 files · 6.9 KB Updated Sep 17, 2026

File contents

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).

Frequently asked questions