Shadcn Ui Expert

This one walks you through building React UIs with shadcn/ui, the component collection built on Radix primitives and Tailwind. It covers the full workflow: initializing projects, picking the right component for forms vs dialogs vs data tables, implementing patterns like validated forms with React Hook Form and Zod, and customizing through Tailwind classes or CSS variables. The component selection guide is genuinely helpful if you're staring at 40+ options wondering whether you need a dialog, drawer, or popover. Works across Next.js, Vite, Remix, and others. Includes MCP server integration so you can request components in natural language instead of memorizing CLI commands. Good reference if you're already using shadcn/ui or evaluating it against component libraries.

skills.sh installs: 445
GitHub stars: 2
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add majesteitbart/talentmatcher --skill shadcn-ui-expert --agent claude-code

Installs into .claude/skills of the current project.

Files

shadcn-ui Expert

shadcn-ui is a collection of beautifully-designed, accessible React components built with TypeScript, Tailwind CSS, and Radix UI primitives. This skill guides you through component selection, implementation, customization, and best practices.

Quick Start

Installation

First, initialize shadcn-ui in your project:

npx shadcn-ui@latest init

This creates a components.json file for configuration. Choose your framework:

Next.js (App Router recommended)
Vite
Remix
Astro
Laravel
Gatsby
React Router
TanStack Router/Start

Installing Components

Use the CLI to install individual components:

# Install a button component
npx shadcn-ui@latest add button

# Install form components
npx shadcn-ui@latest add form input select checkbox

# Install a data table
npx shadcn-ui@latest add data-table

Or ask me directly to "add a login form" - I can use the MCP server to handle installation with natural language.