One-click install
npx skills add https://github.com/MohammedSaudAlsahli/dotfiles --skill shadcn-mohammedsaudalsahli
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/MohammedSaudAlsahli/dotfiles/tree/main/ai/agents-skills/shadcn
Command: npx skills add https://github.com/MohammedSaudAlsahli/dotfiles --skill shadcn-mohammedsaudalsahli

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the management of shadcn components and projects, enabling efficient UI development by providing project context, component documentation, and usage examples.

Core Features & Use Cases

  • Component Management: Add, search, and fix shadcn components.
  • Project Context: Provides project configuration and installed components.
  • Documentation: Offers detailed guides and examples for components.
  • CLI Commands: Utilizes various CLI commands for component operations.
  • Use Case: When working on a shadcn-based UI project, use this Skill to add new components, get documentation, and follow best practices for UI development.

Quick Start

Use the shadcn skill to get documentation for the 'button' component.

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 my project?

To add shadcn UI components, use the 'shadcn add' CLI command within your project directory. This command automatically retrieves and integrates the specified UI components into your codebase, streamlining component management.

What is a components.json file used for in shadcn projects?

A components.json file provides essential project context for shadcn, storing your project configuration and tracking installed UI components. This configuration file is required for the CLI to properly manage and place new UI components.

Can I search for specific shadcn components before installing them?

Yes, you can search for specific shadcn components using the 'shadcn search' CLI command. This allows you to discover available UI components, review documentation, and check usage examples before adding them to your project.

How do I fix and debug issues with installed shadcn components?

To fix and debug issues with installed shadcn components, utilize the shadcn CLI commands which provide component documentation and project context. This helps identify configuration mismatches and resolve UI component errors efficiently.

Do I need to run shadcn init before adding UI components?

Yes, running 'shadcn init' is required before adding UI components. This initialization command creates the necessary components.json file and configures your project environment, enabling subsequent component management operations.