Claude Code Skills for Web Design

What are Claude Code Skills?

Skills are reusable prompt templates stored as Markdown files in .claude/skills/. When invoked via /skill-name, they give Claude Code specialized context for a recurring task. Think of them as saved prompts that persist across conversations.

Setup: Create .claude/skills/ in your project root. Each .md file = one skill.

Skill: Component Scaffold

File: .claude/skills/component.md

# Skill: Generate UI Component

Create a UI component with the following structure:

## Input
- Component type: {{type}} (e.g., "pricing card", "testimonial", "feature grid")
- Style: {{style}} (e.g., "Apple minimal", "bold", "corporate")
- Content: {{content}} (real content or "generate sample")

## Output
Generate a single HTML file with:
- Pure Tailwind CSS v4 utilities
- Colors via CSS custom properties (var(--color-surface), var(--color-text), var(--color-primary), etc.)
- Semantic HTML tags
- Mobile-first responsive layout
- WCAG AA accessible (proper headings, alt text, aria-labels, focus states)
- 8px spacing grid

## Rules
- NO JavaScript
- NO dark: classes (theming via CSS custom properties)
- NO custom CSS or @apply
- NO external images (use gradient placeholders)
- Root element max-width: max-w-7xl for sections, max-w-sm for cards
- Section padding: py-16 lg:py-24

Skill: Design Audit

File: .claude/skills/audit.md

# Skill: Design Quality Audit

Review the specified file(s) for design quality issues.

## Checks
1. **Spacing**: All values on 8px grid? (p-2, p-4, p-6, p-8 only, no p-3, p-5, p-7)
2. **Colors**: All via CSS custom properties? No hardcoded Tailwind colors for themeable surfaces?
3. **Typography**: Heading hierarchy correct? (h1 > h2 > h3, no skips)
4. **Accessibility**: Alt text, aria-labels, focus states, form labels, skip link?
5. **Responsive**: Works at 375px, 768px, 1280px? Mobile-first?
6. **Contrast**: Text colors have sufficient contrast against backgrounds?
7. **Consistency**: Same concept styled the same way across components?

## Output Format
For each issue:
- 🔴 Critical / 🟡 Warning / 🟢 Good
- File:line — description — suggested fix

End with a summary score: X/7 categories passing.

Skill: Token File Generator

File: .claude/skills/tokens.md

# Skill: Generate Token File

Generate a webspire-tokens.css file from color inputs.

## Input
- Primary color: {{primary}} (hex)
- Accent color: {{accent}} (hex, or "auto" for complementary)
- Mode: {{mode}} (light / dark / both)
- Style: {{style}} (warm / cool / neutral)

## Process
1. Derive surface colors from the primary hue (low chroma, high lightness for light mode)
2. Derive text colors (3 levels: primary 10-15% L, soft 25-35% L, muted 45-55% L)
3. Calculate primary-soft (95% L, low chroma) and primary-hover (8% darker)
4. Auto-detect primary-text (white if primary L < 55%, dark if > 55%)
5. If accent is "auto", use complementary hue (180° offset)
6. Derive border from surface hue (88% L for light, 22% L for dark)
7. Keep semantic colors standard (success=#10b981, warning=#f59e0b, danger=#ef4444)

## Output
Write the complete webspire-tokens.css file to the specified path.
Include the :root block and optionally a .dark {} block if mode is "both".

Skill: Responsive Check

File: .claude/skills/responsive.md

# Skill: Responsive Breakpoint Check

Review the specified HTML file(s) for responsive issues.

## Check at each breakpoint
- **375px** (mobile): Everything stacks vertically? No horizontal overflow? Text readable?
- **768px** (tablet): 2-column grids where appropriate? Sidebars collapsed?
- **1280px** (desktop): Max-width containers? Grids at full column count?

## Common Issues to Flag
- Missing sm:/md:/lg: prefixes on grid-cols
- Fixed widths (w-[400px]) without responsive alternatives
- Text too small on mobile (< text-sm) or too large on mobile (text-4xl without responsive scaling)
- Horizontal overflow from flex-nowrap without overflow handling
- Touch targets too small (< 44px on mobile)

## Output
Table with breakpoint × component showing ✅ Pass or ❌ Issue + fix.

Skill: Pattern from Screenshot

File: .claude/skills/from-screenshot.md

# Skill: Recreate UI from Screenshot

Recreate the UI shown in the provided screenshot as clean HTML + Tailwind CSS v4.

## Rules
- Match the visual layout, spacing, and proportions as closely as possible
- Use Tailwind utilities exclusively — no custom CSS
- Colors via CSS custom properties (estimate the palette, use --color-* naming)
- Semantic HTML structure
- Responsive: the screenshot shows one breakpoint — add responsive classes for others
- Accessible: proper headings, alt text, focus states

## Process
1. Analyze the screenshot: identify sections, cards, typography, colors, spacing
2. Map colors to a CSS custom property palette
3. Build the HTML top-to-bottom, section by section
4. Add responsive variants (assume screenshot = desktop, add mobile stacking)
5. Add accessibility attributes

## Output
Single HTML file with embedded :root custom properties at the top.

Installing Skills

# Create the skills directory
mkdir -p .claude/skills

# Copy skill files (or create them manually)
# Each .md file in .claude/skills/ becomes a /skill-name command

Codex / Cursor Equivalents

These skills work conceptually in any AI tool. The key differences:

| Feature | Claude Code | Codex (OpenAI) | Cursor | |---|---|---|---| | Persistent instructions | CLAUDE.md | AGENTS.md | .cursorrules | | Reusable skills | .claude/skills/*.md | Not built-in (paste prompts) | Not built-in (use @ snippets) | | File context | Reads your project | Reads your project | Reads open files + indexed codebase | | Multi-file edits | Yes (via tools) | Yes (via tools) | Yes (Composer mode) | | Screenshot input | Yes (paste image) | Limited | Yes (paste image) |

For Codex/Cursor users: Paste the skill content directly as your prompt, or save them as snippets in your IDE for quick access.

Checklist

• [ ] .claude/skills/ directory created in project root
• [ ] Core skills: component, audit, tokens, responsive
• [ ] CLAUDE.md references the skills directory
• [ ] Team members know how to invoke skills (/skill-name)
• [ ] Equivalent prompts saved for non-Claude tools