react-patterns
Skill0 starsChanged 6 months agoMITView on GitHub
Applies React and Next.js component patterns for performance, accessibility, and animation work.
38 other projects use a version of this.
Adopted by
Most recently taken up by
- lhbsaa/apex-unifiedtheir own version, first seen Nov 8, 2026
- reddygopalkrishna/developer-agent-skillstheir own version, first seen Nov 8, 2026
- komluk/scaffoldingtheir own version, first seen Nov 7, 2026
- Lukk17/agent-standardstheir own version, first seen Nov 7, 2026
- ku5ic/claude-kittheir own version, first seen Nov 4, 2026
- renepf/claude-skillstheir own version, first seen Oct 25, 2026
Used with
Projects with it also use typescript-patterns, typescript-strict and 9 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
cohen-lielSkilltypescript-patterns
TypeScript best practices and patterns. Use when writing TypeScript code, defining types, working with generics, or converting JavaScript to TypeScript.
Also in 3 projects that use this
MicrosoftSkilltypescript-strict
Enable TypeScript strict mode (strict, noImplicitAny, strictNullChecks, etc.) in a project and fix the resulting errors without weakening types, tests, or runtime behavior. Use when asked to "enable strict mode", "turn on TypeScript strict", "fix strict errors", or migrate a codebase to strict type checking.
Also in 3 projects that use this
xfstudioSkilldocker-expert
Docker containerization expert with deep knowledge of multi-stage builds, image optimization, container security, Docker Compose orchestration, and production deployment patterns. Use PROACTIVELY for Dockerfile optimization, container issues, image size problems, security hardening, networking, and orchestration challenges.
Also in 3 projects that use this
LangChainSkilldocker-patterns
Best practices for Docker containerization and multi-stage builds
Also in 4 projects that use this
BlockSkilltesting-strategy
Guidelines for writing effective tests in this project
Also in 4 projects that use this
- LangChainSkill
database-migrations
Database migration patterns and schema versioning
Also in 4 projects that use this
Other versions38 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 38
- openstory-so/openstory★ 696same name
- involvex/youtube-music-cli★ 477same name
- xenitV1/Antigravity-Workflows★ 130same name
- TangleML/tangle-ui★ 104same name
- maxyeh0817/Forge★ 34same name
- VoDaiLocz/kilo-kit-mcp★ 28same name
- Fandry96/k3-agentic-skills★ 27same name
- komluk/scaffolding★ 16same name
- xfstudio/skills★ 9same name
- gongyijie85/dsh-ecc★ 8same name
28 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository10 other files it gives its agents.
- .claude/skills/react-patterns/AGENTS.mdAGENTS.md
- accessibilitySkill
- clarify-requirementsSkill
- code-review-processSkill
- component-architectureSkill
- frontend-patternsSkill
- frontend-performanceSkill
- responsive-designSkill
- systematic-debuggingSkill
- typescriptSkill
The file
We split this skill into the rules it gives an agent
9 rules. 0 are common, 6 are distinctive, and 3 are very specific to this project.
0
Common
Most of the 34 edited versions we read keep these.
6
Distinctive
This author's own choices. Worth a look.
3
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 8
Use this skill as the router for non-obvious React and Next.js guidance.
- Very specific: line 20
Start with the nearest matching rule under rules/.
- Distinctive: line 21
If the problem spans many performance categories, consult AGENTS.md as the full compiled rulebook.
- Very specific: line 22
Keep the SKILL.md layer short and use the rule files for detail.
- Distinctive: line 39
prefer route or component restructuring over clever memoization
- Distinctive: line 40
keep client bundles small before tuning event handlers
- Distinctive: line 41
treat hydration mismatches and browser-only data as explicit design problems
- Distinctive: line 47
Use compound components when related UI pieces need implicit shared state and a cohesive API.
- Distinctive: line 68
If you need the full 40+ rule compilation, read AGENTS.md.
“Common” is measured: kept by at least 6 in 10 of the 34 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
React Patterns
Use this skill as the router for non-obvious React and Next.js guidance. Standard component syntax, hooks basics, and common JSX patterns are assumed.
When to Use
- component architecture and reuse
- React or Next.js performance work
- hydration, bundle, or waterfall issues
- accessibility-sensitive UI patterns
- animation choices that affect render cost
Load Order
- Start with the nearest matching rule under
rules/. - If the problem spans many performance categories, consult AGENTS.md as the full compiled rulebook.
- Keep the
SKILL.mdlayer short and use the rule files for detail.
Quick Routing
| Problem | Start Here |
request waterfalls, early await, Suspense streaming | rules/async-*.md |
| bundle size and client-load cost | rules/bundle-*.md |
| client fetching, SWR, or browser listener issues | rules/client-*.md |
| re-render churn, effect deps, stale state reads | rules/rerender-*.md |
| render-path cost, hydration mismatch, SVG, visibility | rules/rendering-*.md |
| low-level JavaScript hot-path cleanup | rules/js-*.md |
| callback refs and advanced event patterns | rules/advanced-*.md |
Non-Obvious Defaults
- eliminate waterfalls before micro-optimizing renders
- prefer route or component restructuring over clever memoization
- keep client bundles small before tuning event handlers
- treat hydration mismatches and browser-only data as explicit design problems
Small Pattern Starters
Compound Components
Use compound components when related UI pieces need implicit shared state and a cohesive API.
Virtualization
Virtualize lists once item counts are large enough to affect mount or scroll cost.
Accessibility
Focus trapping, keyboard navigation, and dialog return-focus behavior are first-class concerns, not polish items.
Animation
Animate with explicit entry and exit states, but avoid introducing client-heavy animation libraries into flows that do not need them.
Reference Boundary
This skill intentionally stays thin because the detailed rule set already lives in:
- AGENTS.md
- the
rules/directory
If you need the full 40+ rule compilation, read AGENTS.md. If you need an actionable fix, open the matching rule file directly.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.