OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add asyrafhussin/agent-skills --skill 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.
npx skills add asyrafhussin/agent-skills --skill 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.
Reference these guidelines when:
| 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- |
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 typeshook-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 hooksevent-handler-types - Event handler type patternsevent-click-handler - Click event typingevent-form - Form event handling (submit, change, select)event-keyboard - Keyboard event typesref-dom-elements - useRef with specific HTML element typesref-callback - Callback ref pattern for DOM measurementref-imperative-handle - useImperativeHandle typinggeneric-list - Generic list componentsgeneric-select - Generic select/dropdowngeneric-table - Generic table with typed columnsgeneric-constraints - Generic constraints with extendsctx-create - Creating typed contextctx-provider - Provider pattern with null check hookctx-reducer - Context with useReducerutil-component-props - ComponentPropsWithoutRef for HTML propsutil-pick-omit - Pick, Omit, Partial for prop derivationutil-discriminated-unions - Discriminated unions for state machinesRead individual rule files for detailed explanations:
For the complete guide with all rules expanded: AGENTS.md
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
}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>
}rules/comp-props-interface.md
rules/hook-usestate.md
rules/event-form.md
rules/ref-dom-elements.md
rules/util-discriminated-unions.md