skills.rest
Joel-barriosnuevo
Joel-barriosnuevoCOMMUNITY
Explore all skills by this author →
GitHub

react-dev

Build type-safe React components with TypeScript and routing integrations.

Updated May 29, 2025
Search Tags:#typescript#react#routing#hooks#generics#server-components#event-typing
One-click install
npx skills add https://github.com/Joel-barriosnuevo/RockaEterna --skill react-dev-joel-barriosnuevo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-dev
Source: https://github.com/Joel-barriosnuevo/RockaEterna/tree/main/.agents/skills/react-dev
Command: npx skills add https://github.com/Joel-barriosnuevo/RockaEterna --skill react-dev-joel-barriosnuevo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of building robust, type-safe React components with TypeScript, including typed hooks, events, and routing integration to prevent runtime type errors.

Core Features & Use Cases

  • Type-safe component patterns and generic props for scalable UI libraries.
  • Typed event handlers (MouseEvent, ChangeEvent, etc.) and proper React 18-19 patterns.
  • Use cases include server components, server actions, and routing integration with TanStack Router and React Router.

Quick Start

Start by implementing a typed Button component with a generic prop type and a sample event handler to demonstrate end-to-end type safety.

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 event handlers like MouseEvent and ChangeEvent in TypeScript?▼

To type React event handlers in TypeScript, use React.MouseEvent and React.ChangeEvent generics for your handler functions. This enforces strict type safety for event targets and prevents runtime type errors.

What's the best way to build generic React components with TypeScript props?▼

The best way to build generic React components is using discriminated unions for props and generic component patterns. This approach enables scalable, maintainable UI libraries with strict type safety.

Does this TypeScript pattern work with React Server Components and Server Actions?▼

Yes, these type-safe TypeScript patterns fully support React Server Components and Server Actions. They enforce proper typing across component design and server integrations to prevent runtime type errors.

How do I integrate type-safe routing with TanStack Router or React Router in React 18-19?▼

To integrate type-safe routing with TanStack Router or React Router in React 18-19, apply typed hooks and strict event typing patterns. This ensures end-to-end type safety across your routing integrations.

Why should I use discriminated unions for React component props instead of optional fields?▼

Discriminated unions for React component props enforce strict type safety by narrowing component variants, unlike optional fields. This prevents invalid prop combinations and enables scalable, maintainable UIs.

Related Skills

Explore More Software Engineering Skills→
b33eepb33eep
57

standards-typescript

Enforce TypeScript coding standards across .ts, .tsx, and .jsx files.

Community
Basic
KILWA73KILWA73

typescript-mastery

Enforce strict TypeScript typing with generics, mapped types, and Zod validation.

Community
Advanced
abereghiciabereghici

react-router

Provide type-safe React bindings for TanStack Router routes and navigation.

Community
Advanced
itsimonfredlingjackitsimonfredlingjack

trpc-type-safety

Define tRPC server routers with Zod input validation for end-to-end type safety.

Community
Advanced