How does it handle form validation?

The skill implements React Hook Form integrated with Zod schemas to ensure robust, type-safe form validation and state management.

Can I use this for Web3 or security-sensitive projects?

Yes, the skill includes specific guidelines for Web3 security best practices, secure logging, and error handling boundaries.

What architecture does this skill enforce?

It uses the Container/Presenter pattern, which separates data fetching and logic (Container) from pure UI rendering (Presenter) to improve testability and reuse.

Does it help with component documentation?

Absolutely. It generates Storybook stories for loading, error, empty, and ready states to ensure comprehensive UI documentation.

Does it support the latest version of Tailwind CSS?

Yes, it is specifically configured for Tailwind CSS v4, utilizing modern utility-first styling and the cn() utility for conditional classes.

React Component Architect

Name: React Component Architect
Author: aaronbassett

byaaronbassett

设计工具

Engineers production-grade React components using strict TypeScript patterns, container/presenter architecture, and composition-first design.

关于

The React Component Architect skill streamlines frontend development by enforcing professional standards and scalable design patterns within Claude Code. It provides automated scaffolding for feature-based structures, separating logic from UI through the Container/Presenter pattern while integrating modern tools like Tailwind CSS v4, TanStack Query, and Zod. Whether creating new features or auditing existing code for Web3 security and accessibility, this skill ensures your codebase remains clean, type-safe, and adherent to KISS/YAGNI principles.

主要功能

Strict TypeScript enforcement with explicit return types and interfaces
Automated scaffolding for Container/Presenter component pairs
Built-in integration for TanStack Query and React Hook Form with Zod
0 GitHub stars
Standardized Storybook configuration for multiple component states
Security and accessibility (a11y) auditing for React UI

使用场景

Refactoring monolithic components into modular, headless patterns
Rapidly generating boilerplate for complex feature-based UI modules
Performing comprehensive code reviews for performance and security

关于

主要功能

Strict TypeScript enforcement with explicit return types and interfaces
Automated scaffolding for Container/Presenter component pairs
Built-in integration for TanStack Query and React Hook Form with Zod
0 GitHub stars
Standardized Storybook configuration for multiple component states
Security and accessibility (a11y) auditing for React UI

使用场景

Refactoring monolithic components into modular, headless patterns
Rapidly generating boilerplate for complex feature-based UI modules
Performing comprehensive code reviews for performance and security