Best Skills for Frontend Development

The AI just generated a React component using componentDidMount. In 2026. Your project uses Server Components with the App Router, but the AI defaulted to patterns from its training data — a mix of class components, Pages Router, and deprecated lifecycle methods. You correct it, it generates the right code, and then in the next file it goes back to the old patterns.

Frontend skills fix this by loading current best practices into the AI’s context at session start. Instead of fighting outdated defaults, the AI starts every session knowing exactly how to write React, Next.js, Vue, or Angular code the way your framework recommends today.

What You’ll Walk Away With

• The top skills for React, Next.js, Vue, Angular, Svelte, and general frontend development
• Installation commands for each skill
• What each skill teaches the AI and why it matters
• Strategies for combining frontend skills without overloading context

React Skills

Vercel React Best Practices (107K installs)

The most installed frontend skill by a wide margin, part of the vercel-labs/agent-skills collection (239K total installs). Maintained by Vercel Engineering, it teaches the AI current React and Next.js performance optimization patterns: Server Components, Suspense, proper hook usage, and the composition patterns recommended by the React team.

npx skills add vercel-labs/agent-skills

What it teaches:

• Default to Server Components; use 'use client' only when needed
• React and Next.js performance optimization from the Vercel Engineering team
• Proper patterns for state management, effects, and refs
• Performance-first component architecture

Why it matters: Without this skill, the AI frequently generates Pages Router patterns (getServerSideProps, getStaticProps) even in App Router projects. It also tends to overuse useEffect for data fetching when a Server Component would be simpler and more performant.

Tip

Copy-paste prompt after installing React best practices:

“Review the components in src/components/ and identify any that use outdated React patterns: class components, useEffect for data fetching that could be a Server Component, or unnecessary client-side state. For each one, suggest a refactored version using the current best practices from my installed skills.”

Vercel Composition Patterns (28K installs)

Also from vercel-labs/agent-skills, this skill focuses specifically on React composition patterns — compound components, render props, and the latest React 19 patterns.

What it teaches:

• Compound component patterns for complex UI
• Render props and higher-order component alternatives
• React 19 patterns including use, Actions, and form handling
• When to compose vs. when to abstract

Web Design Guidelines (81K installs)

The second most popular skill in the Vercel collection. It acts as a UI code reviewer, checking your generated code against the Web Interface Guidelines for accessibility and design quality.

What it teaches:

• UI code review against established Web Interface Guidelines
• Accessibility best practices baked into component generation
• Consistent design patterns across your application

Next.js Skills

Next.js Best Practices (7.9K installs)

From the dedicated vercel-labs/next-skills collection (12.5K total), this skill covers the full range of Next.js file conventions, React Server Component boundaries, data fetching patterns, async APIs, and metadata handling.

npx skills add vercel-labs/next-skills

What it teaches:

• App Router file conventions: page.tsx, layout.tsx, loading.tsx, error.tsx
• React Server Component boundaries and when to use 'use client'
• Data fetching patterns and async APIs
• Metadata and SEO configuration
• Next.js-specific performance patterns

Why it matters: Next.js moves fast. The difference between Next.js 14, 15, and 16 patterns is significant, and the AI’s training data often mixes patterns from multiple versions. This skill grounds the AI in the current recommended approach.

Tip

Copy-paste prompt for Next.js migration:

“I am migrating from Pages Router to App Router. Scan all files in src/pages/ and for each one, show me what the equivalent App Router implementation would look like using the patterns from my installed Next.js skill. Start with the most complex page.”

Next.js Cache Components (2.6K installs)

Covers the newest Next.js 16 features: Cache Components, Partial Prerendering (PPR), and the use cache directive.

What it teaches:

• Next.js 16 Cache Components
• Partial Prerendering (PPR) configuration and usage
• The use cache directive for fine-grained caching
• When to use each caching strategy

Next.js Upgrade (2K installs)

A migration-focused skill that teaches the AI how to follow the official Next.js migration guides when upgrading between versions.

What it teaches:

• Step-by-step upgrade paths following official migration docs
• Breaking change identification and resolution
• Codemods and automated transformations

Vercel AI SDK (3.6K installs)

If you are building AI features into your application, this skill from the vercel/ai collection (4.5K total) teaches the AI how to use the Vercel AI SDK correctly.

npx skills add vercel/ai

What it teaches:

• Core functions: generateText, streamText, and streaming patterns
• Agent architecture and multi-step workflows
• Tool calling and function invocation patterns
• Server-side AI calls with proper error handling

Vue Ecosystem Skills

Antfu Skills Collection (41.9K installs)

Anthony Fu maintains a comprehensive skills collection covering the entire Vue ecosystem and related tooling. This is the single install you need for Vue, Nuxt, Vite, and Vitest.

npx skills add antfu/skills

Individual skills in this collection:

vue (3.6K installs) — Vue 3 components and composables. Teaches the AI to generate modern Vue components with the Composition API.

vue-best-practices (3.1K installs) — Focuses on <script setup> syntax, composables for shared logic, reactive refs and computed properties, and proper Pinia usage for state management.

nuxt (2.5K installs) — Nuxt 4+ patterns including server routes, file-based routing, and auto-imports.

vite (3.5K installs) — Vite build tool configuration, plugin API, SSR setup, and performance tuning.

