react-typescript-patterns

Document React 19 and TypeScript patterns with Vike SSR and TanStack Query.

5|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/jeanpaulsio/nunchuck-skills --skill react-typescript-patterns-jeanpaulsio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-typescript-patterns
Source: https://github.com/jeanpaulsio/nunchuck-skills/tree/main/skills/react-typescript-patterns
Command: npx skills add https://github.com/jeanpaulsio/nunchuck-skills --skill react-typescript-patterns-jeanpaulsio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide a centralized, production-ready reference for React and TypeScript patterns that ensures consistency and accelerates onboarding across frontend projects.

Core Features & Use Cases

  • Production-grade patterns for React 19, TypeScript, Vike SSR, and TanStack Query data fetching.
  • Guidance on component composition, hooks, testing with Vitest/RTL, accessibility, and performance optimization.
  • Use cases include scaffolding new features, code reviews, and developer onboarding across teams.

Quick Start

Ask the agent to apply React/TypeScript patterns to your production app and scaffold example components.

Frequently Asked Questions about react-typescript-patterns

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

FAQPage Schema
What are production-grade React and TypeScript patterns for component composition?

Production-grade React and TypeScript patterns provide centralized references for component composition, hooks, and accessibility to ensure consistency across frontend teams building React 19 applications.

How do I scaffold new React 19 features using TypeScript and Vike SSR?

To scaffold new React 19 features, apply production-ready TypeScript patterns that integrate Vike SSR for server-side rendering and TanStack Query for data fetching to ensure scalable component architecture.

Does this React TypeScript pattern reference include Vitest and RTL testing guidance?

Yes, the React TypeScript pattern reference includes comprehensive testing guidance using Vitest and React Testing Library (RTL) to validate component behavior and ensure accessibility compliance across your application.

Can I use these React and TypeScript patterns for team onboarding and code reviews?

Yes, you can use these React and TypeScript patterns during team onboarding and code reviews to enforce production-ready standards, ensuring consistent component composition and accessibility best practices across developers.

What's the best way to structure TanStack Query data fetching in a React TypeScript app?

The best way to structure TanStack Query data fetching involves applying production-grade TypeScript patterns that standardize hook usage and component composition, ensuring maintainable and performant data layer implementation.