Claude Frontend Skills Pack

Claude Code Frontend Skills Pack

**One file. Drop it in your project. Claude Code builds production-grade UI.**

Stop getting generic AI frontends. This `CLAUDE.md` file tells Claude Code to:

• ✅ Use 1,400+ production components from 21st.dev instead of writing from scratch
• ✅ Pick distinctive typography (no Inter, no Roboto)
• ✅ Apply Next.js 15 App Router patterns
• ✅ Add Framer Motion animations
• ✅ Ensure WCAG 2.1 AA accessibility
• ✅ Avoid generic "AI slop" aesthetics

---

Before & After

Without CLAUDE.md	With CLAUDE.md
System fonts (Inter/sans-serif)	Distinctive font pairings (Sora + Manrope)
White background, blue accents	Bold aesthetic direction
Static layout, no motion	Scroll reveals, staggered animations
Components written from scratch	21st.dev production components
Generic, forgettable	Distinctive, memorable

---

Installation (30 seconds)

# Clone this repo
git clone https://github.com/YOUR_USERNAME/claude-frontend-skills-pack.git

# Copy CLAUDE.md to your project root
cp claude-frontend-skills-pack/CLAUDE.md /path/to/your/project/

# That's it. Claude Code reads it automatically.

Optional: Add Anthropic's Official Frontend Skill

# In Claude Code terminal:
/install-github-skill anthropics/claude-code plugins/frontend-design/skills/frontend-design

---

What's Inside CLAUDE.md

🎨 Design Rules

• Bold aesthetic direction (no cookie-cutter layouts)
• Banned fonts: Inter, Roboto, Poppins, Montserrat, Open Sans
• Recommended pairings: Sora + Manrope, Elms Sans + Figtree, etc.

📦 21st.dev Component Catalog

Full verified catalog with direct links to every category:

• 130 Buttons | 102 Inputs | 79 Cards | 73 Heroes
• 62 Selects | 45 Sliders | 40 Accordions | 38 Tabs
• 37 Modals | 36 Features | 34 CTAs | 30 Tables
• 30 AI Chat components | And 25+ more categories

Each comp