This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).
95
Does it follow best practices?
Evaluation — 95%
↑ 1.15xAgent success when using this skill
Validation for skill structure
React 19 form component with ref and actions
ref as prop pattern
0%
100%
No forwardRef usage
0%
100%
ComponentPropsWithoutRef
0%
100%
useActionState for form
100%
100%
No useFormState
100%
100%
isPending from useActionState
100%
100%
'use client' directive
100%
100%
'use server' directive
100%
100%
Specific event types
100%
62%
Discriminated union for Button
100%
100%
ReactNode for children
100%
75%
Generic typed data components
Generic type parameter
100%
100%
keyof T for columns
100%
100%
Render prop on columns
100%
100%
keyExtractor pattern
100%
100%
Constrained generic
0%
0%
Render prop on ItemList
100%
100%
ReactNode for rendering
100%
100%
as const for hook return
0%
0%
Explicit useState generic
100%
100%
SelectDropdown generic
70%
100%
No any types
100%
100%
Custom hooks and state management typing
as const on useToggle
0%
100%
Context null guard
100%
100%
createContext with null
0%
100%
Discriminated union actions
100%
100%
Typed reducer function
100%
100%
Mutable ref for timeout
100%
100%
Explicit useState generic
100%
100%
ReactNode for children
100%
100%
Notification type union
100%
100%
No any types
100%
100%
Proper ref cleanup
100%
100%
Server/client component architecture
'use server' directive
100%
100%
'use client' directives
100%
100%
No directive mixing
100%
100%
page.tsx is server component
100%
100%
useActionState for form
100%
100%
useOptimistic for toggle
100%
100%
Promise handoff without await
100%
100%
Specific event types
100%
100%
Server action prevState param
100%
100%
Typed form state
100%
100%
No any types
100%
100%
TanStack Router type-safe routing setup
validateSearch with Zod
100%
100%
Zod search param types
100%
100%
createRoute usage
100%
100%
Typed loader function
100%
100%
useLoaderData with from
20%
100%
useSearch with from
100%
100%
useParams with from
0%
100%
Type-safe navigation
100%
100%
Route tree construction
100%
100%
getParentRoute defined
100%
100%
$param syntax
100%
100%
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.