Typescript React Patterns

A comprehensive reference for typing React components, hooks, and patterns with TypeScript. You'll want this when dealing with props interfaces, event handlers, refs, generic components, or really any time TypeScript is yelling at you in a React codebase. It covers 33 rules across seven categories, from critical patterns like component props and hook typing to more specialized cases like polymorphic components and discriminated unions. The practical examples are solid, especially the typed context pattern with null checking and the generic list component. It's basically the TypeScript React Cheatsheet distilled into agent-friendly rules, which means less time searching Stack Overflow when you forget how to properly type a form onChange handler for the hundredth time.

skills.sh installs: 1.1K
GitHub stars: 102
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add asyrafhussin/agent-skills --skill typescript-react-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

TypeScript React Patterns

Type-safe React with TypeScript. Contains 33 rules across 7 categories covering component typing, hooks, event handling, refs, generics, context, and utility types.

Metadata

Version: 2.0.0
Rule Count: 33 rules across 7 categories
License: MIT

When to Apply

Reference these guidelines when:

Typing React component props
Creating custom hooks with TypeScript
Handling events with proper types
Working with refs (DOM, mutable, imperative)
Building generic, reusable components
Setting up typed Context providers
Fixing TypeScript errors in React code

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Component Typing	CRITICAL	`comp-`
2	Hook Typing	CRITICAL	`hook-`
3	Event Handling	HIGH	`event-`
4	Ref Typing	HIGH	`ref-`
5	Generic Components	MEDIUM	`generic-`
6	Context & State	MEDIUM	`ctx-`
7	Utility Types	LOW	`util-`