Updated 1d 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.
42 GitHub stars (42)
+14 in 30 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 |
| Oct 17 | +1 |
| Oct 18 | 0 |
| Oct 19 | +1 |
| Oct 20 | 0 |
| Oct 21 | +1 |
| Oct 22 | 0 |
| Oct 23 | 0 |
| Oct 24 | 0 |
| Oct 25 | 0 |
| Oct 26 | 0 |
| Oct 27 | 0 |
| Oct 28 | 0 |
| Oct 29 | +1 |
| Oct 30 | 0 |
| Oct 31 | 0 |
| Nov 1 | 0 |
| Nov 2 | 0 |
| Nov 3 | +1 |
| Nov 4 | 0 |
| Nov 5 | +1 |
- 18 skills (18 skills found in its SKILL.md files)
- 5 forks (5 forks)
- 1d ago last update (Last updated 1d 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/ on GitHub (opens in a new tab)SKILL.md -
msw
MSW 3 API mocking for tests.
skills/msw/ on GitHub (opens in a new tab)SKILL.md -
nextjs
Next.js 16 App Router caching and routing.
skills/nextjs/ on GitHub (opens in a new tab)SKILL.md -
nuqs
nuqs type-safe URL search-param state.
skills/nuqs/ on GitHub (opens in a new tab)SKILL.md -
playwright
Playwright end-to-end tests and flaky-test fixes.
skills/playwright/ on GitHub (opens in a new tab)SKILL.md -
react-hook-form
React Hook Form 7 forms and validation.
skills/react-hook-form/ on GitHub (opens in a new tab)SKILL.md -
react
React 19 components and hooks.
skills/react/ on GitHub (opens in a new tab)SKILL.md -
shadcn
shadcn/ui components on Radix or Base UI.
skills/shadcn/ on GitHub (opens in a new tab)SKILL.md -
tailwind
Tailwind CSS v4 styling and configuration.
skills/tailwind/ on GitHub (opens in a new tab)SKILL.md -
tanstack-query
TanStack Query v5 data fetching and caching.
skills/tanstack-query/ on GitHub (opens in a new tab)SKILL.md -
tdd
Test-driven development with red-green-refactor.
skills/tdd/ on GitHub (opens in a new tab)SKILL.md -
typescript
TypeScript types, tsconfig and TypeScript 7 migration.
skills/typescript/ on GitHub (opens in a new tab)SKILL.md -
ui-design
Accessible, responsive frontend UI and UX design.
skills/ui-design/ on GitHub (opens in a new tab)SKILL.md -
vercel-composition-patterns
React component API design with compound components.
skills/vercel-composition-patterns/ on GitHub (opens in a new tab)SKILL.md -
vercel-react-best-practices
React and Next.js performance optimization.
skills/vercel-react-best-practices/ on GitHub (opens in a new tab)SKILL.md -
vitest
Vitest 5 unit tests and mocking.
skills/vitest/ on GitHub (opens in a new tab)SKILL.md -
web-design-guidelines
Review UI code against Web Interface Guidelines.
skills/web-design-guidelines/ on GitHub (opens in a new tab)SKILL.md -
zod
Zod 4 schema validation and type inference.
skills/zod/ on GitHub (opens in a new tab)SKILL.md
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.