mcp-shadcn

Search and add shadcn/ui components to React/Next.js projects.

2|2|Updated Feb 9, 2017
One-click install
npx skills add https://github.com/sumik5/dotfiles --skill mcp-shadcn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mcp-shadcn
Source: https://github.com/sumik5/dotfiles/tree/main/claude-code/skills/mcp-shadcn
Command: npx skills add https://github.com/sumik5/dotfiles --skill mcp-shadcn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines UI development in React/Next.js projects by automating the search, addition, and management of shadcn/ui components. It eliminates manual component boilerplate, ensures consistency with design systems, and provides quick access to usage examples, accelerating frontend development.

Core Features & Use Cases

  • Component Discovery: Search and list shadcn/ui components with fuzzy matching for quick discovery.
  • Usage Examples & Demos: Access demo code and usage examples directly, reducing learning curve and implementation time.
  • Automated Component Addition: Generates and executes commands to add selected components to your project, handling dependencies.
  • Use Case: When building a new user form, use this Skill to search for "form input button," view their demo code, and then automatically add all necessary components to your project, ready for customization.

Quick Start

Search for shadcn/ui components related to "button" and "card" to see available options.