{"id":"7765bfc6-be10-4aae-9552-c8e53f1bd436","shortId":"w2Wpny","kind":"skill","title":"react-patterns","tagline":"Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.","description":"# React Patterns\n\n> Principles for building production-ready React applications.\n\n---\n\n## 1. Component Design Principles\n\n### Component Types\n\n| Type | Use | State |\n|------|-----|-------|\n| **Server** | Data fetching, static | None |\n| **Client** | Interactivity | useState, effects |\n| **Presentational** | UI display | Props only |\n| **Container** | Logic/state | Heavy state |\n\n### Design Rules\n\n- One responsibility per component\n- Props down, events up\n- Composition over inheritance\n- Prefer small, focused components\n\n---\n\n## 2. Hook Patterns\n\n### When to Extract Hooks\n\n| Pattern | Extract When |\n|---------|-------------|\n| **useLocalStorage** | Same storage logic needed |\n| **useDebounce** | Multiple debounced values |\n| **useFetch** | Repeated fetch patterns |\n| **useForm** | Complex form state |\n\n### Hook Rules\n\n- Hooks at top level only\n- Same order every render\n- Custom hooks start with \"use\"\n- Clean up effects on unmount\n\n---\n\n## 3. State Management Selection\n\n| Complexity | Solution |\n|------------|----------|\n| Simple | useState, useReducer |\n| Shared local | Context |\n| Server state | React Query, SWR |\n| Complex global | Zustand, Redux Toolkit |\n\n### State Placement\n\n| Scope | Where |\n|-------|-------|\n| Single component | useState |\n| Parent-child | Lift state up |\n| Subtree | Context |\n| App-wide | Global store |\n\n---\n\n## 4. React 19 Patterns\n\n### New Hooks\n\n| Hook | Purpose |\n|------|---------|\n| **useActionState** | Form submission state |\n| **useOptimistic** | Optimistic UI updates |\n| **use** | Read resources in render |\n\n### Compiler Benefits\n\n- Automatic memoization\n- Less manual useMemo/useCallback\n- Focus on pure components\n\n---\n\n## 5. Composition Patterns\n\n### Compound Components\n\n- Parent provides context\n- Children consume context\n- Flexible slot-based composition\n- Example: Tabs, Accordion, Dropdown\n\n### Render Props vs Hooks\n\n| Use Case | Prefer |\n|----------|--------|\n| Reusable logic | Custom hook |\n| Render flexibility | Render props |\n| Cross-cutting | Higher-order component |\n\n---\n\n## 6. Performance Principles\n\n### When to Optimize\n\n| Signal | Action |\n|--------|--------|\n| Slow renders | Profile first |\n| Large lists | Virtualize |\n| Expensive calc | useMemo |\n| Stable callbacks | useCallback |\n\n### Optimization Order\n\n1. Check if actually slow\n2. Profile with DevTools\n3. Identify bottleneck\n4. Apply targeted fix\n\n---\n\n## 7. Error Handling\n\n### Error Boundary Usage\n\n| Scope | Placement |\n|-------|-----------|\n| App-wide | Root level |\n| Feature | Route/feature level |\n| Component | Around risky component |\n\n### Error Recovery\n\n- Show fallback UI\n- Log error\n- Offer retry option\n- Preserve user data\n\n---\n\n## 8. TypeScript Patterns\n\n### Props Typing\n\n| Pattern | Use |\n|---------|-----|\n| Interface | Component props |\n| Type | Unions, complex |\n| Generic | Reusable components |\n\n### Common Types\n\n| Need | Type |\n|------|------|\n| Children | ReactNode |\n| Event handler | MouseEventHandler |\n| Ref | RefObject<Element> |\n\n---\n\n## 9. Testing Principles\n\n| Level | Focus |\n|-------|-------|\n| Unit | Pure functions, hooks |\n| Integration | Component behavior |\n| E2E | User flows |\n\n### Test Priorities\n\n- User-visible behavior\n- Edge cases\n- Error states\n- Accessibility\n\n---\n\n## 10. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| Prop drilling deep | Use context |\n| Giant components | Split smaller |\n| useEffect for everything | Server components |\n| Premature optimization | Profile first |\n| Index as key | Stable unique ID |\n\n---\n\n> **Remember:** React is about composition. Build small, combine thoughtfully.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["react","patterns","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-react-patterns","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/react-patterns","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34583 github stars · SKILL.md body (4,027 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T18:52:06.742Z","embedding":null,"createdAt":"2026-04-18T21:43:21.889Z","updatedAt":"2026-04-22T18:52:06.742Z","lastSeenAt":"2026-04-22T18:52:06.742Z","tsv":"'1':25,256 '10':358 '19':161 '2':69,261 '3':117,265 '4':159,268 '5':191 '6':233 '7':272 '8':305 '9':332 'access':357 'accordion':209 'action':240,410 'actual':259 'anti':360 'anti-pattern':359 'app':155,281 'app-wid':154,280 'appli':269 'applic':24,404 'around':289 'ask':448 'automat':182 'base':205 'behavior':343,352 'benefit':181 'best':13 'bottleneck':267 'boundari':276,456 'build':19,394 'calc':249 'callback':252 'case':216,354 'check':257 'child':148 'children':199,325 'clarif':450 'clean':112 'clear':423 'client':39 'combin':396 'common':321 'compil':180 'complex':93,121,134,317 'compon':26,29,57,68,144,190,195,232,288,291,313,320,342,371,378 'composit':10,62,192,206,393 'compound':194 'consum':200 'contain':48 'context':128,153,198,201,369 'criteria':459 'cross':227 'cross-cut':226 'custom':107,220 'cut':228 'data':35,304 'debounc':86 'deep':367 'describ':411,427 'design':27,52 'devtool':264 'display':45 'drill':366 'dropdown':210 'e2e':344 'edg':353 'effect':42,114 'environ':439 'environment-specif':438 'error':273,275,292,298,355 'event':60,327 'everi':105 'everyth':376 'exampl':207 'execut':406 'expens':248 'expert':444 'extract':74,77 'fallback':295 'featur':285 'fetch':36,90 'first':244,382 'fix':271 'flexibl':202,223 'flow':346 'focus':67,187,336 'form':94,168 'function':339 'generic':318 'giant':370 'global':135,157 'handl':274 'handler':328 'heavi':50 'higher':230 'higher-ord':229 'hook':9,70,75,96,98,108,164,165,214,221,340 'id':388 'identifi':266 'index':383 'inherit':64 'input':453 'integr':341 'interact':40 'interfac':312 'key':385 'larg':245 'less':184 'level':101,284,287,335 'lift':149 'limit':415 'list':246 'local':127 'log':297 'logic':82,219 'logic/state':49 'manag':119 'manual':185 'match':424 'memoiz':183 'miss':461 'modern':4 'mouseeventhandl':329 'multipl':85 'need':83,323 'new':163 'none':38 'offer':299 'one':54 'optim':238,254,380 'optimist':172 'option':301 'order':104,231,255 'output':433 'overview':414 'parent':147,196 'parent-child':146 'pattern':3,6,16,71,76,91,162,193,307,310,361 'per':56 'perform':11,234 'permiss':454 'placement':140,279 'practic':14 'prefer':65,217 'prematur':379 'present':43 'preserv':302 'principl':8,17,28,235,334 'prioriti':348 'product':21 'production-readi':20 'profil':243,262,381 'prop':46,58,212,225,308,314,365 'provid':197 'pure':189,338 'purpos':166 'queri':132 'react':2,5,15,23,131,160,390 'react-pattern':1 'reactnod':326 'read':176 'readi':22 'recoveri':293 'redux':137 'ref':330 'refobject':331 'rememb':389 'render':106,179,211,222,224,242 'repeat':89 'requir':452 'resourc':177 'respons':55 'retri':300 'reusabl':218,319 'review':445 'riski':290 'root':283 'route/feature':286 'rule':53,97 'safeti':455 'scope':141,278,426 'select':120 'server':34,129,377 'share':126 'show':294 'signal':239 'simpl':123 'singl':143 'skill':402,418 'skill-react-patterns' 'slot':204 'slot-bas':203 'slow':241,260 'small':66,395 'smaller':373 'solut':122 'source-sickn33' 'specif':440 'split':372 'stabl':251,386 'start':109 'state':33,51,95,118,130,139,150,170,356 'static':37 'stop':446 'storag':81 'store':158 'submiss':169 'substitut':436 'subtre':152 'success':458 'swr':133 'tab':208 'target':270 'task':422 'test':333,347,442 'thought':397 'toolkit':138 'top':100 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'treat':431 'type':30,31,309,315,322,324 'typescript':12,306 'ui':44,173,296 'union':316 'uniqu':387 'unit':337 'unmount':116 'updat':174 'usag':277 'use':32,111,175,215,311,368,400,416 'useactionst':167 'usecallback':253 'usedebounc':84 'useeffect':374 'usefetch':88 'useform':92 'uselocalstorag':79 'usememo':250 'usememo/usecallback':186 'useoptimist':171 'user':303,345,350 'user-vis':349 'usereduc':125 'usest':41,124,145 'valid':441 'valu':87 'virtual':247 'visibl':351 'vs':213 'wide':156,282 'workflow':408 'zustand':136","prices":[{"id":"44669118-f8b2-4bd8-b4ed-ed1aa5b7a780","listingId":"7765bfc6-be10-4aae-9552-c8e53f1bd436","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:43:21.889Z"}],"sources":[{"listingId":"7765bfc6-be10-4aae-9552-c8e53f1bd436","source":"github","sourceId":"sickn33/antigravity-awesome-skills/react-patterns","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-patterns","isPrimary":false,"firstSeenAt":"2026-04-18T21:43:21.889Z","lastSeenAt":"2026-04-22T18:52:06.742Z"}],"details":{"listingId":"7765bfc6-be10-4aae-9552-c8e53f1bd436","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"react-patterns","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34583,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"3eef3048afabb4a78bf4f2ab559669e433f9741b","skill_md_path":"skills/react-patterns/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-patterns"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"react-patterns","description":"Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/react-patterns"},"updatedAt":"2026-04-22T18:52:06.742Z"}}