react
This AI agent skill guides the generation of modern React components, incorporating best practices such as destructured props, leveraging compiler optimizations, and proper use of React Effects. It also ensures compatibility and utilizes Tailwind CSS v4 syntax.
About this skill
The `react` skill provides an AI agent with a sophisticated set of instructions for crafting high-quality React code. It focuses on contemporary React patterns, starting with the clean and efficient use of destructured props for functional components. A key aspect is its emphasis on compiler optimizations, guiding the AI to write code that can be more effectively processed by React's internal mechanisms, leading to improved performance. Furthermore, this skill ensures the correct application of React's Effect Hook, vital for managing side effects like data fetching, subscriptions, or manual DOM manipulations in a controlled and idiomatic manner. It also incorporates the latest Tailwind CSS v4 syntax, allowing the AI to generate modern, utility-first styled components seamlessly. This ensures that any React code produced will be performant, maintainable, and visually consistent with a modern design system. Developers or teams aiming for a consistent, optimized, and modern React codebase will find this skill invaluable. It automates the adherence to a specific set of high-standards, reducing the need for manual code reviews related to common React patterns and styling, and accelerating development while maintaining quality. It's designed to be an 'always-on' directive when working with React, ensuring every generated component meets these criteria.
Best use case
This skill is primarily for frontend developers and teams using React who wish to enforce modern coding standards and best practices consistently across their projects. It's ideal for generating new components, refactoring existing code, or ensuring all React output adheres to a specific, optimized pattern including up-to-date Tailwind v4 styling. Users benefit by getting more robust, performant, and maintainable React code directly from their AI agent.
This AI agent skill guides the generation of modern React components, incorporating best practices such as destructured props, leveraging compiler optimizations, and proper use of React Effects. It also ensures compatibility and utilizes Tailwind CSS v4 syntax.
Clean, optimized, and modern React code written according to specified patterns, leveraging compiler optimizations, Effects, and Tailwind v4 syntax, reducing boilerplate and improving consistency.
Practical example
Example input
Generate a React functional component for a responsive product card. It should display the product image, name, price, and a 'Add to Cart' button. Use destructured props for product data and Tailwind v4 for all styling.
Example output
```jsx
import React from 'react';
const ProductCard = ({ product: { imageUrl, name, price } }) => {
return (
<div className="card-container p-4 bg-surface-1 rounded-lg shadow-md flex flex-col items-center text-center">
<img src={imageUrl} alt={name} className="w-full h-48 object-cover rounded-t-lg" />
<div className="p-4 flex flex-col items-center gap-2">
<h3 className="text-h3 font-semibold text-color-high">{name}</h3>
<p className="text-body text-color-medium">${price.toFixed(2)}</p>
<button className="btn-primary px-4 py-2 rounded-md bg-accent text-white hover:bg-accent-dark">Add to Cart</button>
</div>
</div>
);
};
export default ProductCard;
```When to use this skill
- When generating new React functional components or pages.
- When refactoring existing React code to align with modern best practices.
- When implementing UI components with Tailwind CSS v4 styling.
- When ensuring consistent application of React Effect Hooks and compiler optimizations.
When not to use this skill
- When working on non-React projects or other JavaScript frameworks.
- When a project specifically requires older React patterns or an incompatible version of Tailwind CSS.
- For tasks not involving code generation, modification, or styling within a React context.
- If strict adherence to legacy React class components is necessary.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/react/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How react Compares
| Feature / Agent | react | Standard Approach |
|---|---|---|
| Platform Support | Claude | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
This AI agent skill guides the generation of modern React components, incorporating best practices such as destructured props, leveraging compiler optimizations, and proper use of React Effects. It also ensures compatibility and utilizes Tailwind CSS v4 syntax.
Which AI agents support this skill?
This skill is designed for Claude.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
@.claude/skills/react/react.mdc
Related Skills
nextjs
Provides comprehensive Next.js routing capabilities, including typed routes, helpers for `PageProps` and `LayoutProps`, and `nuqs` for managing URL state.
react
This skill provides comprehensive knowledge of React 19, including hooks, server components, concurrent features, and React DOM APIs. It guides AI agents on modern React architecture, patterns, and best practices for building robust applications.
laravel-expert
Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and modern standards (Laravel 10/11+).
webmcp
This skill guides AI agents in implementing WebMCP within web projects, enabling browser-native structured tools for AI interaction using JavaScript or HTML APIs.
Prompt Coach
Analyze your Claude Code session logs to improve prompt quality, optimize tool usage, and enhance your skills as an AI-native engineer.
just
Use `just` to save and run project-specific commands. Use when the user mentions `justfile`, `recipe`, or needs a simple alternative to `make` for task automation.
chrome-debug
This skill empowers AI agents to debug web applications and inspect browser behavior using the Chrome DevTools Protocol (CDP), offering both collaborative (headful) and automated (headless) modes.
worktree-manager
Create, manage, and cleanup git worktrees with Claude Code agents across all projects. USE THIS SKILL when user says "create worktree", "spin up worktrees", "new worktree for X", "worktree status", "cleanup worktrees", "sync worktrees", or wants parallel development branches. Also use when creating PRs from a worktree branch (to update registry with PR number). Handles worktree creation, dependency installation, validation, agent launching in Ghostty, and global registry management.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
osgrep
Semantic code search using natural language queries. Use when users ask "where is X implemented", "how does Y work", "find the logic for Z", or need to locate code by concept rather than exact text. Returns file paths with line numbers and code snippets.
10up-css
CSS architecture, best practices, and patterns for WordPress projects. Covers ITCSS methodology, accessibility, specificity management, naming conventions, and modern CSS features.
agentifind
This skill sets up codebase intelligence for AI agents by running the `agentifind` CLI to extract code structure and synthesize a `CODEBASE.md` navigation guide. It includes staleness detection and intelligently handles LSP installation for optimal accuracy.