Is it compatible with older React versions?

The skill is specifically designed for React 18+ and modern functional components, focusing on hooks and the latest ecosystem tools.

How does it handle form validation?

It promotes the use of React Hook Form combined with Zod for robust, type-safe schema validation and error handling.

What styling framework does it use?

It is optimized for Tailwind CSS, utilizing the cn() utility for dynamic class merging and shadcn/ui for consistent UI components.

Does this skill support Next.js?

Yes, it includes specific patterns for the Next.js App Router, including directory structures and Server vs. Client component distinctions.

Does it include TypeScript best practices?

Yes, it enforces strict type safety using interfaces for extendable objects, generics for reusable hooks, and explicit event handler types.

Modern React & TypeScript Expert

Name: Modern React & TypeScript Expert
Author: onmyway133

byonmyway133

•

デザインツール

Builds production-ready React applications using TypeScript, Tailwind CSS, and shadcn/ui with industry-standard patterns.

This skill transforms Claude into a senior React engineer specializing in the modern frontend ecosystem. It provides standardized project structures for Next.js and React 18+, type-safe patterns for TypeScript interfaces and generics, and implementation guides for Tailwind CSS and shadcn/ui. Whether you are building complex forms with React Hook Form and Zod or optimizing performance with memoization, this skill ensures consistent naming conventions, efficient data fetching patterns, and robust error handling across your entire codebase.

主な機能

01Tailwind CSS styling patterns with the cn() utility and responsive design

02Advanced React patterns including custom hooks and memoization

033 GitHub stars

04Type-safe component development with TypeScript interfaces and generics

05Modern data fetching strategies for Server and Client components

06Standardized shadcn/ui component integration and management

ユースケース

01Scaffolding new React features with consistent directory structures

02Implementing complex forms with Zod validation and React Hook Form

03Refactoring components to use shadcn/ui and modern Tailwind patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add onmyway133/claude-code-plugins react

For use in Claude.ai and ChatGPT

Download Skill