Best Best AI Agent Skills for React Development

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

Comprehensive best practices for React Native and Expo applications covering performance, animations, UI patterns, and platform-specific optimizations.

Vue 3 best practices, common gotchas, and performance optimization.

Guide for upgrading Expo SDK and dependencies, including steps for migration and handling breaking changes.

Use this skill for ALL networking work including API requests, data fetching, caching, or network debugging.

This guide covers setting up Tailwind CSS v4 in Expo using react-native-css and NativeWind v5 for universal styling across iOS, Android, and Web.

A tool to build powerful frontend claude.ai artifacts using React and TypeScript.

Build system for JavaScript/TypeScript monorepos. Turborepo caches task outputs and runs tasks in parallel based on dependency graph.

Expert guide for building accessible, customizable UI components with shadcn/ui, Radix UI, and Tailwind CSS.

Vite is a next-generation frontend build tool with fast dev server (native ESM + HMR) and optimized production builds.

This skill is a decision-and-implementation guide for VueUse composables in Vue.js / Nuxt projects. It maps requirements to the most suitable VueUse function, applies the correct usage pattern, and prefers composable-based solutions over bespoke code to keep implementations concise, maintainable, and performant.

A frontend skill focused on transforming designs into clean React components using a modular approach and automated tools for code quality.

Pinia is the official state management library for Vue, designed to be intuitive and type-safe. It supports both Options API and Composition API styles, with first-class TypeScript support and devtools integration.

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.

This skill enables retrieval of current documentation for software libraries and components by querying the Context7 API via curl. Use it instead of relying on potentially outdated training data.

The Frontend Code Review skill helps users inspect and review frontend code, specifically targeting `.tsx`, `.ts`, and `.js` files. It offers two modes for code review: pending-change review and file-targeted review, utilizing a checklist to flag violations and suggest improvements.

Comprehensive guide for mastering modern JavaScript (ES6+) features, functional programming patterns, and best practices for writing clean, maintainable, and performant code.

Build reusable, maintainable UI components using modern frameworks with clean composition patterns and styling approaches.

Tailwind v4 + shadcn/ui Production Stack is a production-tested setup for using Tailwind CSS version 4.1.18 with custom utility-first CSS classes. It provides detailed setup instructions, dark mode setup, and common errors with solutions, aimed at enhancing the development of user interfaces with a focus on responsive and theme-aware applications.

Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.

Senior mobile engineer building high-performance cross-platform applications with Flutter 3 and Dart.

Vue.js Development Guides focused on best practices for component design, reactivity, data flow, and state management in Vue.js applications.

Pinia best practices, common gotchas, and state management patterns.

Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.

This skill creates adaptable composables that handle both reactive and non-reactive inputs in Vue.js applications. By using this skill, developers can improve code reusability and flexibility, reducing the risk of errors associated with input reactivity.

Handles declarative animations and gesture-based interactions within Vue 3 and Nuxt projects. Developers benefit from streamlined coding for rich animations, enhancing the user experience without heavy performance costs.

Implements modern frontend development patterns specifically for React and Next.js applications. Using these patterns enhances code maintainability and performance, streamlining the development process.

Handles the creation and management of custom shaders in Three.js, enabling developers to define complex visual effects through GLSL code. By installing this skill, developers can enhance the visual fidelity of their 3D applications while gaining full control over rendering techniques and effects.

Establishes a framework for consistent coding practices and principles applicable across various programming projects. Developers gain improved code maintainability and readability, leading to faster onboarding of team members and reduced bug rates through adherence to best practices.

Facilitates the efficient construction of React 19 applications utilizing concurrent features and advanced design patterns. Developers benefit from streamlined component architecture, optimizing state management and performance, ultimately enhancing application functionality.

Defines a variety of geometries in Three.js for creating 3D models, including shapes like boxes, spheres, and custom paths. Developers benefit by quickly generating complex 3D structures without needing extensive mathematics or geometry knowledge.

Handles post-processing effects in Three.js projects, allowing developers to apply visual enhancements like bloom, anti-aliasing, and depth of field. By installing this skill, developers can elevate the visual quality of their web applications, providing an engaging experience without intricate manual configurations.

Facilitates the transition of React JSX code to Vue while addressing potential attribute type errors. This skill enhances development efficiency by promoting best practices, resulting in cleaner, more maintainable code.

Enforces strict architectural and performance standards for building scalable React applications using TypeScript and Suspense-first data fetching. This skill helps developers produce maintainable code by providing clear guidelines and checklists, ultimately reducing technical debt and development time.

Provides guidelines for effectively using effects in React to manage side effects and external dependencies. Helps developers maintain cleaner code and reduce bugs by promoting best practices over common pitfalls in component logic.

Handles state management in React applications using a simple API. By installing it, developers can enhance their application's performance and maintainability through efficient state handling and reduced boilerplate code.

Manages state reactively within Angular applications through the use of signals, enabling fine-grained control over state changes. By using Angular Signals, developers can streamline their state management processes, enhancing performance and reducing the potential for bugs in their applications.

Automates the generation of frontend components, bundle analysis, and project scaffolding. This skill enhances development efficiency by streamlining repetitive tasks and ensuring adherence to best practices.

Builds and bundles frontend artifacts for Claude AI using a structured workflow. Developers benefit from a streamlined process that automates the creation of self-contained HTML files, reducing manual setup and errors.

Handles form validation with Zod integrated into React Hook Form for robust data management. Developers save time and maintain type safety by minimizing boilerplate code and reducing runtime errors during form submissions.

Facilitates asynchronous data fetching in Angular applications through signal-based mechanisms like `httpResource()`, enabling easier state management. By utilizing this skill, developers gain improved data handling capabilities, reducing boilerplate code and minimizing loading states and errors in their applications.

Implements best practices for rendering loading states in React applications, ensuring that loading indicators only display when no data is available. This skill enhances user experience by minimizing unnecessary UI disruptions and improving perceived performance during data fetching.

Handles dependency injection configuration and usage in Angular applications. Enables developers to efficiently manage their service dependencies, resulting in cleaner code and enhanced maintainability.

Facilitates the creation of custom directives for improved DOM manipulation and behavior in Angular projects. This results in reusable and consistent components, enhancing code organization and maintainability.

Implements robust authentication workflows by providing OAuth and email/password sign-in capabilities. Developers benefit by streamlining user authentication processes, enhancing security features like two-factor authentication, and reducing the time spent on custom authentication logic.

Facilitates the integration of 3D models and animations into web projects using frameworks like Three.js and React. By installing this skill, developers can enhance user engagement with interactive 3D experiences while ensuring optimal performance and usability.

Refactors SwiftUI views to enforce a reliable structure and dependency pattern based on MV principles. By streamlining view composition and reducing complexity, developers can avoid common pitfalls and improve maintainability in their SwiftUI applications.

Handles type-safe, file-based routing for React single-page applications (SPAs) with built-in data loading and integration with TanStack Query. By installing this skill, developers benefit from streamlined navigation and data management, significantly reducing potential errors and accelerating development.