react-dev

Guide React development with TypeScript for type-safe components and hooks.

17|1|Updated Apr 20, 2022
One-click install
npx skills add https://github.com/jvegaf/harmony --skill react-dev-jvegaf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-dev
Source: https://github.com/jvegaf/harmony/tree/main/.agents/skills/react-dev
Command: npx skills add https://github.com/jvegaf/harmony --skill react-dev-jvegaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers build robust, type-safe React applications by providing best practices and patterns for TypeScript integration, hook usage, event handling, and modern React features.

Core Features & Use Cases

  • Type-Safe Components: Build reusable components with accurate prop and state typing.
  • Advanced Hook Patterns: Implement custom hooks and manage state effectively with useState, useReducer, and useContext.
  • Event Handling: Accurately type all DOM events for secure and predictable interactions.
  • React 19 Features: Understand and implement new patterns like useActionState, use(), and ref as props.
  • Generic Components: Create flexible, type-safe components like tables and selects.
  • Routing Integration: Apply type-safe patterns for TanStack Router and React Router.
  • Use Case: When building a complex form with multiple inputs, custom validation, and asynchronous submission, this Skill provides the patterns to ensure all props, states, and events are correctly typed, preventing runtime errors and improving maintainability.

Quick Start

Use the react-dev skill to create a type-safe React component for displaying a list of users with their names and emails.

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 component props and state in TypeScript?

To type React component props and state in TypeScript, define interfaces for props and use generics with useState, ensuring accurate prop typing and secure DOM event handling for robust, reusable components.

What's the best way to manage state in React using custom hooks?

The best way to manage state with custom hooks is using useReducer and useContext for complex state logic, providing type-safe patterns that prevent runtime errors and improve component maintainability.

How do I create generic React components for tables and selects?

Create generic React components by applying TypeScript generics to component definitions, allowing flexible, type-safe data handling for reusable UI elements like dynamic tables and select dropdowns.

Does this React 19 guide cover useActionState and the use() hook?

Yes, this React 19 guide covers useActionState and the use() hook, providing patterns to implement new features like ref as props and asynchronous submission for modern type-safe applications.

Can I apply type-safe routing patterns with TanStack Router and React Router?

Yes, you can apply type-safe routing patterns for TanStack Router and React Router, ensuring that route parameters and navigation remain fully typed and predictable throughout your application.