skills.rest
irchamaji
irchamajiCOMMUNITY
Explore all skills by this author →
Website𝕏@ircham_ajiGitHub

shadcn

Guide shadcn/ui component creation and maintenance with project-aware styling rules.

Updated Feb 8, 2026
Search Tags:#react#tailwind#ui components#shadcn#component composition#radix#cli workflow
One-click install
npx skills add https://github.com/irchamaji/agents --skill shadcn-irchamaji
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/irchamaji/agents/tree/main/skills/shadcn
Command: npx skills add https://github.com/irchamaji/agents --skill shadcn-irchamaji

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you consistently create and update shadcn/ui components by providing the exact workflow and composition/styling rules so you stop guessing APIs, fixing broken imports, and reworking invalid layouts.

Core Features & Use Cases

  • End-to-end shadcn workflows: initialize projects, add components, search registries, view file contents, and fetch official docs/examples before implementing changes.
  • Project-aware guardrails: uses project context (aliases, base vs radix, Tailwind v3 vs v4, icon library, RSC requirements) to ensure the generated guidance matches your actual setup.
  • Correct-by-construction rules: enforces shadcn-specific patterns for forms, overlays, spacing, semantic colors, icon usage, and composition (e.g., FieldGroup/Field, gap-* spacing, AvatarFallback, Dialog/Sheet/Drawer titles).
  • Safe updating: provides a smart merge workflow using dry-run/diff to preserve local changes while updating upstream components.
  • Presets & registries handling: guides preset switching (reinstall/merge/skip) without decoding preset codes and requires explicit registry selection when adding third-party blocks.

Quick Start

Ask the AI: "I’m working in my shadcn/ui project—run shadcn info, then help me add a Button and a Dialog using the correct composition and styling rules."

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 without breaking existing imports or layouts?▼

Correct shadcn/ui form composition requires using FieldGroup and Field components with proper validation attributes. This enforces consistent styling and accessibility patterns, preventing broken layouts and missing validation feedback in your React project.

Does shadcn/ui work with Tailwind v4 and React Server Components?▼

shadcn/ui supports both Tailwind v3 and v4 along with React Server Components. The workflow detects your project context, including aliases and icon libraries, to ensure generated components match your specific RSC and styling requirements.

What's the best way to manage spacing and semantic colors in shadcn/ui components?▼

The best way to manage spacing and colors in shadcn/ui is by using gap-* spacing utilities and semantic color tokens. This ensures consistent visual design across component compositions like dialogs, sheets, and drawers without hardcoding values.

How do I switch presets and add third-party blocks in a shadcn/ui project?▼

To switch shadcn/ui presets, use a reinstall, merge, or skip workflow without decoding preset codes. When adding third-party blocks, explicit registry selection is required to ensure the correct component source and composition rules are applied.

Why do my shadcn/ui overlays like Dialog and Sheet fail accessibility checks?▼

shadcn/ui overlays like Dialog, Sheet, and Drawer fail accessibility checks when missing required titles. Correct component composition enforces overlay titles, proper AvatarFallback usage, and correct icon data-icon attributes to meet accessibility standards.

Related Skills

Explore More Software Engineering Skills→
gwenwindflowergwenwindflower
9

shadcn-ui

Automate adding and configuring shadcn/ui components in frontend projects.

Community
Intermediate
rbaumierrbaumier
4

shadcn

Manage shadcn/ui component installation, updates, and audits via the shadcn CLI.

Community
Advanced
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
xyqyearxyqyear

shadcn-docs

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

Community
Intermediate