Can it help with routing?

Absolutely. It provides type-safe implementation patterns for both TanStack Router and React Router v7, including loader data and search param validation using Zod.

Is it strictly for TypeScript?

Yes, this skill is designed specifically for React projects using TypeScript to ensure maximum type safety, confident refactoring, and compile-time guarantees.

Does it provide guidance on Server Components?

Yes, it covers async data fetching in Server Components, the 'use server' directive for mutations, and passing promises from server to client components.

How does it handle event typing?

It enforces the use of specific React event types (e.g., MouseEvent, ChangeEvent) rather than 'any' to ensure accurate target typing and better IDE autocompletion.

Does this skill support React 19 features?

Yes, it includes specific patterns for React 19, including Server Components, Actions, the use() hook, and the new ref-as-a-prop pattern which replaces forwardRef.

React TypeScript Development

Name: React TypeScript Development
Author: Microck

byMicrock

•

设计工具

Accelerates the creation of type-safe React applications using modern patterns for React 18 and 19.

This skill provides a comprehensive set of patterns and best practices for building robust React applications with TypeScript. It covers essential topics like component architecture, event handling, and hook typing, while specifically addressing the architectural shifts in React 19 such as Server Components, Actions, and the deprecation of forwardRef. It ensures developers maintain compile-time guarantees and implement type-safe routing using industry-standard libraries like TanStack Router and React Router v7, making it an essential companion for modern frontend engineering.

主要功能

01Advanced hook typing for useReducer, useRef, and custom hook tuples

02Detailed event handler typing for forms, mouse, and keyboard interactions

032 GitHub stars

04Deep integration with TanStack Router and React Router v7 framework mode

05Type-safe component architecture for generic and discriminated union props

06React 19 migration patterns including Actions and the use() hook

使用场景

01Building complex, reusable generic UI components like tables and forms

02Migrating an existing React application to the React 19 architecture

03Implementing type-safe routing and server-side data fetching architectures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck react-dev

For use in Claude.ai and ChatGPT