My Website Building Skills Playbook for Claude Code
I build websites with Claude Code, and I've set it up with 64 skills that cover design, animation, 3D, components, Figma, testing and accessibility. This is the playbook I keep: what each group is for and the order I use them in. I'll keep updating it as my setup changes.
How skills work
- A skill is a folder of instructions Claude loads when a task matches its description. Claude picks them automatically, or you can name one, for example "use impeccable to critique the homepage".
- Global skills live in ~/.claude/skills/, so they work in every project. Delete a folder there to remove one.
- I install them with the skills CLI: npx skills add <owner/repo> --skill <name> -g -a claude-code -y
- New skills load from the next Claude Code session.
- Most are community packages, not vetted by Anthropic. GSAP, Figma, Playwright and 21st.dev come from the vendors' own GitHub accounts. Read a skill before you rely on it.
Design direction and taste
These decide how a site should look and feel before any code is written. I start every new site or redesign here.
| Skill | Source | Use it to |
|---|---|---|
impeccable | pbakaus/impeccable | Design, critique, audit or polish an interface; my main design-lead skill |
design-taste-frontend | leonxlnx/taste-skill | Avoid templated "AI-looking" pages on landing pages, portfolios and redesigns |
ui-ux-pro-max | nextlevelbuilder | UI/UX rules for layout, typography, colour, responsive design and accessibility |
emil-design-eng | emilkowalski/skill | Emil Kowalski's approach to UI polish and the small details |
apple-design | emilkowalski/skill | Apple-style fluid motion, depth and gesture feel on the web |
paint | athevon/genjutsu | A full art-direction pass: brainstorm, design system, build, audit |
mobile-native | emilkowalski/skill | Make a site feel like an installed app on phones (100vh bug, tap highlights, input zoom) |
Animation and motion
Three animation toolkits; I pick one per site. Motion.dev for component motion in React and Next.js, GSAP for scroll-driven sequences.
| Skill | Source | Use it to |
|---|---|---|
animate | emilkowalski/skill | Build one animation from scratch: purpose, curve, duration and exit |
find-animation-opportunities | emilkowalski/skill | List places that should animate, with exact values (read-only) |
improve-animations | emilkowalski/skill | Audit existing motion and write a prioritised fix plan (read-only) |
review-animations | emilkowalski/skill | Review motion code against a strict craft bar |
animation-vocabulary | emilkowalski/skill | Find the right name for an effect you can only describe |
motion-design | lottiefiles | Timing, easing, choreography and Disney principles for UI motion |
motion-dev-animations | 199-biotechnologies | Motion.dev (Framer Motion successor) animations in React, Next.js, Svelte, Astro |
gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-performance | greensock (official) | GSAP tweens, sequences, scroll effects, SplitText, Flip, smooth 60fps |
gsap-react, gsap-frameworks | greensock (official) | GSAP inside React, Vue or Svelte with proper cleanup |
cast | athevon/genjutsu | Creative micro-interactions and wow-factor on an existing UI |
bunshin | athevon/genjutsu | A full site build pipeline: Impeccable leads design, genjutsu leads motion |
animate-expo | emilkowalski/skill | Animation in React Native and Expo apps (not websites) |
3D with Three.js
Ten skills from cloudai-x/threejs-skills, from a spinning hero object to a full interactive scene. On a portfolio, one 3D moment usually beats several.
| Skill | Use it to |
|---|---|
threejs-fundamentals | Scene, camera, renderer and object hierarchy |
threejs-geometry | Shapes, custom meshes and instanced objects |
threejs-materials | PBR, basic and shader materials |
threejs-textures | Images, UV maps and environment maps |
threejs-lighting | Lights, shadows and environment lighting |
threejs-loaders | GLTF models, textures and HDR files with progress |
threejs-animation | Model animations, morph targets and procedural motion |
threejs-interaction | Clicks, hover, touch and camera controls |
threejs-shaders | Custom GLSL effects |
threejs-postprocessing | Bloom, depth of field, blur and colour grading |
UI components and libraries
shadcn/ui and 21st.dev are React component libraries, so they apply to React and Next.js sites like this one.
| Skill | Source | Use it to |
|---|---|---|
shadcn-ui | giuseppe-trisciuoglio | Install and customise accessible shadcn/ui components and forms |
21st-ui-build | 21st-dev (official) | Build or restyle a page, section or component with 21st.dev inspiration |
21st-ui-explore | 21st-dev (official) | Compare several distinct UI directions before choosing one |
21st-ui-review | 21st-dev (official) | Review UI for consistency, accessibility and responsiveness |
21st-cli-use | 21st-dev (official) | Search and install components, themes and templates from the 21st.dev catalog |
21st-ai | 21st-dev (official) | Generate UI variants from a prompt and pull the chosen one into the project |
21st-design-sync, 21st-registry | 21st-dev (official) | Publish your own themes and components to 21st.dev |
pick-ui-library | emilkowalski/skill | Choose the right library for a job (charts, toasts, drag and drop); runs only when named |
prototype | emilkowalski/skill | Build several versions of a UI piece and flip between them live; runs only when named |
ask-sonner | emilkowalski/skill | Sonner toast notifications in React |
The 21st.dev skills need the 21st CLI (@21st-dev/cli) and a 21st.dev account.
Figma
Fourteen official Figma skills. They only work once the Figma MCP server is connected.
| Skill | Use it to |
|---|---|
figma-design-to-code | Turn a Figma design into working code |
figma-implement-motion | Turn Figma animations into code |
figma-generate-design | Push an existing page from code into Figma |
figma-generate-library | Build a Figma design system (tokens, components, light/dark) from code |
figma-use | Required base skill for any write to Figma |
figma-use-motion | Add keyframes and easing to Figma layers |
figma-code-connect | Map Figma components to code snippets |
figma-create-new-file | Create a new Figma, FigJam or Slides file |
figma-generate-diagram | Draw flowcharts and diagrams in Figma |
figma-use-figjam, figma-use-slides | Work in FigJam boards and Figma Slides |
figma-shaders, figma-generative-plugins | Shader effects and reusable generative plugins |
figma-swiftui | Translate between Figma and SwiftUI for iOS apps |
Quality, testing and accessibility
I run these before every launch or major update.
| Skill | Source | Use it to |
|---|---|---|
web-accessibility | akillness/jeo-skills | Find and fix accessibility failures: keyboard, focus, labels, contrast, reflow |
playwright-cli | microsoft (official) | Drive a real browser to test pages and write Playwright tests |
break-ui | emilkowalski/skill | Stress-test UI with worst-case data: long names, empty states, emoji, huge numbers |
21st-ui-review | 21st-dev (official) | A design QA pass on consistency and responsiveness |
impeccable | pbakaus/impeccable | Critique and harden a finished page |
review-animations | emilkowalski/skill | Check motion quality and reduced-motion support |
write-swift (emilkowalski/skill) is also in my set. It covers Swift and iOS code, not websites.
MCP servers
MCP servers connect Claude to outside tools. Perplexity and Firecrawl need API keys from their sites, and Figma needs a Figma sign-in.
| Server | What it adds | Needs |
|---|---|---|
| Figma | Read and write Figma files; unlocks the Figma skills | Figma account sign-in |
| Perplexity | Web research with cited answers | API key from perplexity.ai |
| Firecrawl | Scrape and crawl websites into clean text | API key from firecrawl.dev |
| Claude in Chrome | Control your real Chrome browser | The Claude desktop app and Chrome extension |
| Chrome DevTools | DevTools-level browser control and performance traces | Nothing |
Add them with the claude CLI, replacing your-key with your own key:
claude mcp add -s user --transport http figma https://mcp.figma.com/mcp
claude mcp add -s user perplexity -e PERPLEXITY_API_KEY=your-key -- npx -y @perplexity-ai/mcp-server
claude mcp add -s user firecrawl -e FIRECRAWL_API_KEY=your-key -- npx -y firecrawl-mcp
claude mcp add -s user chrome-devtools -- npx -y chrome-devtools-mcp@latestMy workflow for building a website
- Set the direction. Use impeccable or design-taste-frontend to define the look, type and colour. Use 21st-ui-explore or prototype to compare options.
- Pull in designs (if any). With Figma connected, use figma-design-to-code to turn mockups into code.
- Choose the stack and libraries. I build in Next.js, so shadcn/ui and 21st.dev apply. Plain HTML/CSS/JS still suits very small one-off sites. Use pick-ui-library for specific needs.
- Build the pages. Use ui-ux-pro-max for layout and responsive rules, shadcn-ui or 21st-ui-build for components, and mobile-native for phone polish.
- Add motion. Run find-animation-opportunities first, then build with motion-dev-animations or the gsap skills. Add threejs skills for a 3D moment and cast for micro-interactions.
- Test and harden. Run web-accessibility, break-ui, playwright-cli and review-animations, then a final impeccable critique.
- Launch. Deploy, then keep this playbook updated as new skills join the workflow.
For a whole site in one go, bunshin (genjutsu) runs most of this pipeline automatically.