Updated 2d ago
by PyModel
react-frontend-skills
Production-grade AI agent skills for React 19, Next.js 16, TypeScript 7, testing, data, UI, and frontend architecture—ready for Codex, Claude Code, Cursor, Pi, and more.
36 GitHub stars (36)
+9 in 16 days
| Period | New stars |
|---|---|
| Oct 1 | 0 |
| Oct 2 | 0 |
| Oct 3 | 0 |
| Oct 4 | 0 |
| Oct 5 | 0 |
| Oct 6 | +1 |
| Oct 7 | +6 |
| Oct 8 | 0 |
| Oct 9 | 0 |
| Oct 10 | 0 |
| Oct 11 | 0 |
| Oct 12 | +1 |
| Oct 13 | 0 |
| Oct 14 | 0 |
| Oct 15 | 0 |
| Oct 16 | +1 |
- 18 skills (18 skills found in its SKILL.md files)
- 5 forks (5 forks)
- 2d ago last update (Last updated 2d ago)
Install
Skills CLI
npx skills add PyModel/react-frontend-skills
Asks which skills and agents to install. Just one: npx skills add PyModel/react-frontend-skills --skill feature-arch — add -g for every project.
Claude Code
git clone https://github.com/PyModel/react-frontend-skillscp -r "react-frontend-skills/skills/feature-arch" ~/.claude/skills/
Copies the feature-arch skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add PyModel/react-frontend-skills
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
feature-arch
Feature-based React folder structure and module boundaries.
skills/feature-arch/SKILL.md on GitHub (opens in a new tab) -
msw
MSW 2 API mocking for tests.
skills/msw/SKILL.md on GitHub (opens in a new tab) -
nextjs
Next.js 16 App Router caching and routing.
skills/nextjs/SKILL.md on GitHub (opens in a new tab) -
nuqs
nuqs type-safe URL search-param state.
skills/nuqs/SKILL.md on GitHub (opens in a new tab) -
playwright
Playwright end-to-end tests and flaky-test fixes.
skills/playwright/SKILL.md on GitHub (opens in a new tab) -
react-hook-form
React Hook Form 7 forms and validation.
skills/react-hook-form/SKILL.md on GitHub (opens in a new tab) -
react
React 19 components and hooks.
skills/react/SKILL.md on GitHub (opens in a new tab) -
shadcn
shadcn/ui components on Radix or Base UI.
skills/shadcn/SKILL.md on GitHub (opens in a new tab) -
tailwind
Tailwind CSS v4 styling and configuration.
skills/tailwind/SKILL.md on GitHub (opens in a new tab) -
tanstack-query
TanStack Query v5 data fetching and caching.
skills/tanstack-query/SKILL.md on GitHub (opens in a new tab) -
tdd
Test-driven development with red-green-refactor.
skills/tdd/SKILL.md on GitHub (opens in a new tab) -
typescript
TypeScript types, tsconfig and TypeScript 7 migration.
skills/typescript/SKILL.md on GitHub (opens in a new tab) -
ui-design
Accessible, responsive frontend UI and UX design.
skills/ui-design/SKILL.md on GitHub (opens in a new tab) -
vercel-composition-patterns
React component API design with compound components.
skills/vercel-composition-patterns/SKILL.md on GitHub (opens in a new tab) -
vercel-react-best-practices
React and Next.js performance optimization.
skills/vercel-react-best-practices/SKILL.md on GitHub (opens in a new tab) -
vitest
Vitest 5 unit tests and mocking.
skills/vitest/SKILL.md on GitHub (opens in a new tab) -
web-design-guidelines
Review UI code against Web Interface Guidelines.
skills/web-design-guidelines/SKILL.md on GitHub (opens in a new tab) -
zod
Zod 4 schema validation and type inference.
skills/zod/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.