vitest (3.2K installs) — Modern TypeScript testing with Vitest, covering test patterns, mocking, and coverage.

Tip

Copy-paste prompt for Vue modernization:

“Scan all .vue files in src/. Identify any that use the Options API or Vuex. For each one, show me a refactored version using <script setup>, the Composition API, and Pinia, following the patterns from my installed Vue skills.”

Angular Skills

Angular Skills Collection (7.1K installs)

Maintained by the Analog team, this collection covers modern Angular v20+ patterns with a focus on the signal-based reactivity model.

npx skills add analogjs/angular-skills

angular-signals (879 installs) — Signal-based reactive state management in Angular v20+. Teaches the AI to use signals instead of RxJS for component state.

angular-component (847 installs) — Standalone components with v20+ patterns. No more NgModules — the AI generates modern standalone components by default.

angular-forms (764 installs) — Signal Forms and Reactive Forms. Covers the new signal-based form handling alongside traditional reactive forms.

angular-testing (611 installs) — Unit and integration tests with Vitest or Jasmine. Teaches the AI proper Angular testing patterns.

Svelte Skills

Svelte Code Writer (412 installs)

From the official sveltejs/mcp collection, this skill gives the AI access to Svelte 5 documentation and code analysis capabilities.

npx skills add sveltejs/mcp

What it teaches:

• Svelte 5 runes and reactivity model
• SvelteKit file conventions and routing
• Current Svelte documentation and patterns
• Code analysis for Svelte components

React Native and Mobile Skills

Expo Skills Collection (45.5K installs)

The largest mobile-focused skills collection. Covers everything from UI development to deployment.

npx skills add expo/skills

building-native-ui (8.3K installs) — Expo Router styling, components, navigation patterns, and animations. The core skill for building mobile interfaces.

expo-tailwind-setup (4.7K installs) — Tailwind CSS v4 with NativeWind v5. Teaches the AI to use utility-first styling in React Native.

expo-deployment (4.7K installs) — Deploy to App Store, Play Store, and web. Covers EAS Build, submission, and OTA updates.

Vercel React Native Skills (21K installs)

Part of the vercel-labs/agent-skills collection. Covers React Native and Expo best practices from the Vercel perspective.

Callstack React Native Best Practices (4.4K installs)

From the callstackincubator/agent-skills collection (5.2K total), this performance-focused skill teaches the AI to optimize React Native apps for real-world performance.

npx skills add callstackincubator/agent-skills

What it teaches:

• FPS optimization and jank elimination
• Time to Interactive (TTI) improvement
• Bundle size reduction strategies
• Native module performance tuning

Web Quality Skills

Addy Osmani’s Web Quality Skills (3.4K installs)

A collection from Google’s Addy Osmani covering the three pillars of web quality: accessibility, performance, and Core Web Vitals.

npx skills add addyosmani/web-quality-skills

accessibility (569 installs) — WCAG 2.1 accessibility auditing. Teaches the AI to generate accessible markup by default: proper ARIA attributes, semantic HTML, keyboard navigation, and screen reader considerations.

core-web-vitals (497 installs) — LCP, INP, and CLS optimization. Teaches the AI to consider Core Web Vitals impact when generating components.

performance (758 installs) — General web performance optimization: lazy loading, code splitting, image optimization, and bundle size awareness.

Tip

Copy-paste prompt for accessibility audit:

“Run an accessibility audit on the components in src/components/. For each component, check for: missing ARIA attributes, non-semantic HTML elements that should be replaced, keyboard navigation gaps, and color contrast issues. Use the patterns from my installed accessibility skill.”

How Many Frontend Skills Should You Install?

Start with 2-3. A framework skill (vercel-labs/agent-skills for React or antfu/skills for Vue) plus a quality skill (addyosmani/web-quality-skills) covers 80% of frontend work. Add more only when you consistently hit gaps.

Watch for overlap. The vercel-labs/agent-skills collection and the vercel-labs/next-skills collection both cover React patterns. If you install both, the Next.js-specific skills should take precedence in Next.js projects. If you notice contradictions, keep only the Next.js skills for Next.js projects.

Combine with MCP for maximum impact. Frontend skills tell the AI how to write code. Pair them with Context7 MCP for live documentation and Playwright MCP for visual verification.

Tip

Copy-paste prompt for frontend skill audit:

“List all installed skills related to frontend development. Identify any overlap between them. Suggest the minimal set of skills I need for my stack (check my package.json to determine the stack).”

When This Breaks

AI generates correct patterns but for the wrong framework version. The skill may be pinned to an older version. Run npx skills update to get the latest instructions. For Next.js specifically, the next-upgrade skill can help with version migration.

Skill patterns conflict with project conventions. Your project-specific skill should override framework skills. Make your project conventions explicit and specific in your CLAUDE.md or .cursorrules file.

Too many frontend skills fill the context window. If you have React, Next.js, Vue, accessibility, and performance skills all loaded, that is a lot of instructions competing for context. Prioritize the ones most relevant to your current task. A React project does not need the Vue or Angular skills active.

Mobile and web skills collide. If you work on both a React web app and a React Native app, the vercel-labs/agent-skills and expo/skills collections may give conflicting advice. Use project-level skill configuration to activate only the relevant set per project.

What’s Next

Best Backend Skills Skills for Node.js, Python, Go, and backend workflows.

Skills Best Practices Optimize your skill setup for maximum impact.