Babysitter shadcn

Name: shadcn
Author: a5c-ai

shadcn/ui component patterns, customization, theming, and integration.

install

source · Clone the upstream repo

git clone https://github.com/a5c-ai/babysitter

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/a5c-ai/babysitter "$T" && mkdir -p ~/.claude/skills && cp -r "$T/library/specializations/web-development/skills/shadcn" ~/.claude/skills/a5c-ai-babysitter-shadcn && rm -rf "$T"

manifest: library/specializations/web-development/skills/shadcn/SKILL.md

shadcn/ui Skill

Expert assistance for building UIs with shadcn/ui components.

Capabilities

Install and configure components
Customize component styles
Implement theming
Extend components
Integrate with forms

Usage Pattern

npx shadcn-ui@latest add button dialog form

import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
    </DialogHeader>
    {/* Content */}
  </DialogContent>
</Dialog>

Theming

:root {
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
}

Target Processes

react-application-development
nextjs-full-stack
rapid-prototyping