skills.rest
david-nossebro
david-nossebroCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Inspect components.json and generate shadcn/ui components matching Tailwind and app structure.

Updated May 3, 2026
Search Tags:#react#shadcn/ui#nextjs#component generation#tailwind#components.json
One-click install
npx skills add https://github.com/david-nossebro/agent-commons --skill shadcn-david-nossebro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/david-nossebro/agent-commons/tree/main/shared/skills/shadcn
Command: npx skills add https://github.com/david-nossebro/agent-commons --skill shadcn-david-nossebro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Shadcn/ui integration work can become messy when the app already has its own component conventions, Tailwind setup, or file structure, leading to incorrect or inconsistent generated components.

Core Features & Use Cases

  • Initialization and setup guidance: Use the official shadcn/ui installation path and CLI workflow for the user’s specific framework and app structure.
  • Component generation and customization: Add or adapt components while keeping generated code readable and maintainable as local application code.
  • Configuration validation: Inspect and validate components.json, Tailwind/CSS entrypoints, aliases, and the location of ui components before making changes.

Quick Start

Use the shadcn skill to inspect an existing project’s shadcn/ui configuration and generate a plan for adding a component that matches the repo’s conventions and components.json.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I set up shadcn/ui in an existing React project?▼

Setting up shadcn/ui involves inspecting your components.json and Tailwind configuration first, then using the official CLI workflow to initialize the library and generate components that match your app's existing file structure and aliases.

Why does shadcn component generation create incorrect file imports?▼

Incorrect imports during shadcn component generation occur when components.json aliases do not match your repository's actual paths. Validating your configuration and output locations before generating ensures imports align with your Tailwind and app structure.

Can I customize generated shadcn/ui components without breaking updates?▼

Yes, you can customize generated shadcn/ui components because they are added directly as local application code. Adapting the generated files keeps the code readable and maintainable within your own repo conventions without breaking local imports.

Do I need a specific Tailwind setup before adding shadcn/ui components?▼

Yes, shadcn/ui requires a configured Tailwind CSS environment. You must inspect and validate your Tailwind and CSS entrypoints alongside components.json to ensure generated files match the configured output locations correctly.

What is the best way to add shadcn/ui to Next.js?▼

The best way to add shadcn/ui to Next.js is using the official CLI installation path. This workflow validates your components.json and generates files that align with your Next.js app structure and Tailwind setup.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

shadcn-setup-and-theming

Install and configure shadcn/ui with Tailwind and design tokens in React projects.

Official
Intermediate
naopensedoit2-designnaopensedoit2-design

mockup-graduate

Convert approved mockups into production components matching app architecture and UI conventions.

Community
Advanced
luthebaoluthebao
1

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 for Expo applications.

Community
Intermediate
spuneiarturspuneiartur
1

component-factory

Generate reusable React components with JSX files and barrel exports.

Community
Intermediate