skills.rest
rafifos
rafifosCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

Manage shadcn/ui components and presets via components.json commands.

6|Updated Mar 24, 2019
Search Tags:#automation#ui#components#cli#registry#shadcn#presets
One-click install
npx skills add https://github.com/rafifos/dotfiles --skill shadcn-rafifos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/rafifos/dotfiles/tree/main/dot_agents/skills/shadcn
Command: npx skills add https://github.com/rafifos/dotfiles --skill shadcn-rafifos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes the management and lifecycle of shadcn/ui components and project context, enabling streamlined maintenance of components, docs, and presets across a project.

Core Features & Use Cases

  • Add, search, fix, debug, style, and compose UI using shadcn/ui components.
  • Provide project context, component docs, and usage examples for quick adoption.
  • Triggers for shadcn init, creating apps with a preset, or switching presets to keep projects aligned.

Quick Start

Run shadcn init --preset base-nova in your project to scaffold the UI framework, then use shadcn add to install components.

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 my existing project?▼

To manage shadcn/ui components, use commands like shadcn add to install and compose UI components. The automation handles searching, fixing, debugging, and styling while providing project context and component documentation.

What is a shadcn/ui preset and when do I need to switch presets?▼

A shadcn/ui preset is a predefined configuration for scaffolding UI frameworks. You need to switch presets when aligning a project to different design standards, triggered by commands like shadcn init with a specific preset name.

Do I need a components.json file to use shadcn/ui automation?▼

Yes, a components.json file is required. The automation operates exclusively with projects that include this file to accurately manage the lifecycle, documentation, and styling of shadcn/ui components.

What's the best way to scaffold a new app using a shadcn/ui preset?▼

The best way to scaffold an app using a shadcn/ui preset is running shadcn init --preset base-nova. This sets up the UI framework, allowing you to subsequently use shadcn add to install components.

Why does my shadcn/ui component styling break after switching presets?▼

Styling breaks after switching presets due to misaligned configuration contexts. The automation fixes and debugs these UI components by referencing the updated project context and component documentation.

Related Skills

Explore More Software Engineering Skills→
rahul-s-bhattrahul-s-bhatt

shadcn

Manage shadcn/ui component workflows with CLI commands and components.json configurations.

Community
Advanced
ngocp-0847ngocp-0847
1

ui-styling

Compose React UIs using shadcn/ui components with Tailwind CSS styling.

Community
Advanced
vuralserhat86vuralserhat86
43

web_artifacts_builder

Generate React web interfaces with Tailwind CSS and shadcn/ui components.

Community
Intermediate
iressiress
1

ui-translation

Translate natural language UI descriptions into IDS component code templates.

Official
Intermediate