Name: apply-theme
Author: Yattalo

Imported from Yattalo/design-system-hub (.claude/skills/apply-theme/SKILL.md). Install upstream with npx skills add Yattalo/design-system-hub --skill apply-theme. Copyright stays with the author.

Apply Theme

Switch or apply a theme variant to a target project.

Parameters

theme (required): Theme name (vega | nova | maia | lyra | mira)
target (optional): Target project path (default: current directory)

Usage

/apply-theme vega
/apply-theme nova --target ../my-app

Available Themes

Vega (Modern, High-Contrast)

Primary: Deep blue (#3b82f6)
Style: Sharp edges, bold shadows
Radius: 0.375rem
Best for: Enterprise dashboards, admin panels

Nova (Soft, Warm)

Primary: Warm orange (#f97316)
Style: Rounded corners, smooth transitions
Radius: 1rem
Best for: Consumer apps, friendly interfaces

Maia (Minimal, Monochrome)

Primary: Pure black (#171717)
Style: Clean lines, no color distractions
Radius: 0.25rem
Best for: Documentation, content-focused sites

Lyra (Vibrant, Colorful)

Primary: Purple (#8b5cf6) with pink accent
Style: Gradients, shadows with color
Radius: 0.5rem
Best for: Marketing, creative applications

Mira (Classic, Corporate)

Primary: Navy blue (#1e3a5f)
Style: Professional, conservative
Radius: 0.375rem
Best for: Business applications, finance

Process

Step 1: Install Theme Package

cd {target}
bun add @crazyone/ui-{theme}

Step 2: Configure Tailwind

Update target's tailwind.config.ts:

export default {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@crazyone/ui-{theme}/dist/**/*.js'
  ],
  // Theme extends from CSS variables set in styles
}

Step 3: Import Theme Styles

Add to main CSS file (e.g., globals.css):

@import '@crazyone/ui-{theme}/styles.css';

Step 4: Update Component Imports

Replace existing shadcn imports with themed variants:

// Before
import { Button } from "@/components/ui/button"

// After
import { Button } from "@crazyone/ui-{theme}"

Verification

After applying, verify:

CSS variables are loaded (check --primary in devtools)
Components render with correct styling
Dark mode toggle works (if applicable)

Install apply-theme and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

{ "ocm": "1", "id": "yattalo-design-system-hub-apply-theme", "kind": "skill", "name": "apply-theme", "description": "Apply a theme profile to a target project", "publisher": "Yattalo", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Apply a theme profile to a target project" ], "primary": false, "metadata": { "source": { "provider": "github", "repository": "https://github.com/Yattalo/design-system-hub", "path": ".claude/skills/apply-theme/SKILL.md", "ref": "b0041226006632dd55e19b2c9c0edad59896749f", "url": "https://github.com/Yattalo/design-system-hub/blob/b0041226006632dd55e19b2c9c0edad59896749f/.claude/skills/apply-theme/SKILL.md", "key": "Yattalo/design-system-hub/.claude/skills/apply-theme/SKILL.md" }, "allowed_tools": [ "Read", "Write", "Edit", "Bash(bun *)" ] }, "instructions": "# Apply Theme\n\nSwitch or apply a theme variant to a target project.\n\n## Parameters\n\n- `theme` (required): Theme name (vega | nova | maia | lyra | mira)\n- `target` (optional): Target project path (default: current directory)\n\n## Usage\n\n```\n/apply-theme vega\n/apply-theme nova --target ../my-app\n```\n\n## Available Themes\n\n### Vega (Modern, High-Contrast)\n- **Primary**: Deep blue (#3b82f6)\n- **Style**: Sharp edges, bold shadows\n- **Radius**: 0.375rem\n- **Best for**: Enterprise dashboards, admin panels\n\n### Nova (Soft, Warm)\n- **Primary**: Warm orange (#f97316)\n- **Style**: Rounded corners, smooth t", "cost": { "context_tokens": 538 } }

apply-theme

About