skills.rest
mashharuki
mashharukiCOMMUNITY
Explore all skills by this author →
Website𝕏@haruki_web3GitHub

shadcn

Manage shadcn/ui components, projects, and settings with presets and themes.

2|Updated May 15, 2026
Search Tags:#component library#shadcn#theme customization#project configuration#ui management
One-click install
npx skills add https://github.com/mashharuki/floci-sample --skill shadcn-mashharuki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/mashharuki/floci-sample/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/mashharuki/floci-sample --skill shadcn-mashharuki

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires shadcn, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill manages UI components and projects, offering efficient addition, debugging, and styling with shadcn/ui, making it easy to compose UI elements and maintain consistency.

Core Features & Use Cases

  • Component Management: Add, search, fix, and style UI components.
  • Project Context: Provides project configuration, component documentation, and usage examples.
  • Presets and Themes: Customize and switch between themes with named presets and codes.

Quick Start

To manage a shadcn/ui project, initialize a new project using npx shadcn@latest init --preset base-nova.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I add and manage shadcn/ui components in an existing project?▼

You can manage shadcn/ui components by adding, searching, fixing, and styling UI elements through provided scripts and references. This Skill handles project configuration and integration to maintain UI consistency across your existing setup.

Can I apply preset themes to customize my shadcn/ui project configuration?▼

Yes, you can customize and switch between UI themes using named presets and codes. This Skill applies preset configurations to your shadcn/ui project, enabling rapid theme switching and consistent styling across components.

What is the best way to initialize a new shadcn/ui project with a base configuration?▼

Initialize a new shadcn/ui project by running `npx shadcn@latest init --preset base-nova`. This command applies a base configuration preset to quickly establish your UI component architecture and styling environment.

Does this shadcn/ui management approach work for debugging and fixing component styling?▼

Yes, it supports efficient addition, debugging, and styling of shadcn/ui components. You can fix UI elements and resolve styling issues while maintaining consistency through provided component references and project configuration.

Do I need an existing React setup to integrate shadcn/ui components?▼

You need an existing project environment to integrate shadcn/ui components. This Skill manages UI elements, applies presets, and updates configuration within an established project context rather than scaffolding a new environment.

Related Skills

Explore More Product & Management Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
ngxtmngxtm

Razor Pages

Develop server-rendered web applications with ASP.NET Core Razor Pages.

Community
Intermediate
yashvinthanyashvinthan

ui-styling

Create user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
gil-kapelgil-kapel
2

shadcn-ui

Integrate and customize React UI components with Tailwind CSS and Radix UI.

Community
Intermediate