typescript-react-patterns
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.
- Installs
- 1.1K
- Last 24h
- +9
- Trending rank
- #9291
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/asyrafhussin/agent-skills --skill typescript-react-patterns- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads typescript-react-patterns automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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- |
Quick Reference
1. Component Typing (CRITICAL)
comp-props-interface- Use interface for props, type for unionscomp-children-types- Correct children typing (ReactNode, ReactElement)comp-default-props- Default props with destructuring defaultscomp-forward-ref- Typing forwardRef componentscomp-polymorphic- Polymorphic "as" prop typingcomp-fc-vs-function- Function declaration vs React.FCcomp-display-name- Display names for debuggingcomp-rest-props- Spreading rest props with proper types
2. Hook Typing (CRITICAL)
hook-usestate- useState with proper generic typeshook-useref- useRef for DOM elements and mutable valueshook-use-reducer- useReducer with discriminated union actionshook-use-callback- useCallback with typed parametershook-use-memo- useMemo with typed return valueshook-use-context- useContext with null checkinghook-custom-hooks- Custom hook return typeshook-generic-hooks- Generic custom hooks
3. Event Handling (HIGH)
event-handler-types- Event handler type patternsevent-click-handler- Click event typingevent-form- Form event handling (submit, change, select)event-keyboard- Keyboard event types
4. Ref Typing (HIGH)
ref-dom-elements- useRef with specific HTML element typesref-callback- Callback ref pattern for DOM measurementref-imperative-handle- useImperativeHandle typing
5. Generic Components (MEDIUM)
generic-list- Generic list componentsgeneric-select- Generic select/dropdowngeneric-table- Generic table with typed columnsgeneric-constraints- Generic constraints with extends
6. Context & State (MEDIUM)
ctx-create- Creating typed contextctx-provider- Provider pattern with null check hookctx-reducer- Context with useReducer
7. Utility Types (LOW)
util-component-props- ComponentPropsWithoutRef for HTML propsutil-pick-omit- Pick, Omit, Partial for prop derivationutil-discriminated-unions- Discriminated unions for state machines
Essential Patterns
Component Props
interface ButtonProps {
variant: 'primary' | 'secondary' | 'danger'
size?: 'sm' | 'md' | 'lg'
children: React.ReactNode
onClick?: () => void
}
function Button({ variant, size = 'md', children, onClick }: ButtonProps) {
return (
<button className={`btn-${variant} btn-${size}`} onClick={onClick}>
{children}
</button>
)
}
Typed Context with Null Check
interface AuthContextType {
user: User | null
login: (credentials: Credentials) => Promise<void>
logout: () => void
}
const AuthContext = createContext<AuthContextType | null>(null)
function useAuth() {
const context = useContext(AuthContext)
if (!context) throw new Error('useAuth must be used within AuthProvider')
return context
}
Generic Component
interface ListProps<T> {
items: T[]
renderItem: (item: T) => React.ReactNode
keyExtractor: (item: T) => string
}
function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
return <ul>{items.map(item => <li key={keyExtractor(item)}>{renderItem(item)}</li>)}</ul>
}
How to Use
Read individual rule files for detailed explanations:
rules/comp-props-interface.md
rules/hook-usestate.md
rules/event-form.md
rules/ref-dom-elements.md
rules/util-discriminated-unions.md
References
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md
FAQ
What does the typescript-react-patterns skill do?
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.
How do I install typescript-react-patterns?
Run npx skills add https://github.com/asyrafhussin/agent-skills --skill typescript-react-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/typescript-react-patterns/ (personal) or .claude/skills/typescript-react-patterns/ (project).
Which AI agents can use typescript-react-patterns?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is typescript-react-patterns safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains typescript-react-patterns?
It is published by asyrafhussin in asyrafhussin/agent-skills. It has 1,071 recorded installs.
More from asyrafhussin/agent-skills
php-best-practices
asyrafhussin/agent-skills
PHP 8.x modern patterns, PSR standards, and SOLID principles. Use when reviewing PHP code, checking type safety, auditing code quality, or ensuring PHP best practices. Triggers on "review PHP", "check PHP code", "audit PHP", or "PHP best practices".
react-vite-best-practices
asyrafhussin/agent-skills
React and Vite performance optimization guidelines. Use when writing, reviewing, or optimizing React components built with Vite. Triggers on tasks involving Vite configuration, build optimization, code splitting, lazy loading, HMR, bundle size, or React performance.
laravel-best-practices
asyrafhussin/agent-skills
Laravel 13 conventions and best practices. Use when creating controllers, models, migrations, validation, services, or structuring Laravel applications. Triggers on tasks involving Laravel architecture, Eloquent, database, API development, or PHP patterns.
laravel-inertia-react
asyrafhussin/agent-skills
Laravel + Inertia.js + React integration patterns. Use when building Inertia page components, handling forms with useForm, managing shared data, or implementing persistent layouts. Triggers on tasks involving Inertia.js, page props, form handling, or Laravel React integration.
clean-code-principles
asyrafhussin/agent-skills
SOLID principles, design patterns, DRY, KISS, and clean code fundamentals. Use when reviewing architecture, checking code quality, refactoring, or discussing design decisions. Triggers on "review architecture", "check code quality", "SOLID principles", "design patterns", or "clean code".
laravel-database-optimization
asyrafhussin/agent-skills
Laravel database optimization patterns. Use when writing Eloquent queries, creating migrations, configuring caching, debugging slow queries, or optimizing database performance. Triggers on tasks involving N+1 queries, indexing, Redis caching, pagination, or database transactions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.