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

0•

Design Tools

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.

Key Features

01Strict TypeScript enforcement with explicit return types and interfaces

02Automated scaffolding for Container/Presenter component pairs

03Built-in integration for TanStack Query and React Hook Form with Zod

040 GitHub stars

05Standardized Storybook configuration for multiple component states

06Security and accessibility (a11y) auditing for React UI

Use Cases

01Refactoring monolithic components into modular, headless patterns

02Rapidly generating boilerplate for complex feature-based UI modules

03Performing comprehensive code reviews for performance and security

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aaronbassett/aaronbassett-marketplace react-components

For use in Claude.ai and ChatGPT

Download Skill