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

•

Herramientas de Diseño

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

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.

Características Principales

01Interactive requirement gathering to ensure correct component scope and variants

02Automated component boilerplate generation with TypeScript types and barrel exports

03Built-in support for Storybook 9 with autodocs and custom decorators

04Implementation of semantic Tailwind CSS v4 design tokens for consistent styling

0518 GitHub stars

06Enforcement of architectural separation between core and page-scoped components

Casos de Uso

01Standardizing a React project's component directory following the Lab architecture patterns

02Building a new reusable UI library element like a Tooltip or Modal with full Storybook documentation

03Developing page-specific interactive components that integrate with business logic and hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ethpandaops/lab create-new-component

For use in Claude.ai and ChatGPT

Download Skill