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
Decision gist · record as of 2026-07-27
Component Library generates production-ready React components with shadcn/ui architecture and Tailwind CSS styling. 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.
Use it when
- Yes.
- Component Library includes built-in dark mode and responsive design across all components.
Verify before relying
Read SKILL.md below before installing (8 files). Open directory: indexed for reading, not audited.
Install
Bbeierle12/Skill-MCP-Claude/component-library · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Generate production-ready React components with minimal setup”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Tailwind Design System is a framework for constructing scalable design systems using Tailwind CSS v4's CSS-first configuration, semantic tokens, and component architecture. It covers design token hierarchies, dark mode setup with native CSS features, and patterns for building reusable components with variants and accessibility built in.
Shadcn Setup configures shadcn/ui components with modern Tailwind v4 CSS-first setup, installing dependencies and generating the required globals.css, components.json, and utility files. It handles theme selection, component installation, and ensures proper v4 configuration without deprecated patterns.
shadcn/ui helps you integrate beautifully designed, accessible components into React applications by copying them directly into your codebase rather than installing a library. You get full control over styling and behavior while maintaining zero runtime overhead. The skill guides component discovery, installation, customization, and provides patterns for forms, dialogs, and data display.
Create production-ready design systems and component libraries leveraging Tailwind CSS v4's CSS-first configuration, design tokens, and native theming. This skill covers token hierarchy, component architecture with CVA patterns, dark mode setup, and responsive design practices for standardizing UI across projects.
shadcn/ui provides production-ready React components you copy directly into your project rather than installing as a package. Built on Radix UI primitives and styled with Tailwind CSS, each component gives you full customization control and transparent implementation.
Master shadcn-ui's approach to building reusable components with CVA for variant management, Radix for accessible primitives, and Tailwind for styling. Covers CLI setup, the cn() utility, polymorphic rendering via asChild, compound component structure, and modern CSS selectors like has() for conditional layouts.
More skills ui-components (MIT) · design-to-component-translator (MIT) · tailwindcss-advanced-components (MIT) · shadcn-ui (MIT) · twig-component (MIT) · React Google Maps (unlicensed)