shadcn

Organize and activate shadcn/ui component workflows with registries and presets.

182|28|Updated Nov 29, 2025
One-click install
npx skills add https://github.com/julianromli/ai-skills --skill shadcn-julianromli
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/julianromli/ai-skills/tree/main/skills/shadcn
Command: npx skills add https://github.com/julianromli/ai-skills --skill shadcn-julianromli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the management and activation of shadcn/ui components and presets across projects, reducing setup time and ensuring consistent UI tooling.

Core Features & Use Cases

  • Centralized orchestration for adding, searching, fixing, debugging, styling, and composing UI with shadcn/ui.
  • Project context + docs: provides component docs, usage examples, and triggers for shadcn init, creating apps with a preset, or switching presets.
  • Registry and presets: guides across registries and a components.json based workflow to initialize and update UI kits in existing codebases.

Quick Start

Run shadcn init --preset <code> in your project to scaffold or update shadcn/ui components and presets.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I add and manage shadcn/ui components in an existing project?

To initialize shadcn/ui components, run the init command with a preset in your project directory. This scaffolds or updates your UI kits and requires loading the skill from a directory containing a SKILL.md frontmatter file.

What is a components.json based workflow for UI design systems?

A components.json based workflow is a process to initialize and update UI kits in existing codebases. It uses registries and presets to guide the setup, ensuring consistent UI tooling and reducing configuration time across frontend projects.

Can I use shadcn presets to scaffold a new frontend app?

Yes, you can use shadcn presets to scaffold a new frontend app. The workflow supports creating applications with a preset or switching presets, allowing you to quickly establish a consistent design system and component architecture.

Do I need a specific directory structure to automate shadcn/ui workflows?

Yes, automating shadcn/ui workflows requires placing the skill in a directory containing a SKILL.md frontmatter file. Optional scripts, references, and assets are then loaded on demand to support the component orchestration tasks.

What's the best way to fix and debug shadcn/ui components?

The best way to fix and debug shadcn/ui components is through a centralized orchestration process that provides component docs and usage examples. This workflow applies triggers to initialize, style, and compose UI effectively.