skills.rest
iterate
iterateOFFICIAL
Explore all skills by this author →
Website𝕏@iterateGitHub

shadcn

Generate and fix shadcn/ui components via CLI registry operations and styling rules.

198|19|Updated Sep 15, 2025
Search Tags:#accessibility#shadcn/ui#react components#ui composition#tailwind styling#component installation#registry workflow
One-click install
npx skills add https://github.com/iterate/iterate --skill shadcn-iterate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/iterate/iterate/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/iterate/iterate --skill shadcn-iterate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents broken shadcn/ui usage by guiding component selection, composition, styling, and CLI-driven installation so your UI stays consistent, accessible, and maintainable.

Core Features & Use Cases

  • Shadcn-aware UI composition: Enforces correct patterns for forms, overlays (Dialog/Sheet/Drawer titles), cards, tabs, avatars, toasts, and group/item structure.
  • Styling correctness guardrails: Applies semantic color usage, spacing rules (gap-* not space-x/space-y), truncate shorthand, size-* conventions, and bans manual dark: overrides and unsafe z-index.
  • CLI-first workflow for component integrity: Uses project context from shadcn info, then docs/search/view/add to fetch the right APIs and examples before editing or installing.
  • Deterministic updating and preset switching: Supports safe update previews (dry-run/diff) and smart merge behavior when keeping local changes.

Quick Start

Create or open your shadcn project context, then ask the Skill to add and style the specific component(s) you need while fetching docs/examples first, e.g. "Use shadcn to add a settings form with name, email, and notification toggles, including validation states and correct FieldGroup/Field layout."

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 React project without breaking existing styling?▼

To add shadcn/ui components safely, use the CLI-driven registry workflow to fetch documentation and examples before editing or installing. This ensures correct component APIs, semantic token usage, and proper Tailwind styling integration without breaking existing layouts.

What is the correct way to style shadcn/ui components using Tailwind CSS?▼

Styling shadcn/ui components correctly requires using semantic design tokens instead of raw colors, applying gap-* properties for spacing rather than space-x or space-y, and avoiding manual dark: overrides or unsafe z-index values to maintain visual consistency.

How do I build accessible forms with shadcn/ui FieldGroup and Field components?▼

Building accessible forms with shadcn/ui involves using the correct FieldGroup and Field layout patterns for structure, applying validation states properly, and ensuring semantic HTML. This approach maintains built-in accessibility features and consistent component composition.

Can I update shadcn/ui components without losing my local style customizations?▼

Yes, you can update shadcn/ui components while preserving local changes by using the deterministic update workflow with dry-run and diff previews. This process applies a smart merge behavior that keeps your customizations safe during registry updates.

Why do my shadcn/ui Dialog and Sheet overlays lack proper titles?▼

shadcn/ui overlays like Dialog, Sheet, and Drawer require explicit overlay titles for accessibility. Using correct composition patterns ensures screen readers can announce the overlay context, preventing accessibility violations and improving user navigation.

How do I use icons in shadcn/ui without breaking component sizing?▼

When adding icons to shadcn/ui components, use the data-icon attribute pattern and avoid applying manual icon sizing classes. This ensures icons inherit correct dimensions from the component system and maintain consistent visual alignment.

Related Skills

Explore More Design & Creative Skills→
datlechindatlechin

shadcn-ui

Create and customize accessible React components from shadcn/ui.

Community
Advanced
vuminhieuvuminhieu

ui-styling

Build accessible React interfaces with shadcn/ui, Tailwind CSS, and canvas visuals.

Community
Intermediate
TNHoang2708TNHoang2708
1

ck:ui-styling

Integrate shadcn/ui components and Tailwind CSS for accessible responsive interfaces.

Community
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate