Frontend Development Skills

Skills for building user interfaces, components, and client-side applications. From React hooks to Next.js patterns, these skills help Claude Code assist with modern frontend development.

214 skills

vercel-react-best-practices

vercel-labs/agent-skills

235.8k

23.5k

This is Vercel's internal performance playbook turned into actionable code guidance. It runs 69 specific checks across React and Next.js codebases, catching things like barrel import performance hits, async waterfall patterns, and unnecessary re-renders. The rules are prioritized by actual impact, so it tackles bundle size killers and server-side bottlenecks before micro-optimizations. Each rule includes before/after code examples showing exactly what to fix. If you're shipping React apps at scale or just want to stop guessing about performance patterns, this codifies what the Vercel team actually follows internally.

frontend-design

anthropics/skills

186.4k

99.3k

When you need to build web interfaces that don't look like every other AI-generated site, this skill pushes Claude to make bold aesthetic choices and implement them with precision. It guides creation of production-ready HTML/CSS/JS or React components with distinctive typography, creative layouts, and thoughtful animations. Instead of defaulting to Inter fonts and purple gradients, it forces commitment to a specific design direction, whether that's brutalist minimalism or maximalist chaos. The code output includes working implementations with CSS variables, animation delays, and contextual visual effects that actually match the chosen aesthetic rather than falling back on generic patterns.

ui-ux-pro-max

nextlevelbuilder/ui-ux-pro-max-skill

75.4k

47.4k

This is essentially a design system and UI audit tool rolled into one skill. It runs accessibility checks (contrast ratios, focus states, ARIA labels), validates touch targets and spacing, and suggests specific color palettes and font pairings from its database of 161 palettes and 57 combinations. The real value is in the priority-based rule system that catches common UX problems like missing loading states, poor responsive breakpoints, and platform-specific interaction patterns. It covers 10 tech stacks so you get relevant code whether you're building in React, SwiftUI, or Flutter. Use it when designing new interfaces or when your UI feels off but you can't pinpoint why.

ideabrowser.com

Find trending startup ideas with real demand. Launch with a team of AI agents.

startupsai agentsideas

Get trending startup ideas →

Sponsored

vercel-react-native-skills

vercel-labs/agent-skills

67k

23.5k

Vercel's React Native skill covers performance optimization and mobile app best practices across eight categories, from critical list virtualization to configuration details. It's built around specific rules like using FlashList for large lists, animating only transform and opacity properties, and keeping native dependencies in your app package for monorepos. Each rule includes code examples showing wrong and right approaches. This is most useful when you're building production React Native apps and need someone to catch performance pitfalls before they become problems. The rule priorities are well thought out, focusing on what actually impacts user experience.

tailwind-design-system

wshobson/agents

22.8k

31.9k

react%3Acomponents

google-labs-code/stitch-skills

20.5k

2.9k

The react:components skill converts Stitch design files into modular, type-safe React components for Vite projects by fetching design metadata, validating component structure through AST analysis, and organizing code into separate files for components, hooks, and mock data. It serves frontend engineers and design-to-code teams who need to transform design system outputs into production-ready React code while maintaining architectural consistency and type safety. The skill solves the manual labor of translating visual designs into clean, modular component code with proper separation of concerns and Tailwind styling integration.

expo-tailwind-setup

expo/skills

12.7k

1.5k

The expo-tailwind-setup skill guides developers through configuring Tailwind CSS v4 in Expo projects using react-native-css and NativeWind v5 to enable universal styling across iOS, Android, and Web platforms. It provides step-by-step instructions for installing dependencies, configuring Metro and PostCSS, and creating CSS component wrappers, solving the problem of applying consistent utility-first styling in cross-platform React Native applications. This skill is designed for Expo developers who want to leverage Tailwind CSS's modern features without requiring Babel configuration.

vue-best-practices

hyf0/vue-skills

12.4k

