🎯 What is this?

React Frontend Skills is a curated collection of 18 production-grade AI agent skills for the React ecosystem. Drop them into your AI coding assistant and it instantly applies battle-tested best practices for performance, UI, testing, data, and architecture.

Each skill is a portable folder (SKILL.md + AGENTS.md + references/) that follows the open agent-skills convention, so it works across every major AI coding agent — no lock-in.

• ⚡ Performance — React 19, Next.js 16, concurrent rendering
• 🎨 UI — Tailwind CSS v4, shadcn/ui, responsive & accessible design
• 🧪 Testing — Vitest, Playwright, TDD, MSW
• 📦 Data — TanStack Query, Zod, React Hook Form, nuqs
• 🏗️ Architecture — feature-based organization, composition patterns

🚀 Quick Start

Install everything with one command — it auto-detects the AI agents installed on your machine:

npx skills add Pythoughts-labs/react-frontend-skills --all

Pick specific skills instead:

npx skills add Pythoughts-labs/react-frontend-skills -s react,nextjs,tailwind

Install at the user level (global) so every project sees them:

npx skills add Pythoughts-labs/react-frontend-skills --all -g

Powered by the open-source skills CLI. No account, no config — skills are symlinked into your agent's directory and activate automatically when relevant.

🤖 Install Per-Agent

Target a single agent with -a <agent> (use -s '*' for all skills, -g for a global install):

| Agent | Command | | ----- | ------- | | Claude Code | npx skills add Pythoughts-labs/react-frontend-skills -a claude-code -s '*' -y | | Codex | npx skills add Pythoughts-labs/react-frontend-skills -a codex -s '*' -y | | Cursor | npx skills add Pythoughts-labs/react-frontend-skills -a cursor -s '*' -y | | OpenCode | npx skills add Pythoughts-labs/react-frontend-skills -a opencode -s '*' -y | | Pi | npx skills add Pythoughts-labs/react-frontend-skills -a pi -s '*' -y | | Kiro CLI | npx skills add Pythoughts-labs/react-frontend-skills -a kiro-cli -s '*' -y |

Every skill ships a standard AGENTS.md, so any agent that reads agent instructions can consume them directly — no CLI required:

# Clone once
git clone https://github.com/Pythoughts-labs/react-frontend-skills.git

# Point your agent at the skills directory, or copy what you need
cp -r react-frontend-skills/skills/react   ./.agent/skills/
cp -r react-frontend-skills/skills/nextjs  ./.agent/skills/

Then reference a skill from your agent context, e.g. @skills/react/AGENTS.md. This is the path for Pythinker and any custom in-house agent.

The skills CLI supports Claude Code, Codex, Cursor, OpenCode, Pi, Kiro CLI, GitHub Copilot, Gemini CLI, Windsurf, Cline, Roo, Goose, Kilo, Droid, Antigravity, Trae, Warp, Zed, Continue, Qwen Code, and many more. Run npx skills add Pythoughts-labs/react-frontend-skills with no agent flag to auto-detect yours.

📚 Skills Included

Core Framework

| Skill | Rules | Description | | ----- | ----- | ----------- | | ⚛️ react | 40+ | React 19 concurrent rendering, Server Components, hooks optimization | | 🔺 nextjs | 40+ | Next.js 16 App Router, caching, server components, routing | | 📘 typescript | 42+ | Type system optimization, compiler config, async patterns |

UI & Styling

| Skill | Rules | Description | | ----- | ----- | ----------- | | 🎨 tailwind | 42+ | Tailwind CSS v4 optimization, utility patterns, theming | | 🧩 shadcn | 42+ | shadcn/ui components, Radix primitives, accessibility | | 🎭 ui-design | 42+ | UI/UX best practices, accessibility, responsive design | | 🌐 web-design-guidelines | 100+ | Comprehensive web design principles |

Data & State

| Skill | Rules | Description | | ----- | ----- | ----------- | | 🔄 tanstack-query | 40+ | Data fetching, caching, mutations, optimistic updates | | 📝 react-hook-form | 41+ | Form validation, performance, field arrays | | ✅ zod | 43+ | Schema validation, type inference, error handling | | 🔗 nuqs | 42+ | Type-safe URL query state for Next.js |

Testing

| Skill | Rules | Description | | ----- | ----- | ----------- | | 🧪 vitest | 44+ | Testing patterns, mocking, async testing | | 🎭 playwright | 43+ | E2E testing, selectors, authentication, CI | | 🔌 msw | 45+ | API mocking with Mock Service Worker | | 🔴 tdd | 42+ | Test-Driven Development methodology |

Architecture & Best Practices

| Skill | Rules | Description | | ----- | ----- | ----------- | | 🏛️ feature-arch | 42+ | Feature-based architecture, module organization | | 🧱 vercel-composition-patterns | — | React composition patterns | | ⚡ vercel-react-best-practices | 57+ | React performance optimization |

💡 Why

Expert-level, source-grounded

Every skill is built from official documentation, production-tested patterns, and real-world performance work — not generic advice.

Prioritized by impact

| Priority | Impact | Description | | -------- | ------ | ----------- | | 🔴 CRITICAL | Major | Performance issues, build failures | | 🟠 HIGH | Significant | Notable improvements | | 🟡 MEDIUM | Important | Best practices | | 🟢 LOW | Minor | Edge cases, optimizations |

Actionable, every rule

Each rule includes DO (correct pattern + code), DON'T (anti-pattern), WHY (reasoning), and HOW (implementation).

📁 Project Structure

react-frontend-skills/
├── skills/
│   ├── react/                # React 19 patterns
│   ├── nextjs/               # Next.js 16 App Router
│   ├── typescript/           # TypeScript optimization
│   ├── tailwind/             # Tailwind CSS v4
│   ├── shadcn/               # shadcn/ui components
│   ├── tanstack-query/       # Data fetching & caching
│   ├── react-hook-form/      # Form handling
│   ├── zod/                  # Schema validation
│   ├── nuqs/                 # URL state management
│   ├── vitest/               # Unit testing
│   ├── playwright/           # E2E testing
│   ├── msw/                  # API mocking
│   ├── tdd/                  # TDD methodology
│   ├── feature-arch/         # Feature architecture
│   ├── ui-design/            # UI/UX best practices
│   ├── vercel-composition-patterns/
│   ├── vercel-react-best-practices/
│   └── web-design-guidelines/
├── README.md
├── LICENSE
└── CHANGELOG.md

Each skill folder contains:

skills/<name>/
├── SKILL.md       # Frontmatter + quick reference (what the agent loads)
├── AGENTS.md      # Full agent-facing guide
└── references/    # Detailed rule files

🔧 Usage

Once installed, skills activate automatically when your agent detects a relevant task:

// "Create a Next.js page with data fetching"  → nextjs, react, tanstack-query
// "Build a form with validation"              → react-hook-form, zod, shadcn
// "Write tests for this component"            → vitest, tdd, msw

Or reference the guidelines directly:

cat skills/react/SKILL.md
cat skills/nextjs/references/cache-use-cache-directive.md

🤝 Contributing

Contributions are welcome.

1. Fork the repo
2. Add a skill folder under skills/your-skill/ with SKILL.md, AGENTS.md, and references/
3. Open a Pull Request

Improving an existing skill (new rules, fixes, version updates) is just as valuable — open a PR.

📄 License

MIT © 2026 Mohamed Elkholy — see LICENSE.