StealIt

15 skills · 5 publishers

Claude skills for frontend development

React, Next.js, Tailwind and modern web patterns, written by the teams who build those tools, so Claude ships production-grade frontend code.

The best Claude skills for frontend development

  1. 1

    Vercel React Best Practices

    Vercel 34k

    React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance…

    npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
  2. 2

    Web Artifacts Builder

    Anthropic 187k

    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 state…

    npx skills add anthropics/skills --skill web-artifacts-builder
  3. 3

    Vercel Composition Patterns

    Vercel 34k

    React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving…

    npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns

All 15 frontend development skills

15 skills

Vercel React Best PracticesTop pick

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure…

FrontendVercel34k

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…

FrontendAnthropic187k

Vercel Composition Patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers…

FrontendVercel34k

Vercel React View Transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition…

FrontendVercel34k

Angular Migration

Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning…

FrontendSeth Hobson42k

Modern Javascript Patterns

Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for…

FrontendSeth Hobson42k

Nextjs App Router Patterns

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or…

FrontendSeth Hobson42k

React Modernization

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React…

FrontendSeth Hobson42k

React State Management

Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state…

FrontendSeth Hobson42k

Typescript Advanced Types

Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when…

FrontendSeth Hobson42k

React Vite Dashboard

Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).

FrontendGoogle Labs8.7k

Shadcn UI

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

FrontendGoogle Labs8.7k

Stitch React Components

Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking…

FrontendGoogle Labs8.7k

Nextjs On Cloudflare

Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between…

FrontendCloudflare3.3k

Web Perf

Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.

FrontendCloudflare3.3k

About these frontend development skills

Frontend frameworks move faster than any model's training data. These skills keep Claude current on React Server Components, the Next.js App Router, caching and performance rules, straight from Vercel, Google Labs, Cloudflare and others.

Install one per stack you use. Claude reads a skill only when the task needs it, so a React skill costs nothing while you're writing SQL.

This page collects every skill in the directory that covers frontend development: 15 from 5 publishers, including official skills from Vercel, Google Labs, Cloudflare and Anthropic. Each one links back to its original GitHub repository, so you always get the author's latest version.

Publishers on this page

Questions about Claude skills for frontend development

What is the best Claude skill for frontend development?

Our top pick is Vercel React Best Practices by Vercel, from a repository with 34k GitHub stars. Web Artifacts Builder and Vercel Composition Patterns round out the top three. Skills are ranked by the popularity of their source repository, with hand-picked favorites first, and official skills from Vercel, Google Labs, Cloudflare and Anthropic carry a badge.

How do I install a Claude skill for frontend development?

Open a skill's page and run its install command in your project folder, for example npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices. You can also download any skill as a ZIP and add it to Claude Code or upload it to the Claude app.

The install guide walks through every method.

Are Claude skills for frontend development free?

Yes. All 15 skills on this page are open source and free to use. You need a Claude plan that supports skills, or a coding agent that reads SKILL.md files.

Do these skills work in Claude Code and the Claude app?

Yes. A skill is a folder with a SKILL.md file, and the same folder works in Claude Code, the Claude desktop and web apps (on paid plans with code execution turned on) and the Claude API. Many also work in other agents that support the Agent Skills format, such as Cursor and OpenAI Codex. Skills that ship scripts need somewhere Claude can run code.

How many Claude skills for frontend development are there?

We list 15 from 5 publishers, last updated November 4, 2026. The list refreshes from GitHub as publishers release new skills.

Related use cases

All use cases →