devs:react-components

What problem does it solve?

This Skill provides a structured approach to creating and reviewing React components using strict TypeScript patterns, the container/presenter architecture, and composition-first design. It helps teams maintain consistency, enforce best practices, and accelerate UI development.

Core Features & Use Cases

• Scaffolding: Generate boilerplate for new feature components with consistent file layouts.
• Review & Quality: Audit existing components for TypeScript correctness, accessibility, and alignment with patterns described in references.
• Form & Data Fetching: Integrate forms using RHF+Zod and fetch data with TanStack Query within the container/presenter pattern.
• Use Case: For a new feature like UserProfile, scaffold and wire a Container and Presenter pair, a UI folder, tests, and documentation.

Quick Start

Request: Create a new feature component for UserProfile using the scaffold-component.mjs tool and structure following the project conventions.