Vue-best-practices provides a standardized workflow and instruction set for Vue 3 development, emphasizing Composition API with `<script setup>` and TypeScript as the default approach while supporting Options API and JSX when explicitly required by projects. It covers core principles like predictable state management, explicit data flow, component-focused design, and includes required references on reactivity, single-file components, data flow, and composables that developers must apply to every Vue task. The skill is designed for developers working with Vue, .vue files, Vue Router, Pinia, or Vite to ensure consistent, maintainable code architecture from the start.

widgets-ui

inferen-sh/skills

12.2k

173

next-cache-components

vercel-labs/next-skills

11.5k

748

The next-cache-components skill enables developers to implement Partial Prerendering (PPR) in Next.js 16+ applications by mixing static, cached, and dynamic content within single routes using the `use cache` directive and related caching APIs. It's designed for Next.js developers who need granular control over which content is prerendered at build time, cached for performance, or dynamically rendered per request. The skill solves the problem of efficiently balancing performance and freshness by allowing developers to declaratively specify cache lifetimes, invalidation strategies, and content types without manual complexity.

vue

antfu/skills

11.4k

4.2k

The Vue skill provides Claude with knowledge of Vue 3 Composition API, script setup syntax, reactivity patterns, and built-in components for developers writing Single File Components with TypeScript. It serves Vue developers who need assistance with modern Vue 3 patterns, including reactive state management, lifecycle hooks, and component communication through props, emits, and two-way models. The skill solves the problem of providing accurate, up-to-date guidance on Vue 3.5 best practices while enforcing consistency around TypeScript usage and Composition API conventions.

swiftui-expert-skill

avdlee/swiftui-agent-skill

11.1k

2.3k

The swiftui-expert-skill enables developers to write, review, and improve SwiftUI code by providing guidance on state management, view composition, performance optimization, and adoption of modern APIs including iOS 26+ Liquid Glass features. It serves Swift developers building new SwiftUI features or refactoring existing code who need to follow Apple's best practices while avoiding deprecated APIs and ensuring optimal performance. The skill solves the problem of navigating SwiftUI's evolving API surface and architectural patterns by offering specific, opinionated guidance backed by reference documentation on topics like animation, accessibility, list patterns, and version-specific feature gating.

baoyu-markdown-to-html

jimliu/baoyu-skills

10.9k

9.9k

The baoyu-markdown-to-html skill converts Markdown files into styled HTML with inline CSS, featuring support for code syntax highlighting, mathematical notation, PlantUML diagrams, footnotes, alerts, and infographics while optimizing output for WeChat Official Accounts and other platforms. It serves developers and content creators who need to transform Markdown documents into publication-ready HTML with theme customization options and the ability to convert external links into bottom-aligned citations. This skill solves the problem of manually formatting Markdown for platform-specific HTML requirements and styling constraints.

vue-debug-guides

hyf0/vue-skills

9.5k

vue-debug-guides provides comprehensive guidance for diagnosing and fixing Vue 3 runtime issues, including reactivity problems, computed property bugs, watcher failures, async data race conditions, and hydration errors. It serves Vue developers who need to resolve specific bugs during development by mapping symptoms to detailed reference guides covering root causes and solutions. The skill solves the problem of quickly identifying why Vue applications behave unexpectedly by categorizing common debugging scenarios across reactivity, computed properties, watchers, and other Vue subsystems.

nextjs-app-router-patterns

wshobson/agents

9.5k

31.9k

The nextjs-app-router-patterns skill provides comprehensive guidance on building applications with Next.js 14+ App Router, covering Server Components, rendering modes, parallel routes, and modern full-stack React patterns. It's designed for developers building new Next.js applications, migrating from the Pages Router, or implementing advanced features like streaming and Server Actions. The skill solves the problem of understanding and correctly implementing Next.js's modern architecture by documenting file conventions, rendering strategies, and practical code patterns for optimized full-stack development.

