skills.rest
yukieiji
yukieijiCOMMUNITY
Explore all skills by this author →
𝕏@yukieijiGitHub

shadcn

Manage shadcn components and projects via CLI commands.

Updated Mar 19, 2026
Search Tags:#project setup#ui components#shadcn#component management#CLI integration
One-click install
npx skills add https://github.com/yukieiji/extremeroles.webui --skill shadcn-yukieiji
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/yukieiji/extremeroles.webui/tree/main/.gemini/skills/shadcn
Command: npx skills add https://github.com/yukieiji/extremeroles.webui --skill shadcn-yukieiji

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires shadcn, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the management of shadcn components and projects, enabling efficient addition, searching, and debugging of UI components.

Core Features & Use Cases

  • Component Management: Adds, searches, and fixes shadcn UI components.
  • Project Context: Provides project configuration and component documentation.
  • CLI Integration: Uses project-specific CLI commands for adding components and applying presets.

Quick Start

Use the shadcn skill to add a button component to your project by running the command: npx shadcn@latest add button.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I add shadcn UI components to my existing project?▼

You can add shadcn UI components by running the project-specific CLI command `npx shadcn@latest add [component]`, which fetches and installs the component files directly into your codebase.

What is a components.json file used for in shadcn project configuration?▼

A components.json file manages shadcn project configuration by defining path aliases, component locations, and styling tokens, enabling the CLI to correctly resolve and generate UI component files.

How do I create an app with a shadcn preset using the CLI?▼

Create an app with a shadcn preset by executing `create an app with --preset` or `shadcn init`, which bootstraps the project structure and automatically applies the designated preset configuration.

Does the shadcn skill support debugging and styling existing UI components?▼

Yes, the shadcn skill supports debugging and styling existing UI components by providing project context, component documentation, and targeted fixes for managing component registries and styling overrides.

Why is my shadcn init command not working when switching to a new preset?▼

If `shadcn init` fails when switching to a new preset, ensure your components.json file is correctly configured and that you are using the proper `--preset` code syntax required by the component registry.

Related Skills

Explore More Software Engineering Skills→
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced
rauell1rauell1
3

frontend-design

Design and build distinctive frontend interfaces with cohesive typography, color, motion, and layout.

Community
Advanced
marcioaltoemarcioaltoe
14

web-tests

Generate and execute Playwright test scripts for browser UI automation.

Community
Advanced
MinhDuyDEVMinhDuyDEV

shadcn-ui

Manage shadcn/ui component installation and configuration workflows via CLI.

Community
Advanced