Shadcn

Skill PIXARTSeu/Synapse/packages/codegraph/data/skill/shadcn

Self-improving AI brain for Claude Code & Desktop — 28 MCP tools, 253 skills, collective memory, project tracking, work logs. One server, all your sessions share the same knowledge. Deploy on Coolify in 2 minutes.

Install

npx -y skills add PIXARTSeu/Synapse --skill shadcn

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
8 stars8 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

shadcn/ui knowledge base - installation, components, theming, MCP server integration. Use when building UI components, searching component registry, implementing accessible patterns, or customizing component styles.

SKILL.md

2.4 KB, as published. Nobody here has run it

shadcn/ui Knowledge Base

Installation

npx shadcn@latest init

Configuration prompts:

Style: Default
Base color: Slate
CSS variables: Yes

Add Components

# Single component
npx shadcn@latest add button

# Multiple components
npx shadcn@latest add button card dialog form input

# All components
npx shadcn@latest add --all

MCP Server Integration

// .mcp.json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

MCP Commands:

"Add button, card, and dialog components"
"Find a login form from shadcn registry"
"Install all form components"

Component Categories

Forms

Button, Input, Textarea, Select, Checkbox, Radio Group
Switch, Slider, Toggle, Form (with react-hook-form)
Label, Calendar, Date Picker

Feedback

Alert, Alert Dialog, Toast, Sonner
Progress, Skeleton, Badge, Avatar

Layout

Card, Separator, Accordion, Collapsible
Tabs, Sheet, Scroll Area, Resizable

Navigation

Navigation Menu, Menubar, Dropdown Menu
Context Menu, Command, Breadcrumb, Pagination

Overlay

Dialog, Drawer, Popover, Tooltip, Hover Card

Data Display

Table, Data Table, Carousel, Aspect Ratio

Theming with CSS Variables

shadcn/ui uses CSS variables for theming. Configure in globals.css:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    /* ... other variables */
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    /* ... dark variants */
  }
}

cn() Utility (Merge Classes Safely)

// lib/utils.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Best Practices

Copy, don't wrap - Own your components, don't create wrappers
Use cn() - For conditional classes
Extend variants - With cva() for custom variants
Accessibility - Built on Radix primitives (ARIA compliant)
Dark mode - Use CSS variables for theme switching