What it does

CSS Wizard translates design intent into precise CSS. Describe what you need — "a card with a frosted glass effect, subtle shadow, and hover lift animation" — and it produces the complete, cross-browser CSS with fallbacks. It understands design systems and can output vanilla CSS, CSS Modules, Tailwind classes, or styled-components syntax depending on your stack.

For complex layouts, CSS Wizard first explains the approach (flex vs grid, when and why), then writes the code. It generates media query breakpoints consistent with Tailwind's default scale (sm/md/lg/xl/2xl) and always includes reduced-motion alternatives for any animation it writes.

How to install

bash

npx skills add user/css-wizard

The command fetches the skill definition, validates the schema, and registers it with your Claude Code environment. No global packages are installed. The skill is stored in your project's .claude/skills/ directory.

How to use

Describe your component or effect in plain English:

prompt

Write CSS for: a card with a frosted glass effect, subtle drop shadow, and a hover lift animation

CSS Wizard will return complete, production-ready code with browser compatibility notes. A typical output looks like this:

css

/* Glassmorphism card — requires a colourful background behind it */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .glass-card { transition: none; }
  .glass-card:hover { transform: none; }
}

Configuration options

Append these modifiers to any CSS Wizard prompt to adjust the output format or scope:

prompt

# Get Tailwind classes instead of vanilla CSS
Write CSS for: [describe component] — output as Tailwind classes

# Include a dark mode variant
Write CSS for: [describe component] — add a dark mode variant

# Ensure animation accessibility
Write CSS for: [describe animation] — make the animation accessible (prefers-reduced-motion)

Tip: CSS Wizard is aware of the Tailwind v3 and v4 configuration formats. If you specify output as Tailwind classes, it will use the correct utility naming for your project version and flag any classes that require a custom config extension.

Related skills

Pair CSS Wizard with Accessibility Checker to validate that the CSS you generate meets WCAG colour contrast requirements. Use Component Designer to scaffold full React components around the CSS you write, and UI Code Reviewer to catch performance and accessibility issues in the finished markup.