skills.rest
gabrielnsmnto
gabrielnsmntoCOMMUNITY
Explore all skills by this author →
GitHub

bootstrap-shadcn-library

Installs and configures a Shadcn/Radix component library with Tailwind v4 design tokens.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up a Shadcn UI component library involves many manual steps: initializing the CLI, installing Radix primitives, mapping components to design tokens, and creating documentation. This Skill provides a structured workflow that bootstraps the entire library consistently. ## Core Features & Use Cases - Guided Shadcn CLI Setup: Initializes the Shadcn CLI with Tailwind v4-compatible paths, TypeScript, and Radix defaults. - Token Mapping & Variants: Replaces hardcoded colors with semantic design tokens, configures cn and cva utilities, and standardizes Spinner/loading patterns. - Documentation Scaffold: Generates component docs and optional Storybook stories, and records state in .state.yaml. - Use Case: When starting a new React/Next.js project, run this workflow to install core components (button, input, card, badge, skeleton, spinner), align them with your design system tokens, and produce documentation in one pass. ## Quick Start Ask the agent to bootstrap a Shadcn component library with Tailwind v4 tokens for your React 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 set up Shadcn UI with Tailwind v4?▼

Run npx shadcn@latest init to configure component paths, TypeScript, and Tailwind defaults, then add core components like button, input, and card. Map hardcoded colors to semantic tokens such as bg-primary and add dark mode variants.

How to add Radix primitives to a Shadcn project?▼

Install the required Radix packages such as @radix-ui/react-slot alongside Shadcn components, since Shadcn builds on Radix primitives. Verify accessibility attributes and focus management remain intact after installation.

Does Shadcn UI work with Next.js and TypeScript?▼

Yes, Shadcn is designed for React and Next.js projects with TypeScript. The CLI init step configures paths for components and lib/utils.ts, and requires Node.js 18 or later.

Why does the Shadcn CLI install fail partway through?▼

Partial installs usually come from version mismatches or interrupted network requests. Delete the partially created files and rerun npx shadcn@latest init, then align Radix package versions with your lockfile.

How do I keep Shadcn components updated after installation?▼

Shadcn uses a copy/paste model, so components do not update automatically. Document any manual overrides and schedule regular audits to intentionally pull upstream improvements into your components/ui directory.

Related Skills

Explore More Design & Creative Skills→
blockmatic-iceboxblockmatic-icebox
4

Tailwind v4 + shadcn/ui

Convert Tailwind v4 design tokens into a CSS-variable theming system for React apps.

Official
Advanced
SUN-UnderwritingSUN-Underwriting

tailwind-design-system

Create Tailwind CSS design systems with tokens, variants, theming, and accessibility.

Official
Advanced
acaprinoacaprino
6

radix-ui

Guide building accessible Radix UI components with asChild composition and theming.

Community
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate