agentsclimarketplace
Sign in

Shadcn

Skill a5c-ai/babysitter/library/specializations/web-development/skills/shadcn

shadcn/ui component patterns, customization, theming, and integration.From its SKILL.md

Install
npx -y skills add a5c-ai/babysitter --skill shadcn

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

SKILL.md

1.3 KB, 234 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it: 1 file

340 B alongside SKILL.md

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.