skills.rest
j19800824
j19800824COMMUNITY
Explore all skills by this author →
GitHub

shadcn

Guide shadcn/ui component creation, maintenance, and debugging in React projects.

Updated Aug 27, 2026
Search Tags:#frontend#react#design system#tailwind#ui components#shadcn#component registry
One-click install
npx skills add https://github.com/j19800824/miliguan --skill shadcn-j19800824
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/j19800824/miliguan/tree/main/apps/admin/.agents/skills/shadcn
Command: npx skills add https://github.com/j19800824/miliguan --skill shadcn-j19800824

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers build, maintain, and debug shadcn/ui component systems without guessing component APIs, styling conventions, or CLI workflows.

Core Features & Use Cases

  • Component Management: Add, search, update, and compose shadcn/ui components while following project configuration and registry rules.
  • UI Development Guidance: Provides patterns for forms, dialogs, cards, icons, styling, theming, accessibility, and component composition.
  • Use Case: A developer building an admin dashboard can use this Skill to select the right shadcn components, generate compliant React code, and troubleshoot integration issues.

Quick Start

Use the shadcn skill to help me create or fix a shadcn/ui component following my project's configuration and best practices.

Frequently Asked Questions about shadcn

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

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

To add and configure shadcn/ui components, use the shadcn CLI workflows to search, add, and compose components while adhering to your project's components.json configuration, Tailwind styling conventions, and registry rules. This ensures compliant React code generation.

What is the best way to debug shadcn/ui component integration issues?▼

Debugging shadcn/ui component integration issues involves checking project-specific component APIs, verifying components.json configurations, and validating Tailwind styling conventions. This workflow guides you through troubleshooting registry rules and UI composition tasks to resolve conflicts.

Does this approach work with custom component registries and presets?▼

Yes, this approach supports custom component registries and presets. It guides the maintenance and creation of shadcn/ui components by applying project-specific APIs and component registry rules, ensuring your custom UI composition remains compliant and accessible.

How do I ensure accessibility and theming patterns when building shadcn UI components?▼

Ensuring accessibility and theming patterns requires following established shadcn/ui conventions for forms, dialogs, cards, and icons. The workflow applies project-specific Tailwind styling rules and accessibility patterns to generate compliant and polished UI components.

Why are my shadcn/ui components not matching my project's Tailwind styling conventions?▼

shadcn/ui components may not match Tailwind styling conventions due to misconfigured components.json files or incorrect component APIs. This workflow enforces project-specific styling rules and CLI workflows to align component composition with your design system.

Related Skills

Explore More Software Engineering Skills→
xyqyearxyqyear

shadcn-docs

Provide development guidelines and best practices for shadcn/ui components.

Community
Intermediate
WiseWolfPTWiseWolfPT

Landing Page Steal

Copy a landing page design from a URL or image into a codebase page using Playwright MCP.

Community
Advanced
wubq511wubq511
6

shadcn-ui

Automate adding and customizing shadcn/ui components with React and Tailwind CSS.

Community
Intermediate
elcokiinelcokiin

shadcn

Manage shadcn/ui component lifecycle with CLI-driven registry integration.

Community
Intermediate