{"id":"00bf8b0b-37ae-4050-9a7a-cc7a346000c4","shortId":"HPTTVy","kind":"skill","title":"typescript-react-patterns","tagline":"TypeScript best practices for React development. Use when writing typed React components, hooks, events, refs, or generic components. Triggers on tasks involving TypeScript errors, type definitions, props typing, or type-safe React patterns.","description":"# TypeScript React Patterns\n\nType-safe React with TypeScript. Contains 33 rules across 7 categories covering component typing, hooks, event handling, refs, generics, context, and utility types.\n\n## Metadata\n\n- **Version:** 2.0.0\n- **Rule Count:** 33 rules across 7 categories\n- **License:** MIT\n\n## When to Apply\n\nReference these guidelines when:\n- Typing React component props\n- Creating custom hooks with TypeScript\n- Handling events with proper types\n- Working with refs (DOM, mutable, imperative)\n- Building generic, reusable components\n- Setting up typed Context providers\n- Fixing TypeScript errors in React code\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | Component Typing | CRITICAL | `comp-` |\n| 2 | Hook Typing | CRITICAL | `hook-` |\n| 3 | Event Handling | HIGH | `event-` |\n| 4 | Ref Typing | HIGH | `ref-` |\n| 5 | Generic Components | MEDIUM | `generic-` |\n| 6 | Context & State | MEDIUM | `ctx-` |\n| 7 | Utility Types | LOW | `util-` |\n\n## Quick Reference\n\n### 1. Component Typing (CRITICAL)\n\n- `comp-props-interface` - Use interface for props, type for unions\n- `comp-children-types` - Correct children typing (ReactNode, ReactElement)\n- `comp-default-props` - Default props with destructuring defaults\n- `comp-forward-ref` - Typing forwardRef components\n- `comp-polymorphic` - Polymorphic \"as\" prop typing\n- `comp-fc-vs-function` - Function declaration vs React.FC\n- `comp-display-name` - Display names for debugging\n- `comp-rest-props` - Spreading rest props with proper types\n\n### 2. Hook Typing (CRITICAL)\n\n- `hook-usestate` - useState with proper generic types\n- `hook-useref` - useRef for DOM elements and mutable values\n- `hook-use-reducer` - useReducer with discriminated union actions\n- `hook-use-callback` - useCallback with typed parameters\n- `hook-use-memo` - useMemo with typed return values\n- `hook-use-context` - useContext with null checking\n- `hook-custom-hooks` - Custom hook return types\n- `hook-generic-hooks` - Generic custom hooks\n\n### 3. Event Handling (HIGH)\n\n- `event-handler-types` - Event handler type patterns\n- `event-click-handler` - Click event typing\n- `event-form` - Form event handling (submit, change, select)\n- `event-keyboard` - Keyboard event types\n\n### 4. Ref Typing (HIGH)\n\n- `ref-dom-elements` - useRef with specific HTML element types\n- `ref-callback` - Callback ref pattern for DOM measurement\n- `ref-imperative-handle` - useImperativeHandle typing\n\n### 5. Generic Components (MEDIUM)\n\n- `generic-list` - Generic list components\n- `generic-select` - Generic select/dropdown\n- `generic-table` - Generic table with typed columns\n- `generic-constraints` - Generic constraints with extends\n\n### 6. Context & State (MEDIUM)\n\n- `ctx-create` - Creating typed context\n- `ctx-provider` - Provider pattern with null check hook\n- `ctx-reducer` - Context with useReducer\n\n### 7. Utility Types (LOW)\n\n- `util-component-props` - ComponentPropsWithoutRef for HTML props\n- `util-pick-omit` - Pick, Omit, Partial for prop derivation\n- `util-discriminated-unions` - Discriminated unions for state machines\n\n## Essential Patterns\n\n### Component Props\n\n```tsx\ninterface ButtonProps {\n  variant: 'primary' | 'secondary' | 'danger'\n  size?: 'sm' | 'md' | 'lg'\n  children: React.ReactNode\n  onClick?: () => void\n}\n\nfunction Button({ variant, size = 'md', children, onClick }: ButtonProps) {\n  return (\n    <button className={`btn-${variant} btn-${size}`} onClick={onClick}>\n      {children}\n    </button>\n  )\n}\n```\n\n### Typed Context with Null Check\n\n```tsx\ninterface AuthContextType {\n  user: User | null\n  login: (credentials: Credentials) => Promise<void>\n  logout: () => void\n}\n\nconst AuthContext = createContext<AuthContextType | null>(null)\n\nfunction useAuth() {\n  const context = useContext(AuthContext)\n  if (!context) throw new Error('useAuth must be used within AuthProvider')\n  return context\n}\n```\n\n### Generic Component\n\n```tsx\ninterface ListProps<T> {\n  items: T[]\n  renderItem: (item: T) => React.ReactNode\n  keyExtractor: (item: T) => string\n}\n\nfunction List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {\n  return <ul>{items.map(item => <li key={keyExtractor(item)}>{renderItem(item)}</li>)}</ul>\n}\n```\n\n## How to Use\n\nRead individual rule files for detailed explanations:\n\n```\nrules/comp-props-interface.md\nrules/hook-usestate.md\nrules/event-form.md\nrules/ref-dom-elements.md\nrules/util-discriminated-unions.md\n```\n\n## References\n\n- [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app)\n- [React + TypeScript Guide](https://react.dev/learn/typescript)\n- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/)\n\n## Full Compiled Document\n\nFor the complete guide with all rules expanded: `AGENTS.md`","tags":["typescript","react","patterns","agent","skills","asyrafhussin","agent-rules","agent-skills","ai-agents","ai-slop","claude-code","code-quality"],"capabilities":["skill","source-asyrafhussin","skill-typescript-react-patterns","topic-agent-rules","topic-agent-skills","topic-ai-agents","topic-ai-slop","topic-claude-code","topic-code-quality","topic-code-review","topic-codex","topic-cursor","topic-laravel","topic-nodejs","topic-react"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/AsyrafHussin/agent-skills/typescript-react-patterns","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add AsyrafHussin/agent-skills","source_repo":"https://github.com/AsyrafHussin/agent-skills","install_from":"skills.sh"}},"qualityScore":"0.469","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 39 github stars · SKILL.md body (4,775 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-05-18T18:58:25.747Z","embedding":null,"createdAt":"2026-05-16T18:57:15.387Z","updatedAt":"2026-05-18T18:58:25.747Z","lastSeenAt":"2026-05-18T18:58:25.747Z","tsv":"'/docs/handbook/)':598 '/learn/typescript)':593 '1':128,165 '2':133,239 '2.0.0':68 '3':138,310 '33':49,71 '4':143,344 '5':148,373 '6':153,403 '7':52,74,158,428 'across':51,73 'action':269 'agents.md':610 'appli':80 'authcontext':514,524 'authcontexttyp':503,516 'authprovid':535 'best':6 'btn':489,491 'build':105 'button':479,487 'buttonprop':465,485 'callback':273,360,361 'categori':53,75,121,125 'chang':336 'cheatsheet':586 'check':294,420,500 'children':182,185,474,483,495 'classnam':488 'click':324,326 'code':119 'column':395 'comp':132,170,181,190,199,206,213,222,230 'comp-children-typ':180 'comp-default-prop':189 'comp-display-nam':221 'comp-fc-vs-funct':212 'comp-forward-ref':198 'comp-polymorph':205 'comp-props-interfac':169 'comp-rest-prop':229 'compil':600 'complet':604 'compon':16,22,55,87,108,129,150,166,204,375,382,434,461,539 'componentpropswithoutref':436 'const':513,521 'constraint':398,400 'contain':48 'context':62,112,154,290,404,412,425,497,522,526,537 'correct':184 'count':70 'cover':54 'creat':89,409,410 'createcontext':515 'credenti':508,509 'critic':131,136,168,242 'ctx':157,408,414,423 'ctx-creat':407 'ctx-provid':413 'ctx-reduc':422 'custom':90,297,299,308 'danger':469 'debug':228 'declar':218 'default':191,193,197 'definit':30 'deriv':449 'destructur':196 'detail':576 'develop':10 'discrimin':267,452,454 'display':223,225 'document':601 'dom':102,256,350,365 'element':257,351,356 'error':28,116,529 'essenti':459 'event':18,58,95,139,142,311,315,318,323,327,330,333,339,342 'event-click-handl':322 'event-form':329 'event-handler-typ':314 'event-keyboard':338 'expand':609 'explan':577 'extend':402 'fc':214 'file':574 'fix':114 'form':331,332 'forward':200 'forwardref':203 'full':599 'function':216,217,478,519,553 'generic':21,61,106,149,152,249,305,307,374,378,380,384,386,389,391,397,399,538 'generic-constraint':396 'generic-list':377 'generic-select':383 'generic-t':388 'guid':590,605 'guidelin':83 'handbook':595 'handl':59,94,140,312,334,370 'handler':316,319,325 'high':141,146,313,347 'hook':17,57,91,134,137,240,244,252,262,271,279,288,296,298,300,304,306,309,421 'hook-custom-hook':295 'hook-generic-hook':303 'hook-use-callback':270 'hook-use-context':287 'hook-use-memo':278 'hook-use-reduc':261 'hook-useref':251 'hook-usest':243 'html':355,438 'impact':126 'imper':104,369 'individu':572 'interfac':172,174,464,502,541 'involv':26 'item':543,546,550,555,561,565,567 'items.map':560 'key':563 'keyboard':340,341 'keyextractor':549,557,564 'lg':473 'li':562 'licens':76 'list':379,381,554 'listprop':542,558 'login':507 'logout':511 'low':161,431 'machin':458 'md':472,482 'measur':366 'medium':151,156,376,406 'memo':281 'metadata':66 'mit':77 'must':531 'mutabl':103,259 'name':224,226 'new':528 'null':293,419,499,506,517,518 'omit':443,445 'onclick':476,484,493,494 'paramet':277 'partial':446 'pattern':4,38,41,321,363,417,460 'pick':442,444 'polymorph':207,208 'practic':7 'prefix':127 'primari':467 'prioriti':123,124 'promis':510 'prop':31,88,171,176,192,194,210,232,235,435,439,448,462 'proper':97,237,248 'provid':113,415,416 'quick':163 'react':3,9,15,37,40,45,86,118,584,588 'react-typescript-cheatsheet.netlify.app':587 'react.dev':592 'react.dev/learn/typescript)':591 'react.fc':220 'react.reactnode':475,548 'reactel':188 'reactnod':187 'read':571 'reduc':264,424 'ref':19,60,101,144,147,201,345,349,359,362,368 'ref-callback':358 'ref-dom-el':348 'ref-imperative-handl':367 'refer':81,164,583 'renderitem':545,556,566 'rest':231,234 'return':285,301,486,536,559 'reusabl':107 'rule':50,69,72,120,573,608 'rules/comp-props-interface.md':578 'rules/event-form.md':580 'rules/hook-usestate.md':579 'rules/ref-dom-elements.md':581 'rules/util-discriminated-unions.md':582 'safe':36,44 'secondari':468 'select':337,385 'select/dropdown':387 'set':109 'size':470,481,492 'skill' 'skill-typescript-react-patterns' 'sm':471 'source-asyrafhussin' 'specif':354 'spread':233 'state':155,405,457 'string':552 'submit':335 'tabl':390,392 'task':25 'throw':527 'topic-agent-rules' 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-slop' 'topic-claude-code' 'topic-code-quality' 'topic-code-review' 'topic-codex' 'topic-cursor' 'topic-laravel' 'topic-nodejs' 'topic-react' 'trigger':23 'tsx':463,501,540 'type':14,29,32,35,43,56,65,85,98,111,130,135,145,160,167,177,183,186,202,211,238,241,250,276,284,302,317,320,328,343,346,357,372,394,411,430,496 'type-saf':34,42 'typescript':2,5,27,39,47,93,115,585,589,594 'typescript-react-pattern':1 'union':179,268,453,455 'use':11,173,263,272,280,289,533,570 'useauth':520,530 'usecallback':274 'usecontext':291,523 'useimperativehandl':371 'usememo':282 'user':504,505 'usereduc':265,427 'useref':253,254,352 'usest':245,246 'util':64,159,162,429,433,441,451 'util-component-prop':432 'util-discriminated-union':450 'util-pick-omit':440 'valu':260,286 'variant':466,480,490 'version':67 'void':477,512 'vs':215,219 'within':534 'work':99 'write':13 'www.typescriptlang.org':597 'www.typescriptlang.org/docs/handbook/)':596","prices":[{"id":"32cc568d-5990-44f0-a763-c4bdf0def2fe","listingId":"00bf8b0b-37ae-4050-9a7a-cc7a346000c4","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"AsyrafHussin","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-05-16T18:57:15.387Z"}],"sources":[{"listingId":"00bf8b0b-37ae-4050-9a7a-cc7a346000c4","source":"github","sourceId":"AsyrafHussin/agent-skills/typescript-react-patterns","sourceUrl":"https://github.com/AsyrafHussin/agent-skills/tree/main/skills/typescript-react-patterns","isPrimary":false,"firstSeenAt":"2026-05-16T18:57:15.387Z","lastSeenAt":"2026-05-18T18:58:25.747Z"}],"details":{"listingId":"00bf8b0b-37ae-4050-9a7a-cc7a346000c4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"AsyrafHussin","slug":"typescript-react-patterns","github":{"repo":"AsyrafHussin/agent-skills","stars":39,"topics":["agent-rules","agent-skills","ai-agents","ai-slop","claude-code","code-quality","code-review","codex","cursor","laravel","nodejs","react","technical-debt","typescript","windsurf"],"license":"mit","html_url":"https://github.com/AsyrafHussin/agent-skills","pushed_at":"2026-05-16T19:24:02Z","description":"Agent skills for AI coding agents (Claude Code, Cursor, Codex, Windsurf) — Laravel, React, TypeScript, MySQL, code quality, technical debt, documentation, and security.","skill_md_sha":"24c28c25c794d7bf7d2f5f392d62200284e37275","skill_md_path":"skills/typescript-react-patterns/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/AsyrafHussin/agent-skills/tree/main/skills/typescript-react-patterns"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"typescript-react-patterns","license":"MIT","description":"TypeScript best practices for React development. Use when writing typed React components, hooks, events, refs, or generic components. Triggers on tasks involving TypeScript errors, type definitions, props typing, or type-safe React patterns."},"skills_sh_url":"https://skills.sh/AsyrafHussin/agent-skills/typescript-react-patterns"},"updatedAt":"2026-05-18T18:58:25.747Z"}}