skills.rest
pluginagentmarketplace
pluginagentmarketplaceCOMMUNITY
Explore all skills by this author →
GitHub

component-library

Build accessible React component libraries with Storybook and npm publishing workflows.

1|Updated Nov 18, 2025
Search Tags:#documentation#a11y#React#build#storybook#design-tokens#component-library
One-click install
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-react --skill component-library-pluginagentmarketplace
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-library
Source: https://github.com/pluginagentmarketplace/custom-plugin-react/tree/main/skills/component-library
Command: npx skills add https://github.com/pluginagentmarketplace/custom-plugin-react --skill component-library-pluginagentmarketplace

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps teams build accessible, reusable React component libraries, streamlining design-system work and reducing duplication across applications.

Core Features & Use Cases

  • Reusable component APIs designed for composability and accessibility with WCAG 2.1 compliance.
  • Storybook-based documentation, visual testing, and design-token integration for consistent UI.
  • Publishing-ready output with npm packaging and TypeScript support.

Quick Start

Install the skill in your Claude environment and begin scaffolding a reusable Button, Input, and Modal library with Storybook integration.

Frequently Asked Questions about component-library

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an accessible React component library with WCAG compliance?▼

Build an accessible React component library by using predefined templates for Button, Input, Modal, and Tabs that enforce WCAG 2.1 compliance, composability, and frontmatter metadata for reusable design-system APIs.

How do I integrate Storybook documentation and design tokens into a React UI library?▼

Integrate Storybook documentation and design tokens into a React UI library through predefined templates that enable visual testing, design-token integration, and consistent UI documentation across all components.

Can I use this to scaffold TypeScript React components for npm publishing?▼

Yes, you can scaffold TypeScript React components for npm publishing. The skill generates publishing-ready output with npm packaging and TypeScript support for reusable component libraries.

What's the best way to reduce UI duplication across multiple React web apps?▼

Reduce UI duplication across React web apps by building a centralized, reusable component library with consistent design tokens, Storybook documentation, and accessible component APIs that can be shared across applications.

Does this skill support scaffolding specific components like Modal and Tabs?▼

Yes, this skill supports scaffolding Modal and Tabs components, along with Button and Input. It targets design systems with scenarios for these specific components, enforcing accessibility and composability.

Do I need any external dependencies to start scaffolding a React component library?▼

No external dependencies are required to start scaffolding. The skill includes predefined dependencies and templates, allowing you to begin building a reusable Button, Input, and Modal library with Storybook integration immediately.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
TitoPrauseeTitoPrausee

vite-react-library-setup

Convert an unbuilt React project into a publishable Vite 5 library.

Community
Intermediate
juburrjuburr
1

react-storybook

Build and validate React-TypeScript components with Storybook CSF3 stories.

Community
Advanced
lemulemu

web-component-design

Design portable component APIs across React, Vue, and Svelte.

Community
Advanced