⚛️ React Frontend Skills

A robust, agent-ready skills collection for the modern React ecosystem — by Pythoughts

Quick Start • Per-Agent Install • Skills • Why? • Contributing

---

🎯 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.

Or install from npm

Published as @pythoughts/react-frontend-skills. Add it as a project dependency, then sync into your agent:

npm install @pythoughts/react-frontend-skills
npx skills experimental_sync

experimental_sync reads the package from node_modules and installs all 18 skills into your detected agent.

---

🤖 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

Pythinker & any other AGENTS.md-aware agent (manual)

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.

Full list of 60+ supported agents

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.

---

Find this useful? ⭐ Star the repo.

Built and maintained by Pythoughts — @Pythoughts-labs