shadcn

Manage shadcn/ui components, presets, and project context in repositories.

1|Updated Mar 20, 2026
One-click install
npx skills add https://github.com/ringier-data/nannos --skill shadcn-ringier-data
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/ringier-data/nannos/tree/main/packages/client-slack-frontend/.agents/skills/shadcn
Command: npx skills add https://github.com/ringier-data/nannos --skill shadcn-ringier-data

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Shadcn management in projects can be complex; this skill provides a centralized guide to streamline setup, discovery, and usage of shadcn/ui across registries, presets, and project configurations.

Core Features & Use Cases

  • Centralized guidance for adding, searching, fixing, debugging, styling, and composing shadcn/ui components.
  • Context-aware workflows that align with presets, components.json, and registry integrations for consistent UI tooling and discovery.
  • Triggers for common activations like shadcn init, creating an app with a preset, or switching presets to streamline onboarding and maintenance.

Quick Start

Begin by referencing the project’s shadcn setup and follow guided prompts to initialize or adjust the workspace with a chosen preset.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I manage shadcn/ui components and presets across a frontend project?

You can manage shadcn/ui components by applying centralized guidance to streamline setup, discovery, and usage across registries, presets, and project configurations. Context-aware workflows align with components.json and registry integrations for consistent UI tooling.

What is the best way to add and debug shadcn/ui components in a repository?

Adding and debugging shadcn/ui components is handled through centralized guidance that covers adding, searching, fixing, debugging, and styling components. A unified entry point surfaces discovery metadata to support activation and execution workflows.

Does shadcn/ui registry integration support preset-based workflows?

Yes, shadcn/ui registry integration supports preset-based workflows through context-aware workflows that align with presets, components.json, and registry integrations. Triggers for common activations like shadcn init or creating an app with a preset streamline onboarding.

How do I initialize a frontend workspace with a shadcn/ui preset?

You initialize a frontend workspace with a shadcn/ui preset by referencing the project's shadcn setup and following guided prompts to initialize or adjust the workspace with a chosen preset. Triggers for common activations like shadcn init streamline onboarding.

Can I use this shadcn/ui guidance to document components within my project?

Yes, you can use this shadcn/ui guidance to document components within your project. It organizes and guides the management of shadcn/ui components, presets, and project context, covering tasks like adding, searching, fixing, styling, and documenting components.