Does it support Tailwind CSS dark mode?

Yes, the skill is configured to include dark mode support using Tailwind's 'dark:' classes and includes specific stories for dark mode visualization.

Does it use the latest Storybook standards?

Yes, the skill generates stories using the Component Story Format 3 (CSF3), which is the most modern and concise way to write stories.

Are the generated components WCAG compliant?

Yes, components are designed to meet WCAG 2.1 AA standards, incorporating semantic HTML, ARIA attributes, and keyboard navigation support.

What testing frameworks does this skill support?

It generates unit tests using React Testing Library and user-event, and integrates jest-axe for automated accessibility verification.

How are the generated components organized?

You can choose to place components in a feature-based structure (src/features/[name]/components) or a global shared directory (src/components).

React Component Generator

Name: React Component Generator
Author: solrac97gr

bysolrac97gr

•

디자인 도구

Generates production-grade React components with TypeScript, Tailwind CSS styling, comprehensive unit tests, and Storybook stories.

This skill streamlines the React development workflow by scaffolding high-quality UI components that adhere to industry best practices. It automatically generates functional components with named exports, integrates Tailwind CSS for responsive and dark-mode-ready styling, and ensures WCAG 2.1 AA accessibility compliance. Every component comes pre-configured with a test suite using React Testing Library and jest-axe, along with Storybook CSF3 stories to allow for immediate visualization and documentation of variants in an isolated environment.

주요 기능

01Generates user-centric unit tests using React Testing Library and user-event.

02Creates Storybook stories using the modern CSF3 format for all component variants.

03Supports modular file organization for both feature-specific and shared components.

04Scaffolds React functional components with strict TypeScript typing and Tailwind CSS.

05Includes automated accessibility (a11y) testing with jest-axe and ARIA validation.

062 GitHub stars

사용 사례

01Accelerating the development of accessible, mobile-first UI elements with built-in testing.

02Building a consistent and documented design system for large-scale React applications.

03Standardizing component structure and testing patterns across a development team.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add solrac97gr/marketplace-plugins new-component

For use in Claude.ai and ChatGPT

Download Skill