skills.rest
legions-developer
legions-developerCOMMUNITY
Explore all skills by this author →
Website𝕏@legionsdevGitHub

shadcn

Enforce shadcn/ui component composition and CLI workflows for Next.js projects.

885|108|Updated Apr 30, 2025
Search Tags:#accessibility#Next.js#shadcn/ui#Tailwind#component composition#CLI workflow
One-click install
npx skills add https://github.com/legions-developer/invoicely --skill shadcn-legions-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/legions-developer/invoicely/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/legions-developer/invoicely --skill shadcn-legions-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent or incorrect shadcn/ui usage by enforcing the project’s UI composition, styling, accessibility, and CLI workflow so your components match the design system and work correctly with the configured preset.

Core Features & Use Cases

  • Component-first UI composition: Build and debug UI using shadcn/ui primitives with correct structure for forms, overlays, cards, tabs, and icons.
  • Deterministic CLI-driven installs and updates: Search, view docs, and add components using the shadcn CLI while previewing diffs to avoid breaking changes.
  • Guardrail rules for correctness: Enforce spacing (gap-*), semantic colors, icon sizing conventions, validation attributes (data-invalid/aria-invalid), and base-vs-radix behavior.
  • Use Cases: Creating a settings form with validated inputs, implementing accessible dialogs/sheets with titles, composing dashboards with skeleton/loading states, and updating components safely when a preset changes.

Quick Start

Ask the AI: "Using my current shadcn project context, create a settings page form with shadcn components and proper validation states using FieldGroup + Field and ToggleGroup where appropriate."

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 a Next.js project without breaking existing styles?▼

To add shadcn/ui components safely, use the shadcn CLI via your project package runner to search, view diffs, and install components. This ensures components match your preset, apply gap-based spacing, and use semantic color tokens without breaking changes.

What is the correct way to build accessible forms with shadcn/ui?▼

Building accessible forms with shadcn/ui requires using FieldGroup and Field patterns for composition. You must enforce validation attributes like data-invalid and aria-invalid, apply semantic color tokens, and ensure correct base-vs-radix behavior for accessibility compliance.

How do I use shadcn CLI to update components when my preset changes?▼

Use the shadcn CLI to search and view component documentation, then preview diffs before applying updates. This deterministic CLI-driven workflow verifies that new preset-aware styling rules and semantic color tokens integrate cleanly into your Next.js project.

Does shadcn/ui work with Tailwind for component composition in dashboards?▼

Yes, shadcn/ui works with Tailwind for component composition in dashboards by enforcing gap-based spacing for layout and providing skeleton and loading states. You can compose cards and tables using primitives that strictly follow configured base-vs-radix behavior.

Why are my shadcn dialog overlays displaying incorrectly?▼

Incorrect shadcn dialog overlays often result from ignoring base-vs-radix behavior or missing accessible titles. Ensure you follow shadcn/ui component composition rules, apply correct icon data-icon usage, and verify semantic color tokens are configured properly.

Can I use shadcn/ui icons outside of the standard component composition rules?▼

No, shadcn/ui icons must follow strict icon data-icon usage and sizing conventions within the component composition. Adhering to these guardrail rules ensures visual consistency and prevents accessibility issues across your Next.js project's UI elements.

Related Skills

Explore More Software Engineering Skills→
Kevin-Liu-01Kevin-Liu-01
16

shadcn

Automate shadcn UI project setup and preset switching via CLI.

Community
Intermediate
irchamajiirchamaji

shadcn

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

Community
Advanced
locnbk2002locnbk2002
1

ui-styling

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

Community
Intermediate
hasnahasna

shadcn

Integrates reusable UI components into your Tailwind and React projects via the managed screen reader.

Official
Intermediate