frontend-patterns
Frontend development patterns for React, Next.js, state management
by affaan-mFree
Description
frontend-patterns is an agent skill from the ECC collection by affaan-m, listed on skills.sh. It sets out frontend development patterns for React and Next.js applications. It covers component design, starting with composition over inheritance, and state management with useState, useReducer, Zustand and Context. It also covers data fetching with SWR, React Query and server components, performance work such as memoisation, virtualisation and code splitting, forms with validation, controlled inputs and Zod schemas, client-side routing, and accessible, responsive UI patterns. The skill applies when an agent is building or reviewing React or Next.js code. Because it is a SKILL.md file of instructions, the agent loads it only when the task calls for it and then follows the same conventions. It is free and open source, and the skills.sh listing shows all three security audits passing.…
Highlights
- Composition over inheritance for components
- State with useReducer, Zustand and Context
- SWR, React Query and server component fetching
- Memoisation, virtualisation and code splitting
Ratings & Reviews
No ratings yet
Be the first to rate frontend-patterns.
People also visit
frontend-patterns FAQ
What does the frontend-patterns skill do?
It guides an agent in building and reviewing React and Next.js code, covering components, state, data fetching, forms, routing and performance.
Which state tools does it cover?
useState, useReducer, Zustand and React Context.
Does it cover forms?
Yes. It includes validation, controlled inputs and Zod schemas.
How do I install it?
Run: npx skills add https://github.com/affaan-m/ecc --skill frontend-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 frontend-patterns alternatives?
Popular alternatives to frontend-patterns include webapp-testing, click-path-audit and frontend-a11y. See all frontend-patterns alternatives