Best Claude skills for frontend development
Frontend skills encode the details that separate a demo from a product: accessible markup, responsive layout, motion that respects reduced-motion settings, and framework best practices for React, Next.js, Vue or Svelte. Official skills from Vercel and Anthropic sit next to community favourites here.
325 frontend skills · ranked live · November 2026
The top 10. Ranked by the Alyn Score.
- 1#1
Leonxlnx
Design Taste Frontend
tasteskill 2.5.1, the anti-slop frontend skill. Builds professional company websites at the level of figma.com and x.ai: plain copy in a voice of its own, one system, one section per…
113k5.6MScore 92 - 2#2
affaan-m
Angular Developer
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource)…
Pack301k1.7MScore 91 - 3#3
Paul Bakaus
Impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages, dashboards…
Pack108k1.9MScore 90 - 4#4
Accessibility
Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast…
Pack301k1.7MScore 89 - 5#5
Backend Patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js…
Pack301k1.7MScore 89 - 6#6
nextlevelbuilder
Design
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP…
Pack148k932kScore 89 - 7#7
Design System
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic…
Pack148k932kScore 89 - 8#8
Anthropic
Skills
Anthropic
Frontend Design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as…
Pack192k3.8MScore 89 - 9#9
UI Styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building…
Pack148k932kScore 89 - 10#10
Anthropic
Skills
Web Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring…
Pack192k3.8MScore 87
What makes a great frontend skill.
Framework-specific rules (React, Next.js, Tailwind) instead of generic advice.
Accessibility and performance checks the agent runs before it says done.
Examples of good output, so the agent copies patterns rather than guessing.
All 325 frontend skills.
Corey Haines
Makerskills
Corey Hainesslide-deck
When you want to draft, update, convert, or export a slide deck for a React/Next.js slide system (${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/). Writes TypeScript…
LeoYeAI
Agent Master Skills
LeoYeAIa11y-audit
Use for any accessibility audit or a11y fix (WCAG 2.2 A/AA, color contrast, compliance report, CI check) in React, Next.js, Vue, Angular, Svelte or HTML. Scans with a11y_scanner.py and…
Owl-Listener
Designer Skills
Owl-Listeneraccessibility-audit
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions…
EL4CTEOblender-rendering
Render with Blender 5.2 Cycles/EEVEE/Workbench - quality presets, GPU setup, adaptive sampling, denoising, light paths, color management (AgX, Khronos PBR Neutral, ACES), PNG/EXR/MP4…
EL4CTEOblender-simulation
Physics in Blender 5.2 - rigid bodies (density mass, shapes, bake to keys), classic cloth presets and pinning, new node-based Cloth/Hair Dynamics (XPBD, Collider, effectors), Mantaflow…
internet-court
Internet Court Skill
internet-courtdflow-phantom-connect
Build Solana wallet-connected apps with Phantom Connect SDKs and DFlow spot trading. Use when user asks to connect a Phantom wallet, integrate Phantom in React, React Native, or vanilla JS…
vibe-motiondisney-animation-rule-skill
Apply Disney's 12 principles as practical design and engineering rules for procedural animation. Use when creating, improving, reviewing, or debugging code-driven motion in web, SVG…
Pluviobyte
Rnskill
Pluviobyteeditorial-collage-motion
将参考图或简要描述解码为可编辑的半色调纸张拼贴规范，默认使用 Codex 内置 image_gen 生成品牌一致的静帧和透明图层，再用本地 FFmpeg 或 HyperFrames 制作“从空背景逐件组装”的确定性动态视频。用户提到半色调拼贴、纸张拼贴、剪纸拼贴、编辑式拼贴、杂志拼贴、复古印刷拼贴、拼贴动效、拼贴动画、剪纸动画、纸片组装、…
RefoundAI
Lenny Skills
RefoundAIenterprise-sales-motion
Help users build a robust enterprise sales engine by mastering founder-led discovery, navigating complex procurement cycles, and designing products that meet organizational governance needs.
conorluddy
IOS Simulator Skill
conorluddyios-simulator-skill
Build, test, and drive iOS apps in the Simulator with 31 token-efficient scripts. Use when asked to build or test an Xcode project, launch an app on a simulator, tap/type/swipe through its…
charlie947
Motion Graphics Skills
charlie947motion-effects
Build any of 16 premium motion effects from scratch in your own brand, as one 8-second looping HTML file with window.seek(seconds) so it exports frame-exact to MP4 or GIF. Interfaces…
petrkindlmannaccessibility-testing
Test for WCAG 2.2 AA compliance with axe-core + Playwright, keyboard navigation audits, screen reader testing, ARIA pattern validation, and legal compliance mapping (ADA, EAA, Section 508)…
glebiscms-migration-checklist
Gated checklist and working method for migrating a WordPress site to Next.js with a Payload CMS admin — audit, owner decisions, HTML→Lexical conversion, idempotent import and…
petrkindlmanncoverage-analysis
Measure and improve test coverage meaningfully. Covers Istanbul/V8/coverage.py configuration, coverage gap analysis by risk, coverage-as-ratchet in CI (never let it decrease), PR coverage…
databricks
Databricks Agent Skills
databricksdatabricks-app-design
Design the UX of custom-code Databricks Apps (AppKit/React) data screens — KPI/overview pages, reports, charts, tables, and Genie/chat data assistants — mapped to concrete AppKit…
waynesutton
Builder Skills
waynesuttondev
House style for full stack Convex work: React, Vite, TypeScript, Convex mutations, Convex Auth, Resend, design system over browser defaults, and the files.md, changelog.md, task.md habit…
mxyhihuashu-design
花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。
jamditis
Claude Skills Journalism
jamditiszero-build-frontend
Zero-build frontend development for static apps, browser extensions, maps, and lightweight data-backed interfaces. Use when deployment must not require a build step.
LeoYeAI
Agent Master Skills
LeoYeAIaccessibility
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels…
jamditis
Claude Skills Journalism
jamditisaccessibility-compliance
Web accessibility patterns for news and academic sites. Use for WCAG audits, alt text, accessible data viz, and assistive tech.
rmyndharis
Antigravity Skills
rmyndharisaccessibility-compliance-accessibility-audit
Audit applications for WCAG compliance, inclusive design, and assistive technology compatibility, then identify barriers and provide remediation guidance. Use when running an accessibility…
LeoYeAI
Agent Master Skills
LeoYeAIactivity-campaign-from-ui
Turn campaign UI references into a new H5/Web campaign proposal, page architecture, and HTML/CSS/JavaScript high-fidelity front-end draft. Supports mode-based responses: analysis, proposal…
OneWave-AI
Claude Skills
OneWave-AIanimate
Generate animated videos and motion graphics from natural language descriptions. Creates a standalone Vite + React project with Framer Motion scenes that auto-play in the browser. Use when…
jamditis
Claude Skills Journalism
jamditiselectron-dev
Electron desktop apps with React, TypeScript, and Vite. Use for IPC, window/tray, PTY terminals, WebRTC, and packaging.
jaechang-hitsmolecular-visualization-3dmol
3Dmol.js WebGL molecular visualization emitted as self-contained HTML. Render structures (PDB/SDF/XYZ/MOL2/cube) with stick, sphere, cartoon, line, and surface styles; animate trajectories…
dongshuyantask-forest
Maintains a repo-local task forest or task DAG for the current workspace. Use when the user asks to initialize or update a task forest, close a session, summarize evolving project work…
quodsoler
Unreal Engine Skills
quodsolerue-animation-system
Use when writing or debugging Unreal Engine animation C++: AnimInstance subclasses, thread-safe update, FAnimInstanceProxy, montage playback and delegates, anim notifies, animation curves…
quodsoler
Unreal Engine Skills
quodsolerue-character-movement
Use when writing or debugging UCharacterMovementComponent code: custom movement modes, floor detection, jumping, crouching, root motion, moving platforms, or client-side movement…
quodsoler
Unreal Engine Skills
quodsolerue-ui-umg-slate
Use when writing or fixing Unreal Engine UI in C++ — UMG user widgets, Slate widgets, Common UI screens, or MVVM view models. Also use when the user mentions 'UUserWidget'…
charlie947
Motion Graphics Skills
charlie947vox-explainer
Make a short Vox-style documentary explainer (30-60 seconds) entirely in code with Claude Code. Torn paper, halftone texture, bold condensed type, motion on twos. Use when someone says…
Vincentwei1021
Anything2explainer
Vincentwei1021anything2explainer
给一个主题，产出一条黑底 MG 风格（幕底可选星点或点阵波）、有配音字幕章节进度条的科普讲解视频（中文或英文；Remotion 代码动画；时长由用户定，常用 3–5 分钟）。内含可编译模板、图元库、配音/分镜/渲染工具、风格与动效规范、多 agent 分工协议与 QC 判据，以及一条完整样片（《RAG 与知识库》）作为质量标尺。Turn any topic into a…
boraoztunc
Skills
boraoztuncapp-store-screenshots
Use when building App Store screenshot pages, generating exportable marketing screenshots for iOS apps, or creating programmatic screenshot generators with Next.js. Triggers on app store…
boraoztunc
Skills
boraoztuncapple-design
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions…
boraoztunc
Skills
boraoztuncbeam-glow-states
Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or…
charlie947
Motion Graphics Skills
charlie947brand-intake
The setup step every other skill in this pack reads. A short interview plus 3 to 5 reference frames becomes two files in your project, brand.md (who you are, what you sell, your assets) and…
mxyhibrowser-trace
Capture a full DevTools-protocol trace of any browser automation — CDP firehose, screenshots, and DOM dumps — then bisect the stream into per-page searchable buckets. Use when the user…
Frontend skills, explained.
Also searched as: claude code frontend skills, react skills, tailwind skill, frontend design skill.
What are the best Claude skills for frontend development?
Right now the top-ranked frontend skills on Alyn are Design Taste Frontend (Leonxlnx), Angular Developer (affaan-m), Impeccable (Paul Bakaus). Rankings combine GitHub stars, installs, freshness and depth, and update live.
Which skill makes Claude Code better at frontend?
Anthropic's frontend-design skill, Vercel's React best practices and web design guidelines, and Taste Skill are the most popular choices. Combine one design skill with one framework skill.
Do frontend skills work in Cursor?
Yes. Cursor reads SKILL.md files from .agents/skills in your project. Install with npx skills add and pick Cursor as the target.
How do I install a frontend skill?
Run npx skills add owner/repo in your project, or copy the folder with SKILL.md into ~/.claude/skills. Every skill on this page has a ready-to-copy command.
More in Build
Frontend skills for your agent