react-typescript

Build React 19 applications with strict TypeScript typing and advanced patterns.

32|2|Updated Nov 5, 2025

Search Tags:#type safety #typescript #react #component patterns #react 19 #react compiler

Ready to run

npx skills add https://github.com/tenequm/skills --skill react-typescript-tenequm

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-typescript
Source: https://github.com/tenequm/skills/tree/main/skills/react-typescript
Command: npx skills add https://github.com/tenequm/skills --skill react-typescript-tenequm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides patterns and best practices for building robust, type-safe React applications using TypeScript, specifically leveraging the latest features in React 19 and TypeScript 5.9.

Core Features & Use Cases

React 19 Features: Master new patterns like use(), Activity, useEffectEvent, and ref as a prop.
React Compiler: Understand how to write plain components that are automatically optimized.
TypeScript Best Practices: Implement strict typing, discriminated unions, generic components, and Zod integration for robust state management and prop validation.
Use Case: When starting a new React project or refactoring an existing one to adopt modern React and TypeScript patterns, ensuring maintainability and developer productivity.

Quick Start

Use the react-typescript skill to create a new React component with strict TypeScript types.

Frequently Asked Questions about react-typescript

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

FAQPage Schema

How do I use the new use() hook in React 19 with TypeScript?▼

The use() hook in React 19 reads promises or context within components, requiring strict TypeScript typing to safely handle asynchronous state and unwrapped values.

What is the React Compiler and do I need it for type-safe components?▼

The React Compiler automatically optimizes plain components without manual memoization. You can build type-safe applications using standard TypeScript patterns and let the compiler handle render performance optimizations.

How do I type state management with discriminated unions in React?▼

Discriminated unions in TypeScript allow you to type state management by defining shared literal properties across object types, ensuring safe component authoring and exhaustive type checking for various UI states.

Can I use useEffectEvent in React 19 for strict TypeScript applications?▼

Yes, useEffectEvent is a React 19 hook that extracts non-reactive logic out of effects. Integrating it with strict TypeScript configuration ensures event logic remains type-safe without requiring effect re-firing on every render.

What's the best way to configure TypeScript for React 19 features?▼

Configure strict TypeScript settings by enabling strict mode and precise type checking to support React 19 features like Activity and useActionState, enhancing overall type safety and developer experience.

How do I integrate Zod validation with generic React components?▼

Integrate Zod with generic React components by defining runtime schemas that validate props and state, bridging the gap between compile-time TypeScript strict typing and runtime data validation for robust applications.