bulletproof-react-components
Installation
SKILL.md
Bulletproof React Components
Nine patterns that ensure React components survive real-world conditions beyond the happy path — SSR, hydration, concurrent rendering, portals, and more.
Source: shud.in/thoughts/build-bulletproof-react-components
How It Works
- When writing or reviewing a reusable React component, consult the Quick Rules below
- For code examples and deeper explanation, read
./references/patterns.md - Run through the Checklist before shipping
Quick Rules
| # | Pattern | Rule |
|---|---|---|
| 1 | Server-Proof | Never call browser APIs (localStorage, window, document) during render. Use useEffect. |
| 2 | Hydration-Proof | Inject a synchronous inline <script> to set client-dependent values before React hydration. |
| 3 | Instance-Proof | Use useId() for all generated IDs. Never hardcode IDs in reusable components. |
Related skills