Does it support automated documentation?

Yes, it features deep integration with Storybook 7+, providing CSF3 templates and console logging for observability.

What frameworks does this skill support?

This skill is specifically optimized for React development, utilizing TypeScript (TSX) for type safety and Storybook for component documentation.

How does it handle web accessibility?

The skill implements WCAG 2.1 standards by default, including proper ARIA attributes, focus management for modals, and keyboard navigation patterns.

Can I use this for existing React projects?

Yes, it is designed to help both in bootstrapping new libraries and refactoring existing UI components to follow modern design patterns.

What testing tools are integrated with this skill?

The skill provides standardized templates for Jest and includes implementation patterns for error boundaries and prop validation.

React Component Library Architect

Name: React Component Library Architect
Author: pluginagentmarketplace

bypluginagentmarketplace

•

设计工具

Builds production-grade, accessible React component libraries using Storybook, design tokens, and modern architectural patterns.

This skill empowers developers to create robust, enterprise-ready React component libraries by providing expert guidance on accessibility (WCAG 2.1), composable design patterns, and comprehensive documentation. It streamlines the creation of complex UI elements like Modals, Dropdowns, and Compound Tabs while ensuring industry best practices for Storybook integration, TypeScript typing, and npm distribution are strictly followed. Ideal for teams looking to establish a consistent design system or refactor legacy UI code into a modular, testable architecture.

主要功能

01Advanced React patterns including Compound Components and Forwarding Refs

02Design system foundation using design tokens and flexible APIs

03Automated Storybook integration with CSF3 templates for documentation

04Comprehensive testing templates using Jest for component reliability

05Accessible component implementation following WCAG 2.1 standards

061 GitHub stars

使用场景

01Ensuring high accessibility compliance across a complex React application suite

02Refactoring rigid, monolithic components into flexible, composable building blocks

03Bootstrapping a new corporate design system with standardized UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pluginagentmarketplace/custom-plugin-react component-library

For use in Claude.ai and ChatGPT

Download Skill