Description
react-patterns is an agent skill from the ECC collection by affaan-m, listed on skills.sh. It sets out idiomatic React 18 and 19 patterns for building robust, accessible and fast component trees. Its first principle is that render is a pure function of props and state. Its topics include disciplined use of hooks, the boundary between server and client components in the Next.js App Router, Suspense and error boundaries, forms with React 19 actions, data fetching with TanStack Query, SWR or server components, and how to choose between local state, lifted state, context and an external store. It also covers migrating class components and older forwardRef or useEffect-heavy code. The skill applies when writing or modifying function components and custom hooks, reviewing JSX and TSX, designing state shape or composition, and implementing forms. It is a SKILL.md file of instructions that an AI agent loads when a task calls for it. It is free and open source, and the skills.sh listing shows all three security audits passing.…
Highlights
- Pure render from props and state
- Hooks discipline
- Server and client component boundaries
- Suspense, error boundaries and form actions
Ratings & Reviews
No ratings yet
Be the first to rate react-patterns.
People also visit
react-patterns FAQ
What does the react-patterns skill do?
It guides an agent in writing and reviewing React 18 and 19 components, hooks, state and data fetching, including Server Components and forms.
Does it cover migrations?
Yes. It includes moving class components and older forwardRef or useEffect-heavy code to current patterns.
How does it choose a state approach?
It describes choosing between local state, lifted state, context and an external store.
How do I install it?
Run: npx skills add https://github.com/affaan-m/ecc --skill react-patterns
Is it free?
Yes. It is free and open source.
Are there security findings?
The skills.sh listing shows Gen Agent Trust Hub, Socket and Snyk all passing.
What are the best react-patterns alternatives?
Popular alternatives to react-patterns include frontend-code-review, react-core and webapp-testing. See all react-patterns alternatives