What is the difference between Core and Page-Scoped components?

Core components are generic, reusable elements that require Storybook stories. Page-Scoped components are specific to a page, allow business logic/hooks, and do not require Storybook files.

Does this skill support Tailwind CSS v4?

Yes, it is specifically configured to use Tailwind CSS v4 semantic color tokens like bg-surface, text-muted, and border-border to ensure design system consistency.

Can I use Heroicons with this skill?

Absolutely. The skill includes specific patterns for handling Heroicons v2, including icon cloning for consistent sizing and styling.

Does the skill handle accessibility?

Yes, the skill enforces the use of Headless UI v2 for interactive components and includes a checklist to verify ARIA attributes and roles.

React Component Architect

Name: React Component Architect
Author: ethpandaops

byethpandaops

•

Design Tools

Generates standardized React components with TypeScript, Tailwind CSS v4, and Storybook integration following strict architectural patterns.

About

This skill streamlines the creation of React components within the Lab architecture, ensuring consistency between core reusable UI elements and page-specific components. It automates the generation of TypeScript types, semantic Tailwind styling, and Storybook stories while enforcing best practices like forwardRef, Headless UI integration, and composability. By managing boilerplate and folder structures, it allows developers to focus on component logic and design while maintaining a high-quality, documented codebase.

Key Features

Interactive requirement gathering to ensure correct component scope and variants
Automated component boilerplate generation with TypeScript types and barrel exports
Built-in support for Storybook 9 with autodocs and custom decorators
Implementation of semantic Tailwind CSS v4 design tokens for consistent styling
18 GitHub stars
Enforcement of architectural separation between core and page-scoped components

Use Cases

Standardizing a React project's component directory following the Lab architecture patterns
Building a new reusable UI library element like a Tooltip or Modal with full Storybook documentation
Developing page-specific interactive components that integrate with business logic and hooks

About

Key Features

Interactive requirement gathering to ensure correct component scope and variants
Automated component boilerplate generation with TypeScript types and barrel exports
Built-in support for Storybook 9 with autodocs and custom decorators
Implementation of semantic Tailwind CSS v4 design tokens for consistent styling
18 GitHub stars
Enforcement of architectural separation between core and page-scoped components

Use Cases

Standardizing a React project's component directory following the Lab architecture patterns
Building a new reusable UI library element like a Tooltip or Modal with full Storybook documentation
Developing page-specific interactive components that integrate with business logic and hooks