skills.rest
SmallRob
SmallRobCOMMUNITY
Explore all skills by this author →
GitHub

react-dev

Enforce type-safe React 18–19 component, event, hook, and router patterns with TypeScript.

Updated Dec 15, 2025
Search Tags:#typescript#react#type-safe#react-19#event-handling#server-actions#router-integration
One-click install
npx skills add https://github.com/SmallRob/nice_today_android --skill react-dev-smallrob
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-dev
Source: https://github.com/SmallRob/nice_today_android/tree/main/.trae/skills/react-dev
Command: npx skills add https://github.com/SmallRob/nice_today_android --skill react-dev-smallrob

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill prevents React + TypeScript code from becoming fragile by standardizing type-safe patterns for components, event handlers, hooks, and route integration—especially during React 19 migrations.

Core Features & Use Cases

  • Type-safe React component patterns: extend native element props via React.ComponentPropsWithoutRef, strongly type children and render props, and use discriminated unions for variant behavior.
  • Correct event + form typing: apply precise React.*Event<...> types for mouse, keyboard, focus, drag-and-drop, clipboard, touch, and wheel handlers, plus typed form submission with FormData.
  • React 19 + Server Components readiness: cover ref as prop (no forwardRef), useActionState, and use() promise/context unwrapping along with Server Actions/client boundaries.
  • Routing type-safety integration: align component typing with TanStack Router (validated validateSearch, typed loader output) and React Router v7 (typed loader/action data via generated types).
  • Hook typing discipline: handle unions/null explicitly in useState, distinguish DOM refs vs mutable value refs in useRef, and type custom hooks with stable tuple/object returns.

Quick Start

Use the react-dev skill when generating a React 19 + TypeScript component that includes typed events and integrates with TanStack Router or React Router v7.

Frequently Asked Questions about react-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I type React synthetic events for mouse, keyboard, and drag-and-drop handlers in TypeScript?▼

Type React synthetic events by applying precise React.*Event<...> generics for mouse, keyboard, focus, drag-and-drop, clipboard, touch, and wheel handlers to ensure correct event handler typing.

How do I pass ref as a prop in React 19 without using forwardRef?▼

Pass ref as a prop in React 19 by passing it directly to function components instead of using forwardRef, aligning with the new ref-as-prop conventions for type-safe component development.

What's the best way to type TanStack Router search params and loader outputs?▼

Type TanStack Router search params and loader outputs by using validated validateSearch and typed loader output constraints, ensuring type-safe navigation and route integration.

How do I type Server Actions with useActionState and FormData in React 19?▼

Type Server Actions with useActionState and FormData in React 19 by handling typed form submission boundaries, use() promise/context unwrapping, and client boundaries for type-safe server communication.

How do I handle explicit union and null states in useState with TypeScript?▼

Handle explicit union and null states in useState by defining strict union types and null checks upfront, preventing runtime undefined errors and ensuring type-safe state transitions.

Does this React TypeScript typing approach work with React Router v7?▼

Yes, this approach works with React Router v7 by aligning component typing with typed loader and action data via generated types, ensuring type-safe routing integration.

Related Skills

Explore More Software Engineering Skills→
luyi985luyi985

tsconfig-options

Document TypeScript compiler options for reliable type checking.

Community
Intermediate
aRustyDevaRustyDev
7

lang-typescript-patterns-dev

Guide TypeScript development with strict compiler configurations and React component patterns.

Community
Advanced
hakushunhakushun

frontend-component

Create React components with TypeScript, Storybook stories, and tests.

Community
Basic
ovachieverovachiever
52

tanstack-start

Build full-stack React apps on Cloudflare Workers with TanStack Start.

Community
Advanced