Skill Finder
The best Claude skills for frontend design
Start with frontend-design from Anthropic: it scores highest here, 97, has over 1 million installs, needs nothing beyond Claude Code, and makes Claude plan colors, type and layout for your subject before it writes code. The list also covers React and Next.js rules, shadcn/ui, claude.ai artifacts, motion and GSAP, Tailwind v4, Vue, Angular, Flutter, SwiftUI, Android, three.js and Google Stitch.
The 42 skills made for this job
-
1
Get frontend-designfrontend-design
For anyone asking Claude to build a page or screen whose look should be chosen for the subject. Skip it if your brief already fixes the palette, fonts and layout.
-
2
Get vercel-react-best-practicesvercel-react-best-practices
For React and Next.js developers who want slow pages and heavy bundles fixed by a ranked rulebook. Skip it if you do not write React or Next.js code.
-
3
Get shadcnshadcn
For React developers on shadcn/ui who want Claude to add and compose components through the CLI. Skip it if your project has no components.json and you do not plan one.
-
4
Get ui-ux-pro-maxui-ux-pro-max
For builders who want Claude to pick styles, palettes and fonts from a local search database before writing UI. Skip it if your task has no visual or interaction side.
-
5 Get web-artifacts-builder
web-artifacts-builder
For developers making multi-screen claude.ai artifacts with state, routing or shadcn/ui parts. Skip it for a simple one-file HTML or JSX demo.
-
6
Get design-taste-frontenddesign-taste-frontend
For people building landing pages or app screens who want a chosen art direction, checked in a real browser. Skip it if you need a quick unstyled draft.
-
7 Get migrate-radix-to-base
migrate-radix-to-base
For shadcn and React teams moving off Radix UI to Base UI one component at a time. Skip it if your project doesn't use Radix or you can't work on a clean git branch.
-
8
Get apple-designapple-design
For web designers and developers who want gestures, springs and sheets that feel like Apple's interfaces. Skip it if your UI has little motion or touch.
-
9
Get impeccableimpeccable
For designers and developers who want named commands such as polish, critique and quieter for interface work. Skip it if the task has no screen to design.
-
10 Get emil-design-eng
emil-design-eng
For designers and front-end developers who want tuned motion and small touches of polish in web UI. Skip it if you need a full design system or brand look rather than interaction details.
-
11
Get flutter-build-responsive-layoutflutter-build-responsive-layout
For Flutter developers whose app has to work on phones, tablets, desktops and foldables. Skip it if your app ships on one fixed screen size only.
-
12
Get hallmarkhallmark
For founders and designers starting a new site who want a dealt theme and a lint pass against stock AI looks. Skip it for small edits to a design that exists.
-
13
Get clerk-custom-uiclerk-custom-ui
For apps on Clerk that need their own sign-in screens or Clerk components styled to match the brand. Skip it if you do not use Clerk for login.
-
14
Get angular-developerangular-developer
For Angular developers who want Claude to write version-aware, current Angular code and check it builds. Skip it if you work in React, Vue or another framework.
-
15
Get frontend-ui-engineeringfrontend-ui-engineering
For developers building React-style interfaces who want accessible, responsive components without the stock AI look. Skip it if your task is backend or API work.
-
16 Get design-system
design-system
For designers and front-end developers setting up design tokens or making on-brand HTML pitch decks. Skip it if you already run a mature token pipeline or need slides as PowerPoint files.
-
17
Get gsap-coregsap-core
For web developers animating DOM or SVG with GSAP tweens, eases and staggers. Skip it if you need timelines or scroll effects, which sibling GSAP skills cover.
-
18 Get gsap-scrolltrigger
gsap-scrolltrigger
For front-end developers building scroll-linked animation, pinned sections or parallax with GSAP. Skip it if you animate with plain CSS only.
-
19 Get gsap-performance
gsap-performance
For developers whose GSAP animations stutter and who want them smoother. Skip it if you do not use GSAP or need help writing animations from scratch.
-
20
Get tailwind-design-systemtailwind-design-system
For developers setting up a component library or design tokens on Tailwind CSS v4. Skip it if your project stays on Tailwind v3.
-
21
Get design-mddesign-md
For Google Stitch users who want their screens written up as a DESIGN.md that guides new screens. Skip it if you do not have a Stitch project.
-
22 Get enhance-prompt
enhance-prompt
For Stitch users who want a vague UI idea turned into a structured prompt with design tokens. Skip it if you do not generate screens with Google Stitch.
-
23 Get stitch-loop
stitch-loop
For builders who want an agent to grow a multi-page site with Google Stitch, one page per run. Skip it if you lack the Stitch MCP server or want to design pages yourself.
-
24
Get huashu-designhuashu-design
For people who want HTML prototypes, slide decks, infographics or animations, starting from three drafts to choose from. Skip it for production web apps.
-
25
Get vue-best-practicesvue-best-practices
For Vue 3 developers who want Claude to use the Composition API with TypeScript and plan components before coding. Skip it if your project is not Vue or sticks to the Options API.
-
26
Get swiftui-expert-skillswiftui-expert-skill
For SwiftUI developers who want help writing, reviewing or profiling views, including Instruments traces. Skip it if you are not building with SwiftUI or cannot run Xcode tools on a Mac.
-
27
Get Garden SkillsGarden Skills
For designers and developers who want polished HTML pages, prototypes and decks built step by step with checkpoints. Skip it if you mainly write back-end or CLI code.
-
28
Get vuevue
For Vue developers who want a short, current reference for Vue 3.5 macros, reactivity and built-in components. Skip it if you need a full workflow or still use the Options API.
-
29
Get fixing-motion-performancefixing-motion-performance
For front-end developers whose CSS or JS animations stutter or whose scroll effects jank. Skip it if you want new motion designed or a switch to another animation library.
-
30
Get threejs-animationthreejs-animation
For web developers animating three.js scenes, glTF characters or morph targets. Skip it if you do not use three.js or need help with 2D CSS and UI motion instead.
-
31 Get fixing-accessibility
fixing-accessibility
For front-end developers who want Claude to catch and patch accessibility gaps in buttons, forms and dialogs. Skip it if you need a formal WCAG audit report or automated scanner results.
-
32
Get Android SkillsAndroid Skills
For Android developers who want official step-by-step guidance for Compose layout, upgrades, security and performance work. Skip it if you don't build Android apps.
-
33 Get threejs-fundamentals
threejs-fundamentals
For web developers starting a Three.js scene who want current r186 setup code. Skip it if you build 3D in a game engine or don't touch WebGL.
-
34
Get opentuiopentui
For developers building terminal apps with OpenTUI's Core, React or Solid API. Skip it if your terminal UI uses another library or you can't run Bun.
-
35 Get baseline-ui
baseline-ui
For developers using Tailwind and React who want AI-built screens tidied to a strict house style. Skip it if your project avoids Tailwind or you want bold, decorative visuals.
-
36
Get better-uibetter-ui
For designers and front-end developers who want exact values for radius, shadows, icons and motion. Skip it if your interface still has broken interactions to fix first.
-
37 Get better-typography
better-typography
For front-end developers who want text rendering checked and fixed against exact rules. Skip it if you want a new typeface picked for you, which it does only on request.
-
38
Get transitions-devtransitions-dev
For web developers who want ready CSS transitions for dropdowns, modals, toasts and loaders. Skip it if you already use a motion library or build native apps.
-
39
Get interface-designinterface-design
For builders of dashboards, admin panels and SaaS tools who want each visual choice argued from the product's world. Skip it for landing pages or marketing sites.
-
40
Get shadcn-uishadcn-ui
For React developers setting up shadcn/ui components, Zod forms and Tailwind themes. Skip it if your project does not use React and Tailwind CSS.
-
41
Get AI Design SkillsAI Design Skills
For people building a landing page or Figma file who want fixed design rules and conversion structure. Skip it if you already have your own design system.
-
42
Get scroll-worldscroll-world
For brands that want a scroll-driven 3D world as a landing page hero. Skip it if you can't pay per AI video clip or need a small, light page.
Also useful for design
Their main job is something else, but they help with this one.
-
Get flutter-fix-layout-issues
flutter-fix-layout-issues
For Flutter developers stuck on overflow stripes or unbounded constraint errors. Skip it if your bug is in state, data or speed rather than layout.
-
Get audit-websiteaudit-website
For site owners who want a squirrelscan audit turned into code fixes and re-checked until the score rises. Skip it if you will not install the squirrel CLI.
-
Get review-animations
review-animations
For front-end teams who want a strict second opinion on animation code before it ships. Skip it if you need a general code review or help writing new motion.
-
Get sanity-best-practicessanity-best-practices
For developers building or fixing a Sanity project who want Sanity's own patterns for schemas and GROQ. Skip it if your content lives in a different CMS.
-
Get design
design
For founders and designers who want logos, brand mockups, banners, icons and social images from one skill. Skip it if you have no Gemini API key or only need app UI code.
-
Get swiftui-proswiftui-pro
For iOS and Mac developers who want SwiftUI code reviewed for outdated APIs, accessibility and performance. Skip it if your app is built mainly in UIKit or not in Swift at all.
-
Get react-native-best-practicesreact-native-best-practices
For React Native developers chasing dropped frames, slow startup, big bundles or memory leaks. Skip it if you are not on React Native or have no measured performance problem yet.
-
Get anatomyanatomy
For writers and developers who want a detailed, animated isometric figure to explain a system. Skip it if a quick box-and-arrow diagram will do or you lack Node.js.
-
Get guizang-ppt-skillguizang-ppt-skill
For speakers who want a magazine or Swiss-style web deck with presenter view in one HTML file. Skip it if you need an editable PowerPoint or table-heavy slides.
-
Get kamikami
For people who want a resume, one-pager, report or slides typeset as a print-quality PDF. Skip it if you need to audit or restyle an existing product website.
-
Get vue-debug-guides
vue-debug-guides
For Vue 3 developers chasing runtime errors, warnings, reactivity bugs or hydration mismatches. Skip it if you work in React or need Vue style guidance rather than fixes.
-
Get better-interface
better-interface
For teams who want one ranked UI review covering accessibility, layout, copy, type, color and polish. Skip it if you lack the other better-* skills it hands each area to.
-
Get frontend-slidesfrontend-slides
For people who want an animated web slide deck and like to choose a look by seeing it. Skip it if you must hand over an editable PowerPoint file.
How to choose
For looks, frontend-design plans four to six hex colors and checks them against common AI design habits. design-taste-frontend and hallmark check results in a browser; at least one scanner rated hallmark high risk. Garden Skills writes a short design read and waits for your go-ahead before building.
For code rather than looks, vercel-react-best-practices applies 70 ranked performance rules to React and Next.js, and shadcn runs the shadcn CLI to add components. web-artifacts-builder bundles a React, Tailwind and shadcn/ui app into one HTML file for claude.ai, and needs Node.js 18 or newer.
For motion, emil-design-eng asks whether something should animate at all and supplies curves and timings. apple-design brings springs, gestures and sheets from Apple's design talks to the web. The three GreenSock skills cover core tweens, ScrollTrigger and GSAP performance, and each needs GSAP in your project.
Many picks fit one stack. vue-best-practices and vue cover Vue 3, angular-developer uses the Angular CLI, and swiftui-expert-skill needs a Mac with Xcode. Android Skills, 36 official skills from the Android team, cover Compose layout, upgrades and performance. design-md, enhance-prompt and stitch-loop need Google Stitch.
Several skills review UI you already built: fixing-accessibility and baseline-ui list each violation with a code fix. For landing pages, AI Design Skills sets a 12-part page structure and writes conversion copy, and scroll-world builds a scroll-driven 3D hero that you pay for per AI video clip.