skills.rest
Ermianr
ErmianrCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Automate shadcn/ui component creation and updates in the apps/web Next.js project.

Updated Aug 27, 2026
Search Tags:#accessibility#Next.js#Tailwind#shadcn#ui-components#component-library#frontend-development
One-click install
npx skills add https://github.com/Ermianr/fobos --skill shadcn-ermianr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Ermianr/fobos/tree/main/skills/shadcn
Command: npx skills add https://github.com/Ermianr/fobos --skill shadcn-ermianr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation, updating, and maintenance of shadcn/ui components inside the apps/web Next.js project, reducing manual integration and consistency gaps across the UI codebase.

Core Features & Use Cases

  • Automatic integration of shadcn/ui components into the Next.js project.
  • Validation of project configuration files (apps/web/components.json and apps/web/package.json) before CLI usage.
  • Enforcement of shadcn/ui design patterns, Tailwind styling, accessibility, and consistency across components.

Quick Start

From the project root, navigate to apps/web and run bun x shadcn add <component> to install a new component, or bun x shadcn add <component> --overwrite to update an existing one.

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?▼

To add shadcn/ui components to a Next.js project, navigate to the apps/web directory and run bun x shadcn add <component>. The skill validates your components.json and package.json configurations before invoking the CLI to install the component.

How do I update an existing shadcn/ui component in my web app?▼

To update an existing shadcn/ui component, run bun x shadcn add <component> --overwrite from the apps/web directory. This overwrites the current UI code under src/components/ui while enforcing Tailwind styling and accessibility patterns.

What configuration files are required to use shadcn/ui with Next.js?▼

Using shadcn/ui with Next.js requires the apps/web/components.json and apps/web/package.json files. The skill reads these configuration files to validate component and package settings, checking installed registries and shadcn versions before executing CLI commands.

Does shadcn/ui enforce accessibility and Tailwind styling patterns automatically?▼

Yes, shadcn/ui enforces accessibility, Tailwind styling, and design consistency across components. When adding or updating components in the Next.js project, the skill maintains these patterns within the UI codebase under apps/web/src/components/ui.

Why are my shadcn/ui components not updating correctly in the Next.js app?▼

If shadcn/ui components are not updating, ensure you are running the CLI from the apps/web directory with the --overwrite flag. The skill requires valid components.json configurations and proper package settings to successfully update UI code and related styles.

Related Skills

Explore More Software Engineering Skills→
fusenginefusengine
22

shadcn-registries

Manage shadcn/ui registry configurations and components.json settings.

Community
Intermediate
p-iknowp-iknow
1

frontend-style-layout

Apply Tailwind v4 patterns to standardize page layouts, spacing, and responsive images.

Community
Intermediate
human-centric-engineeringhuman-centric-engineering
3

component-builder

Generate reusable React components with TypeScript interfaces and accessibility attributes.

Official
Intermediate
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate