skills.rest
GDSDN
GDSDNCOMMUNITY
Explore all skills by this author →
GitHub

bootstrap-shadcn-library

Install and configure a Shadcn UI component library with Tailwind v4 and design tokens.

3|Updated Feb 7, 2026
Search Tags:#design system#component library#tailwind css#ui components#shadcn#radix
One-click install
npx skills add https://github.com/GDSDN/kord-aios --skill bootstrap-shadcn-library
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bootstrap-shadcn-library
Source: https://github.com/GDSDN/kord-aios/tree/main/src/features/builtin-skills/kord-aios/design-system/bootstrap-shadcn-library
Command: npx skills add https://github.com/GDSDN/kord-aios --skill bootstrap-shadcn-library

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the setup and integration of a modern component library using Shadcn UI, Radix primitives, and Tailwind CSS, streamlining UI development.

Core Features & Use Cases

  • Component Initialization: Sets up the Shadcn CLI and installs essential UI components.
  • Tokenization & Theming: Aligns components with project design tokens and ensures dark mode compatibility.
  • Utility Integration: Configures shared utilities like cn and cva for consistent styling.
  • Use Case: Kickstart a new project's UI by quickly bootstrapping a robust, accessible, and themeable component library that adheres to your design system.

Quick Start

Run the bootstrap-shadcn-library skill to initialize the Shadcn UI component library in your project.

Frequently Asked Questions about bootstrap-shadcn-library

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

FAQPage Schema
How do I bootstrap a Shadcn UI component library in my project?▼

To bootstrap a Shadcn UI component library, run the skill to install the Shadcn CLI, configure Tailwind v4 and Radix primitives, and establish shared utilities like cn and cva for consistent project styling.

What's the best way to integrate Radix primitives with Tailwind CSS v4?▼

Integrating Radix primitives with Tailwind CSS v4 is handled by configuring shared utilities and aligning design tokens, which ensures accessible UI components maintain dark mode compatibility and consistent styling across your project.

Does this Shadcn UI setup support dark mode and custom design tokens?▼

Yes, the Shadcn UI setup supports dark mode and custom design tokens by aligning Radix primitives with your project's specific theming configuration to ensure flexible and consistent visual output.

Can I use this to initialize UI components for autonomous and interactive workflows?▼

Yes, you can initialize UI components for autonomous and interactive workflows, as the setup supports autonomous, interactive, and pre-flight planning modes to integrate flexibly with your development process.

Why do I need to configure shared utilities like cn and cva when setting up a component library?▼

You need to configure shared utilities like cn and cva during component library setup to merge Tailwind classes consistently and create variant-driven component styles, ensuring predictable theming and styling behavior.

Related Skills

Explore More Design & Creative Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
kettleofketchupkettleofketchup
13

ui-styling

Configures shadcn/ui and Tailwind CSS styling layers for React projects.

Community
Intermediate
launchapp-devlaunchapp-dev
38

theming-system

Design scalable theming architecture with layered tokens for runtime theme switching.

Official
Advanced
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate