Everything I've found that actually makes Claude Code output better-looking frontends. Skills, plugins, MCP servers, CLAUDE.md tricks, organized by what you're trying to do.
February 2026 · 70+ tools · 10 sections
If this is useful, star it so others can find it. PRs welcome — see Contributing.
- Design Skills — Kill the AI slop
- Site-Wide Theming — Make everything match
- Animation & Motion — GSAP, Framer Motion, scroll effects
- UI/UX Intelligence — Patterns, a11y, research
- Design-to-Code — Figma pipeline
- Testing & Browser Automation — Give Claude eyes
- Docs & Context — Stop hallucinating APIs
- Framework Skills — React, Tailwind, Three.js, D3
- Deploy & Preview — Ship it
- Recommended Stacks — What to install together
- Quick Reference
- Further Reading
- Contributing
The default Claude output looks like every other AI-generated page. Same fonts, same purple gradient, same card layout. These fix that.
The one you install first. Anthropic's own skill that tells Claude to pick an actual aesthetic direction before writing code instead of defaulting to Inter + purple gradient + rounded cards.
| Author | Anthropic |
| Install | claude plugin add anthropic/frontend-design |
| Type | Skill (auto-activates) |
| Source | anthropics/claude-code/.../frontend-design |
What changes:
- Claude picks a direction before coding (brutalist, editorial, retro-futuristic, etc.)
- Requires real typography pairing, not just whatever sans-serif
- Blocks generic component patterns and cookie-cutter layouts
- Enforces CSS variables and cohesive color systems
Install this first. Everything else on this list assumes you have it.
240+ styles, 127 font pairings, 99 UX guidelines. Tell it "fintech dashboard" and it picks a design system that makes sense for fintech. The v2.0 reasoning engine does the style matching automatically.
| Author | nextlevelbuilder |
| Install | claude plugin add nextlevelbuilder/ui-ux-pro-max-skill |
| Type | Skill + CLI (uipro-cli) |
| Source | nextlevelbuilder/ui-ux-pro-max-skill |
Also works with Cursor, Windsurf, Codex, and a dozen other agents if you're not locked into Claude Code.
Tunable knobs for how wild Claude gets. You set design variance (safe to experimental), motion intensity (subtle to cinematic), and visual density (spacious to compact). Good if you want to dial in how opinionated the output is.
| Author | Leonxlnx |
| Install | claude plugin add Leonxlnx/taste-skill |
| Source | Leonxlnx/taste-skill |
11 named aesthetics with working HTML/CSS demos and the master prompts that generated them. Useful as a reference — you can tell Claude "use the Dark OLED Luxury style" and it knows what you mean.
| Author | ClaudeKit (faafospecialist) |
| Install | claude plugin add claudekit/frontend-design-pro-demo |
| Source | claudekit/frontend-design-pro-demo |
| # | Aesthetic | Think... |
|---|---|---|
| 1 | Swiss Minimalism | Helvetica, grids, tons of white space |
| 2 | Neumorphism | Soft shadows, extruded elements |
| 3 | Glassmorphism | Frosted glass, blur, transparency |
| 4 | Brutalism | Raw, anti-design, big type |
| 5 | Claymorphism | 3D clay blobs, soft shapes |
| 6 | Aurora Mesh Gradient | Flowing color gradients |
| 7 | Retro-Futurism/Cyberpunk | Neon on dark, sci-fi |
| 8 | 3D Hyperrealism | Depth, perspective |
| 9 | Vibrant Block Maximalist | Color blocks, loud |
| 10 | Dark OLED Luxury | True black, gold, premium |
| 11 | Organic Biomorphic | Earth tones, natural shapes |
Two modes: Controlled (ship to prod — WCAG, full responsive specs, motion constraints) and Innovative (explore — bold, creative, break rules). Comes with 830 lines of accessibility guidance and 600 lines of responsive patterns as separate reference files Claude loads when needed.
| Author | bencium |
| Install | cp -r bencium-controlled-ux-designer ~/.claude/skills/ |
| Source | bencium/bencium-claude-code-design-skill |
Files included: SKILL.md, ACCESSIBILITY.md (~830 lines), RESPONSIVE-DESIGN.md (~600 lines), MOTION-SPEC.md, DESIGN-SYSTEM-TEMPLATE.md
Anthropic's own brand colors and typography as a skill. Not useful on its own, but a great template if you want to make a brand skill for your own company.
| Author | Anthropic |
| Source | claude.com/plugins |
The design skills above teach Claude to think about aesthetics. These tools generate the actual config files — CSS variables, Tailwind @theme blocks, dark mode tokens — so your whole site looks consistent without re-explaining your brand on every prompt.
Builds a full token system from scratch. OKLCH color space (P3 wide gamut), 4px spacing grid, semantic light/dark theming, typography scale. Outputs a Tailwind v4 @theme block you drop into your CSS.
| Type | Skill |
| Source | mcp-market.vercel.app/skills/design-system-architect |
Generates: semantic color mapping, brand-tinted neutrals (not pure white/black), typography scale, spacing grid, dark mode tokens. Everything becomes Tailwind utilities automatically.
This is the lazy-genius approach. It builds your entire color system off a single --brand-hue variable. Change one number and everything re-themes — primary, secondary, backgrounds, borders, muted states, all derived from that hue using OKLCH math.
| Author | phrazzld |
| Source | claude-plugins.dev/skills/design-tokens |
The output looks like:
@import "tailwindcss";
@theme {
--brand-hue: 250;
--color-primary: oklch(0.6 0.2 var(--brand-hue));
--color-background: oklch(0.995 0.005 var(--brand-hue));
--color-foreground: oklch(0.15 0.02 var(--brand-hue));
--color-muted: oklch(0.94 0.01 var(--brand-hue));
--color-border: oklch(0.88 0.015 var(--brand-hue));
/* + typography, spacing, radius, shadows */
}One number controls the whole palette. That's the move.
Auto-activating Tailwind v4 skill. Covers the CSS-first @theme approach (no more tailwind.config.js), dark mode patterns, responsive utilities, component extraction, and plugin setup (@tailwindcss/forms, @tailwindcss/typography, etc.).
| Author | blencorp (claude-code-kit) |
| Source | blencorp/claude-code-kit |
shadcn/ui + Tailwind + form handling in one skill. Generates themed component configs, @layer organization, dark mode toggle implementation, and react-hook-form + zod patterns. If your stack is shadcn, this is the one.
| Source | claudecodeskills.wayjet.io/skills/ui-styling |
React-focused Tailwind styling. Component-level theming, responsive layouts, design system integration. Lighter weight than the ClaudeKit version if you don't need shadcn.
| Author | majesticlabs-dev |
| Source | claude-plugins.dev/skills/tailwind-styling |
Point it at your Figma file and it generates a rules file that Claude follows on every task. Encodes where components live, which tokens to use, how to handle spacing, what Tailwind conventions to follow. Set-and-forget consistency.
| Requires | Figma MCP |
| Source | mcpservers.org/claude-skills/figma/create-design-system-rules |
Output includes: component directory rules, token enforcement ("never hardcode hex"), spacing scale, Tailwind conventions, Figma-to-code workflow steps.
Not a plugin — just a block of text in your CLAUDE.md. This is from Anthropic's official Frontend Aesthetics Cookbook and it's the fastest way to enforce a site-wide aesthetic. Five lines of config. No install.
| Source | Frontend Aesthetics Cookbook |
Example — lock your whole project to a Solarpunk aesthetic:
## Frontend Theme
<always_use_solarpunk_theme>
Always design with Solarpunk aesthetic:
- Warm, optimistic color palettes (greens, golds, earth tones)
- Organic shapes mixed with technical elements
- Nature-inspired patterns and textures
- Bright, hopeful atmosphere
- Retro-futuristic typography
</always_use_solarpunk_theme>More presets you can adapt:
| Theme | Key Directives |
|---|---|
| Cyberpunk | Neon on dark, monospace type, glitch effects, scan lines |
| Editorial | Serif headlines, magazine grid, muted palette, pull quotes |
| SaaS Minimal | One accent color, system UI font, lots of air, card-based |
| Dark OLED Luxury | True #000 bg, gold/cream accents, thin serif type |
| Brutalist | System fonts, visible borders, no rounded corners, loud color |
| Retro-Futuristic | Gradient meshes, chrome, geometric shapes, purple/teal |
| Organic/Natural | Earth tones, rounded shapes, warm shadows, serif body |
| Art Deco | Gold + black, geometric patterns, Playfair Display, symmetry |
Five lines in CLAUDE.md. Works immediately, no install.
| You want... | Use this |
|---|---|
| "Just make it look good fast" | CLAUDE.md theme block |
| Full token system with OKLCH | Design Tokens or Design System Architect |
| shadcn/ui theming | UI Styling Skill |
| Auto-rules from your Figma file | Create Design System Rules |
| AI picks the right style for your product | UI/UX Pro Max |
| Named aesthetic presets | Frontend Design Pro Demo |
| Tunable variance knobs | Taste Skill |
The design skills make Claude think about motion. These give it the actual library knowledge to implement it — GSAP timelines, Framer Motion variants, scroll-triggered effects, and motion auditing.
23 skills covering the major animation libraries: GSAP + ScrollTrigger, Framer Motion, React Spring, Lottie, anime.js, Locomotive Scroll, Barba.js, and more. Each auto-activates when you ask for that type of animation. Also includes 3D skills (Three.js, React Three Fiber, Babylon.js, A-Frame, PixiJS).
This is the biggest gap the rest of the list doesn't cover — actually creating animations, not just polishing them.
| Author | freshtechbro |
| Install | claude plugin marketplace add freshtechbro/claudedesignskills then install individual skills |
| Source | freshtechbro/claudedesignskills |
Focused specifically on Motion (formerly Framer Motion). Declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG manipulation. Includes bundle optimization patterns — LazyMotion at 4.6KB or useAnimate at 2.3KB. Tested against React 19 + Next.js 16 + Vite 7 + Tailwind v4.
| Author | jezweb |
| Source | skillsdirectory.com/skills/jezweb-motion |
Motion design audit skill trained on Emil Kowalski, Jakub Krehel, and Jhey Tompkins. Finds conditional UI that should be animated but isn't (conditional renders without AnimatePresence, dynamic styles without transitions), then gives per-designer recommendations categorized by severity.
Good for reviewing existing code, not just generating new animations.
| Author | kylezantos |
| Source | kylezantos/design-motion-principles |
Design thinking, UX research, accessibility patterns.
25 skills based on actual books — Don Norman, Cialdini, Ries, Hormozi. UX design, marketing/CRO, product strategy, growth.
| Source | wondelai/skills |
From Google Labs. Includes: design-md (manage DESIGN.md files), enhance-prompt (add design vocabulary to prompts), react-components (Stitch to React), shadcn-ui (build with shadcn), stitch-loop (iterative design-code loop), remotion (generate walkthrough videos).
| Author | Google Labs |
Full-stack skill library. The frontend-relevant ones: React Expert (Server Components, hooks), Vue Expert, Angular Expert, Tailwind CSS Expert, CSS/SCSS Expert, Accessibility Specialist, Responsive Design Specialist. Each auto-activates and loads relevant reference docs.
| Install | See Quick Start Guide |
| Source | Jeffallan/claude-skills |
User research, personas, user flows, wireframing, prototyping, usability testing, information architecture, visual hierarchy, Gestalt principles, Fitts's Law, Hick's Law, WCAG, mobile-first, responsive layouts. Kitchen sink of UX knowledge.
| Source | claude-plugins.dev |
Figma to tokens to components to code.
Claude reads your Figma files directly. Frames, components, tokens, layout data. Also works in reverse now — "Send this to Figma" captures your running UI as editable Figma layers (Code to Canvas, launched Feb 2026).
| Author | Figma |
| Install | claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse |
| Requires | Figma desktop app, Dev or Full seat |
| Docs | figma.com/developers/mcp |
Key tools:
get_design_context— structured XML of your selection (hierarchy, positions, sizes, styles)get_variable_defs— all variables and styles (color tokens, spacing, typography)get_code_connect_map— maps Figma components to your actual code componentsgenerate_figma_design— push running UI back to Figma as editable layers
The loop:
Figma design --> get_design_context --> Generate code --> Browser preview
^ |
Code to Canvas <-- "Send this to Figma" <------------ Working UI
Add this to your CLAUDE.md for Figma projects:
## Figma Integration
- Use get_design_context to read design structure
- Use get_variable_defs for token definitions
- Check Code Connect mappings before creating new components
- Components: src/components/
- Tokens: src/styles/tokens.cssNot an MCP — a Figma feature. Maps your Figma components to your actual code components. When Claude calls get_code_connect_map, it uses your existing <Button> instead of making a new one. Kills duplicate components.
| Docs | figma.com/code-connect |
For building multi-component claude.ai HTML artifacts with React, Tailwind, and shadcn/ui. Teaches Claude component composition, proper Tailwind usage, and modern React patterns.
| Source | awesome-claude-skills |
Claude can't see your UI by default. These give it a browser.
The standard. 25+ tools for browser control via accessibility tree snapshots (2-5KB) instead of screenshots (500KB+). Claude navigates, clicks, fills forms, takes screenshots, and reads your rendered DOM.
| Author | Microsoft |
| Install | claude mcp add playwright -s user -- npx @playwright/mcp@latest |
| Source | microsoft/playwright-mcp |
2026 updates worth knowing:
--vision auto— accessibility tree most of the time, auto-switches to vision for canvas/WebGL--save-video=800x600— record test sessions- Chrome Extension bridge — uses your existing logged-in browser
@playwright/clicompanion — 4x fewer tokens than MCP (27k vs 114k)- Core Web Vitals (LCP, CLS, INP) via
--caps=devtools
For when Playwright isn't enough. Console inspection, network request analysis, performance profiling, DOM exploration, HAR export, device emulation. Think of it as the Network and Performance tabs, but Claude can read them.
| Author | Anthropic |
| Install | claude mcp add chrome-devtools -s user -- npx @anthropic-ai/chrome-devtools-mcp@latest |
The combo:
DEVELOP --> Claude Code (terminal)
TEST --> Playwright MCP (E2E, cross-browser)
DEBUG --> Chrome DevTools MCP (perf, network)
VERIFY --> Claude in Chrome (quick visual checks)
Model-invoked Playwright automation. Auto-activates when Claude detects it needs to test something.
| Author | lackeyjb |
| Source | awesome-claude-skills |
Gives Claude access to your Storybook component library. It can look up existing components, read their docs and stories, and get build instructions before generating new UI. Also supports visual regression testing through Chromatic — screenshot diffs on every PR.
If you use Storybook, this stops Claude from reinventing components you already have.
| Author | Chromatic |
| Install | claude mcp add storybook-mcp --transport http https://your-storybook-url/mcp --scope project |
| Source | chromatic.com |
Generates Storybook stories, Chromatic/Percy/BackstopJS config, and CI workflows for visual regression testing. Tell it "set up visual regression for my Button component" and it detects your stack, creates stories covering all variants, and wires up the CI pipeline.
| Source | claude-plugins.dev/skills/visual-regression |
From the author of web performance at Google. Five skills that cover Core Web Vitals (LCP, INP, CLS), accessibility (WCAG 2.1), SEO, and best practices. The orchestrator skill runs a full-site audit. Framework-aware — has specific patterns for Next.js, Vue/Nuxt, Svelte, and plain HTML.
| Author | addyosmani |
| Install | npx add-skill addyosmani/web-quality-skills |
| Source | addyosmani/web-quality-skills |
Claude's training data is stale. These give it current docs.
Fetches live, version-specific docs for whatever framework you're using. When you're on React 19, it pulls React 19 docs, not the React 18 APIs from Claude's training data. Covers 1000+ libraries.
| Author | Upstash |
| Install | claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest |
| Source | upstash/context7 |
Matters most for: React 19 vs 18 (different APIs), Tailwind v4 vs v3 (complete rewrite), Next.js App Router vs Pages Router.
Point it at any docs site and it generates a Claude skill from the content. Good for internal component libraries or frameworks Context7 doesn't cover.
| Author | yusufkaraaslan |
| Source | yusufkaraaslan/Skill_Seekers |
Web scraping as an MCP server. Scrape docs, competitor sites, design inspiration. Fills gaps when Context7 doesn't have what you need.
| Docs | firecrawl.dev/docs |
Specialized knowledge for specific frontend tech.
Teaches Claude to produce D3 charts and interactive data visualizations. By @chrisvoncsefalvay.
| Source | awesome-claude-skills |
3D elements and interactive experiences.
| Author | CloudAI-X |
| Source | CloudAI-X/threejs-skills |
Build UI components with shadcn/ui. Part of the Stitch MCP ecosystem.
| Author | Google Labs |
Real-time type checking via Language Server Protocol. Catches errors before Claude even finishes writing. If you write TypeScript, just install this.
| Install | claude plugin add anthropic/typescript-lsp |
Three-skill pipeline. Run them in sequence after Claude generates a page:
1. /frontend-design --> Generate the page
2. /baseline-ui --> Fix spacing, typography, states
3. /fixing-accessibility --> Keyboard, labels, focus, semantics
4. /fixing-motion-performance --> Reduced-motion, perf budgets
Install:
npx ui-skills add baseline-ui
npx ui-skills add fixing-accessibility
npx ui-skills add fixing-motion-performanceDesign, then craft, then a11y, then perf. That's the loop.
Manage deployments, builds, logs, domains from Claude Code. Deploy preview branches, check build status, manage env vars.
| Source | claude.com/plugins |
Zero-config deploy. No servers, no accounts. Point it at a directory, get a URL.
| Author | glitternetwork |
| Source | glitternetwork/pinme |
What to install together, depending on how you work.
These three cover most of what you need. Start here.
claude plugin add anthropic/frontend-design
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
claude mcp add playwright -s user -- npx @playwright/mcp@latestFor teams with a designer handing off Figma files.
claude plugin add anthropic/frontend-design
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
claude mcp add playwright -s user -- npx @playwright/mcp@latest
claude plugin add anthropic/typescript-lspAdd to CLAUDE.md:
## Figma Integration
- Use get_design_context to read design structure
- Use get_variable_defs for token definitions
- Check Code Connect mappings before creating new components
- Components: src/components/
- Tokens: src/styles/tokens.cssShip fast, look good. Minimal config.
claude plugin add anthropic/frontend-design
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
claude plugin add nextlevelbuilder/ui-ux-pro-max-skill
claude mcp add playwright -s user -- npx @playwright/mcp@latestFor teams that maintain their own component library.
# Design
claude plugin add anthropic/frontend-design
claude plugin add nextlevelbuilder/ui-ux-pro-max-skill
# Docs + types
claude mcp add context7 -s user -- npx -y @upstash/context7-mcp@latest
claude plugin add anthropic/typescript-lsp
# Figma
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
# Testing + debugging
claude mcp add playwright -s user -- npx @playwright/mcp@latest
claude mcp add chrome-devtools -s user -- npx @anthropic-ai/chrome-devtools-mcp@latest
# Polish pipeline
npx ui-skills add baseline-ui
npx ui-skills add fixing-accessibility
npx ui-skills add fixing-motion-performance| Tool | Type | Category | Stars | Setup |
|---|---|---|---|---|
| Frontend Design | Skill | Design | Official | One command |
| UI/UX Pro Max | Skill | Design | 16.9k | One command |
| Taste Skill | Skill | Design | — | One command |
| Frontend Design Pro | Skill | Design | — | One command |
| Bencium UX Designer | Skill | Design | — | Manual copy |
| Design System Architect | Skill | Theming | — | Manual copy |
| Design Tokens (phrazzld) | Skill | Theming | — | Manual copy |
| Tailwind CSS Kit | Skill | Theming | — | One command |
| UI Styling (ClaudeKit) | Skill | Theming | — | Manual copy |
| CLAUDE.md Theme Block | Config | Theming | N/A | Copy-paste |
| Create Design System Rules | Skill | Theming | — | Figma MCP needed |
| Animation Skills (freshtechbro) | Skill | Animation | — | One command |
| Motion Skill (jezweb) | Skill | Animation | — | Manual copy |
| Design Motion Principles | Skill | Animation | — | Manual copy |
| Figma MCP | MCP | Design to Code | Official | Config needed |
| Storybook MCP | MCP | Testing | — | Config needed |
| Playwright MCP | MCP | Testing | 20k+ | One command |
| Chrome DevTools MCP | MCP | Debug | Official | One command |
| Web Quality Skills (Osmani) | Skill | Perf/A11y/SEO | — | One command |
| Visual Regression | Skill | Testing | — | Manual copy |
| Context7 | MCP | Docs | — | One command |
| TypeScript LSP | LSP | Types | Official | One command |
| Vercel MCP | MCP | Deploy | — | Config needed |
| Baseline UI | Skill | Polish | — | One command |
| Fixing Accessibility | Skill | A11y | — | One command |
| Fixing Motion/Perf | Skill | Perf | — | One command |
MCP servers eat tokens at session start. Keep 3-5 active max.
| Server | ~Token Cost |
|---|---|
| Playwright MCP | 5.3k |
| Chrome DevTools | 5-6k |
| Figma MCP | 3-4k |
| Context7 | 2k (on-demand) |
| 5 servers total | ~55k before you type anything |
Mitigate with: /mcp disable <name> when not in use, Tool Search (lazy loading, cuts cost up to 95%), and preferring skills over MCP servers where possible. Skills only load ~100 tokens at session start.
| Resource | |
|---|---|
| awesome-claude-code | Master list, 55k stars |
| awesome-claude-skills (travisvn) | Curated skills with tutorials |
| awesome-claude-skills (ComposioHQ) | Skills + connect-apps |
| awesome-claude-skills (BehiSecc) | Community directory |
| awesome-agent-skills (VoltAgent) | 380+ skills, all agents |
| awesome-claude-plugins (ComposioHQ) | Plugin registry |
| claude.com/plugins | Official marketplace |
| Frontend Aesthetics Cookbook | Anthropic's prompting guide |
| ClaudeKit.cc | Frontend Design Pro |
| Claude Code Docs | Official docs |
Know something that should be on this list? Open a PR.
To get included:
- Has to be specifically useful for frontend/design work
- Has to work with Claude Code
- Has to be maintained or from a trusted source
- High star count or official backing helps
wilwaldon.com · February 2026