skills.rest
Norfolk-Group
Norfolk-GroupOFFICIAL
Explore all skills by this author →
GitHub

shadcn

Manage shadcn/ui components and project configurations via CLI workflows.

Updated Aug 23, 2026
Search Tags:#ui#frontend#components#cli#tailwind#shadcn#presets
One-click install
npx skills add https://github.com/Norfolk-Group/H-Analytics --skill shadcn-norfolk-group
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Norfolk-Group/H-Analytics/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/Norfolk-Group/H-Analytics --skill shadcn-norfolk-group

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps frontend developers and designers manage, add, update, and verify shadcn/ui components across projects and registries while preserving project conventions, aliases, and Tailwind theming to avoid broken imports, inconsistent styling, and accessibility regressions.

Core Features & Use Cases

  • Project-aware CLI guidance: Uses project context (package manager, aliases, base, style, tailwind config) to run the correct shadcn CLI commands and choose safe workflows.
  • Component lifecycle: Search registries, preview add operations with dry-run and diff, install or update components, and perform smart merges that preserve local changes.
  • Rules & enforcement: Provides best-practice rules for styling, forms, composition, icons, and base vs radix differences to ensure accessibility and consistency.
  • Preset and registry management: Apply or switch presets with overwrite/merge/skip options, configure custom registries, and fix third-party imports to match project aliases.
  • MCP tooling: Integrates MCP endpoints for registry listing, viewing item contents, audit checklists, and generating install commands for automation or AI-assisted workflows.
  • Use case examples: Add a reusable dialog component from a community registry with --dry-run to preview diffs; migrate a project's visual style by applying a preset and smart-merging customized components.

Quick Start

Ask the assistant to inspect the project with npx shadcn@latest info, then run an add command in dry-run mode to preview changes before installing.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I preview shadcn/ui component changes before installing them?▼

You can preview shadcn/ui component changes by running the CLI add command in dry-run mode, which generates a diff preview of the modifications before actually installing the component into your project.

What is the best way to manage shadcn/ui components in a monorepo?▼

Managing shadcn/ui components in a monorepo involves using project-aware CLI context to sync UI components across registries, ensuring import alias rewriting and Tailwind theming are preserved across all workspace packages.

Can I apply a preset to my existing shadcn/ui project without losing local customizations?▼

You can apply a preset to an existing shadcn/ui project using smart-merge options, which allow you to overwrite, merge, or skip changes to preserve your local component customizations while updating the visual style.

How do I fix broken imports when adding third-party shadcn/ui components?▼

Fix broken imports from third-party shadcn/ui components by rewriting them to match your project's specific import aliases, ensuring consistency with your local configuration and avoiding missing module errors.

Does the shadcn CLI support searching across custom community registries?▼

Yes, the shadcn CLI supports searching across custom community registries, allowing you to list available items, view contents, and generate install commands for components hosted outside the default registry.

Why do my shadcn/ui form components have accessibility regressions after updating?▼

Accessibility regressions in shadcn/ui forms often occur when updates bypass base Radix UI differences or styling rules, requiring you to enforce best-practice composition and accessibility rules during the smart-merge update process.

Related Skills

Explore More Software Engineering Skills→
neilsanghrajkaneilsanghrajka

shadcn

Manage shadcn/ui components and presets across React projects via CLI.

Community
Intermediate
ian-pascoeian-pascoe
1

shadcn

Manage shadcn/ui components via CLI commands and project context.

Community
Advanced
cartridge-ggcartridge-gg

ui-architecture

Standardize frontend UI components with Radix, Tailwind, CVA, and Storybook.

Official
Intermediate
Timothy191Timothy191

shadcn

Manage shadcn components and projects via CLI commands.

Community
Advanced