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.
jezweb
Claude Skills
jezwebdesign-review
Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks…
jezweb
Claude Skills
jezwebdesign-system
Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser…
jezweb
Claude Skills
jezwebfork-discipline
Audit and enforce the core/client boundary in multi-client projects. Detects where shared platform code is tangled with client-specific code, finds hardcoded client checks, config files…
jezweb
Claude Skills
jezwebimage-processing
Process images for web development — resize, crop, trim whitespace, convert formats (PNG/WebP/JPG), optimise file size, generate thumbnails, create OG card images. Uses Pillow (Python) — no…
jezweb
Claude Skills
jezwebonboarding-ux
Audit and generate in-app user guidance — onboarding flows, empty states, tooltips, feature tours, contextual help, defaults, and inline hints. Browses the app to find where new users would…
jezweb
Claude Skills
jezwebproduct-showcase
Generate a comprehensive marketing website for a web app — multi-page with real screenshots, animated GIF walkthroughs, feature deep-dives, and workflow demonstrations. Browses the running…
jezweb
Claude Skills
jezwebreact-native
React Native and Expo patterns for building performant mobile apps. Covers list performance, animations with Reanimated, navigation, UI patterns, state management, platform-specific code…
Callstackreact-navigation
Provides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and…
jezweb
Claude Skills
jezwebreact-patterns
React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention…
jezweb
Claude Skills
jezwebroadmap
Plan and execute entire application builds. Generates phased delivery roadmaps, then executes them autonomously — phase by phase, committing at milestones, deploying, testing, and…
OpenSenseNovasn-md-to-html-report
将 Markdown 报告、研究笔记、行业分析、战略备忘录、技术白皮书、复盘、周报等长文档，重组并创作为有编辑判断、网页美感和证据秩序的自包含 HTML 专题页。用户要求“转成 HTML”“网页化报告”“美化报告”“做成专题页”“便于分享”“提升可读性/设计感”“把报告做成网页”时使用。必须先写 plan.md 再写 HTML，保留原文事实断言和结论强度，不套模板，不做机械…
Callstackupgrading-react-native
Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving…
jezweb
Claude Skills
jezwebvitest
Set up Vitest testing in any project — detects type (Cloudflare Workers, React, Node, library), generates vitest.config.ts, test setup, utilities, and a sample test. Covers mocking…
Callstackcreate-react-native-library
Scaffolds React Native libraries with create-react-native-library for standalone libraries or local native modules and views. Use when creating or working on React Native libraries or…
jezweb
Claude Skills
jezwebfavicon-gen
Generate custom favicons from logos, text, or brand colours. Produces favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, and web manifest. Use whenever the user wants a…
Callstackgithub-actions
GitHub Actions workflow patterns for React Native iOS simulator and Android emulator cloud builds with downloadable artifacts. Use when setting up CI build pipelines or downloading GitHub…
jezweb
Claude Skills
jezwebgithub-release
Prepare and publish GitHub releases. Sanitizes code for public release (secrets scan, personal artifacts, LICENSE/README validation), creates version tags, and publishes via gh CLI. Trigger…
jezweb
Claude Skills
jezweblanding-page
Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta…
jezweb
Claude Skills
jezwebproject-docs
Generate project documentation from codebase analysis — ARCHITECTURE.md, API_ENDPOINTS.md, DATABASE_SCHEMA.md. Reads source code, schema files, routes, and config to produce accurate…
plugin87brandkit
Generate a complete, accessible brand design system from a brief, as primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single…
plugin87design-qa
Set up or run design QA gates for token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when…
plugin87a11y-audit
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check…
plugin87design-tokens
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale…
jezweb
Claude Skills
jezwebgit-workflow
Guided git workflows: prepare PRs, clean up branches, resolve merge conflicts, handle monorepo tags, squash-and-merge patterns. Use when asked to prepare a PR, clean branches, resolve…
plugin87migrate-design-system
Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…). Adopt their look, build on…
plugin87performance
Optimize UI performance against Core Web Vitals (LCP, INP, CLS) with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to…
vibe-motionprinted-curtain-render
Generate a browser-based p5.js curtain simulation that weaves user-supplied PNG, JPEG, or WebP artwork and optional text into individually moving strands. Use when users ask for an…
plugin87token-build
Set up or run the token build pipeline. Transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android…
vibe-motionwechat-2d-render
Clone or update https://github.com/sxhzju/wechat-2d and render the default WeChat-style 2D chat motion video with Remotion. Use when users ask for 微信聊天动画, wechat 2d chat render, 微信视频消息动效…
EL4CTEOblender-video-editing
Video in Blender 5.2 - Video Sequencer edits from Python (clips, image sequences, crossfades, titles, music fades, proxies, color management, H.264/AAC output) and motion tracking (feature…
vibe-motionlight-spotlight-render
Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spotlight text reveal, light logo…
vibe-motionthreejs-earth-render
Clone or update https://github.com/vibe-motion/threejs-earth and render the Three.js Earth route animation with Puppeteer frame capture. Use when users ask for 三维地球航线动画, Three.js Earth…
vibe-motionclaude-typer
Render a Claude-style prompt typing animation video by calling Remotion CLI against the remote site https://www.laosunwendao.com. Use when the user asks for "做一个 claude 的提示词打字机动画", "做…
boraoztunc
Skills
boraoztuncbetter-accessibility
Accessibility engineering for product interfaces, from focus states and keyboard support to ARIA, forms, and screen readers. Use when building or reviewing UI components, modals, menus…
boraoztunc
Skills
boraoztuncbetter-typography
Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale…
boraoztunc
Skills
boraoztuncbetter-ui
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders…
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