/elite-style

Skill 03

Tailwind mastery, CSS architecture, design system implementation. Pixel-perfect output every time.

What It Covers

Tailwind utility-first patterns and custom themes
Design system tokens and component variants
Responsive typography and spacing scales
Animation and transition choreography
Dark mode and theming strategies

Install This Skill

npx skills add jackmcpickle/eliteskills --skill elite-style

Or install all skills: npx skills add jackmcpickle/eliteskills

Install

Terminal

$ npx skills add jackmcpickle/eliteskills --skill style

Skill Structure

tree

.claude/skills/style/
├── SKILL.md
├── templates/
├── component-variants.md
├── layout-pattern.md
└── animation.md
├── examples/
├── design-system.md
└── responsive-grid.md

Example Prompts

Design system tokens

> /elite-style Create a Tailwind design system with color tokens, spacing scale, and typography

Component variants

> /elite-style Build a Button component with size, variant, and state variants using CVA

Page layout

> /elite-style Create a responsive marketing page layout with hero, features, and footer

Best Practices

Share your existing Tailwind config or design tokens for consistent output
Specify breakpoint behavior upfront for responsive components
Request dark mode support at generation time, not as a retrofit
Use the skill for systematic patterns, not one-off style fixes

Compatible Tools