use-dom

expo/skills

8.8k

1.5k

The `use-dom` skill enables developers to run web code in webviews on native platforms and as-is on web by using the `'use dom'` directive, allowing web-only libraries like recharts and React components to work in Expo apps without modification. It solves the problem of integrating web-dependent libraries and migrating existing React web code to native apps incrementally. This skill is for developers building cross-platform Expo applications who need to leverage web-specific libraries or complex HTML/CSS layouts not available in React Native.

vueuse-functions

antfu/skills

8.4k

4.2k

The vueuse-functions skill guides Vue.js and Nuxt developers to apply VueUse composables when building features, mapping requirements to appropriate functions and following their invocation patterns to keep implementations concise and maintainable. It solves the problem of deciding whether to use existing VueUse composables or write custom code by establishing a decision framework that prioritizes composable-based solutions for improved readability, maintainability, and performance. The skill is designed for developers working in Vue 3+ or Nuxt 3+ projects who need systematic guidance on leveraging the VueUse library.

nuxt

antfu/skills

8.1k

4.2k

The Nuxt skill enables developers to build full-stack Vue applications with server-side rendering, file-based routing, auto-imports, and universal deployment capabilities across Node.js, serverless, and edge platforms. It serves developers working with Nuxt 3.x projects who need guidance on core features like data fetching with useFetch, server routes with Nitro, state management, and hybrid rendering modes. The skill solves the problem of quickly accessing Nuxt-specific patterns and conventions for building performant, SSR-capable applications while leveraging Vue's component ecosystem.

react-native-best-practices

callstackincubator/agent-skills

The react-native-best-practices skill provides React Native developers with performance optimization guidelines covering JavaScript, native code, and bundling across FPS, time-to-interactive, bundle size, memory leaks, and animation issues. It applies to tasks involving Hermes optimization, JS thread blocking, native modules, and debugging frame drops or jank. The skill solves performance problems by offering quick patterns, commands, and configurations with impact ratings, organized by priority from critical rendering issues to medium-priority animations.

markdown-to-html

github/awesome-copilot

7.6k

26.4k

The markdown-to-html skill converts Markdown documents to HTML using tools like marked.js, pandoc, or custom scripts, supporting single files, batch conversions, and advanced configurations across GFM, CommonMark, and standard Markdown flavors. It serves developers and technical writers who need to transform .md files into HTML output for documentation, static site generators, templating systems like Jekyll and Hugo, or web preview purposes. This skill solves the problem of programmatically rendering Markdown content as structured HTML for web publishing and template-based workflows.

fluentui-blazor

github/awesome-copilot

7.3k

26.4k

The fluentui-blazor skill guides developers building Blazor applications on how to correctly implement the Microsoft Fluent UI component library, covering setup, component usage, service registration, icon handling, and troubleshooting. It addresses common integration problems such as missing providers causing silent failures, incorrect service lifetime configuration, and improper icon binding by providing specific rules and code examples. This skill is essential for developers unfamiliar with Fluent UI's mandatory provider patterns and Blazor-specific requirements.

DeFi MCP

Connect your Claude agent to onchain data via 1inch: prices, trade routes and wallet activity.

defimcpcrypto

Install now

FAQ

What are Claude Code frontend skills?

Claude Code frontend skills are reusable instructions that teach Claude how to work with frontend frameworks like React, Next.js, and Angular. They help Claude write components, manage state, and follow framework best practices.

How do I install a frontend skill for Claude Code?

Run the install command shown on each skill card, e.g. `claude skill add owner/repo:skill-name`. The skill is instantly available in your Claude Code sessions.

Which frontend frameworks are supported?

You'll find skills for React, Next.js, Angular, Vue, Svelte, Astro, Tailwind CSS, and more. The community adds new framework skills regularly.

Related categories

Testing & QA159 Code Review & Quality191 Backend & APIs279