component-library
Component Library generates fully-typed React components using shadcn/ui patterns, CVA variants, and Radix UI primitives—eliminating hours of hand-coding. Choose from form inputs, data tables, navigation, feedback overlays, and layout components, all with built-in accessibility, dark mode, and responsive design.
Component Library generates production-ready React components with shadcn/ui architecture and Tailwind CSS styling.
AI-generated summary based on this skill's SKILL.md
Install
Bbeierle12/Skill-MCP-Claude/component-library · repository language: JavaScript
git clone https://github.com/Bbeierle12/Skill-MCP-Claude
cp -r Skill-MCP-Claude/skills/component-library ~/.claude/skills/component-librarynpx skillfed install Bbeierle12/Skill-MCP-Claude/component-libraryFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is component-library and how does it help with React development?
Component Library generates production-ready React components using shadcn/ui patterns, CVA variants, and Radix UI primitives. It eliminates hours of hand-coding by providing fully-typed, accessible components with built-in dark mode and responsive design. Choose from form inputs, data tables, navigation, feedback overlays, and layout components—all ready to integrate into your projects with minimal setup.
Can component-library generate production ready React components?
Yes. Component Library specializes in generating production-ready React components with minimal setup. Every component is fully-typed, tested, and follows shadcn/ui architecture patterns. You get immediate access to form inputs, data tables, modals, navigation systems, and more—all built on Radix UI primitives and styled with Tailwind CSS for instant deployment.
How does component-library support dark mode and responsive design?
Component Library includes built-in dark mode and responsive design across all components. Every element adapts seamlessly to light and dark themes, and responsive breakpoints are pre-configured using Tailwind CSS. No additional theming work is required—toggle dark mode and your entire component system responds automatically.
Does component-library work with React Hook Form?
Yes. Component Library provides form components with React Hook Form integration, enabling you to build validated forms quickly. Form inputs, selects, checkboxes, and other controls are pre-wired for Hook Form patterns, reducing boilerplate and ensuring consistent validation across your application.
What component types are available in component-library?
Component Library offers form components (inputs, selects, checkboxes, textareas), data display (tables with sorting and pagination), navigation (menus, breadcrumbs, tabs), feedback overlays (modals, dialogs, alerts, toasts), and layout components. All are accessible, fully-typed, and built on Radix UI with Tailwind styling.
Is component-library open source and what license does it use?
Yes. Component Library is MIT-licensed, making it free to use, modify, and distribute in both personal and commercial projects. The MIT license provides maximum flexibility while requiring attribution.
SKILL.md
rendered from the published skill — quoted content, verbatim
Component Library - shadcn/ui Architecture
Generate production-ready React components with shadcn/ui patterns, saving 8-10 hours per project.
Quick Start
When generating components:
1. Create /components/ui/ directory structure
2. Generate lib/utils.ts with cn() helper first
3. Create requested components with full TypeScript, variants, and accessibility
4. Include example usage for each component
Core Setup Files
Always generate these first:
lib/utils.ts -
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 8 files
skills/component-library/SKILL.md
skills/component-library/_meta.json
skills/component-library/references/animation-patterns.md
skills/component-library/references/data-tables.md
skills/component-library/references/form-patterns.md
skills/component-library/references/testing-setup.md
skills/component-library/scripts/generate-component.py
skills/component-library/scripts/setup-tailwind.py