Claude MarketplacesSubmit
existential-birds avatar

Shadcn Ui

existential-birds/beagle

This is a comprehensive reference for building UI components with shadcn/ui, covering everything from CLI setup to advanced composition patterns. You'll find decision tables for when to use CVA variants versus compound components, working examples of the asChild pattern for polymorphic rendering, and modern CSS techniques like has() selectors and data-slot targeting. The gates checklist before running init or add commands is genuinely useful and will save you from configuration headaches. What stands out is the practical focus on component anatomy and prop typing patterns rather than just showcasing finished components. If you're building a design system or need to understand why shadcn components are structured the way they are, this gives you the underlying patterns to extend and customize them properly.

skills.sh installs
356
GitHub stars
87
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add existential-birds/beagle --skill shadcn-ui --agent claude-code

Installs into .claude/skills of the current project.

Files

shadcn/ui Component Development

Contents

CLI Commands

Initialize shadcn/ui

npx shadcn@latest init

This creates a components.json configuration file and sets up:

  • Tailwind CSS configuration
  • CSS variables for theming
  • cn() utility function
  • Required dependencies

Add Components

# Add a single component
npx shadcn@latest add button

# Add multiple components
npx shadcn@latest add button card dialog

# Add all available components
npx shadcn@latest add --all
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/existential-birds/beagle
Category
Frontend Development
First seen
Jun 3, 2026

More from existential-birds/beagle

All 40

Recommended

More Frontend Development
1patricio0312rev avatarresponsive-design-systempatricio0312rev/skillsImplements responsive design systems with mobile-first breakpoints, container queries, fluid typography, and adaptive layouts using Tailwind CSS. Use when users353skills.sh installs
2borghei avatarsenior-frontendborghei/claude-skillsFrontend development for React, Next.js, TypeScript, and Tailwind CSS. Use when building React components, optimizing Next.js performance, analyzing bundle size351skills.sh installs
3jamesrochabrun avatarfrontend-designerjamesrochabrun/skillsBuild accessible, responsive, and performant frontend components with design system best practices, modern CSS, and framework-agnostic patterns.340skills.sh installs
4gohypergiant avataraccelint-react-best-practicesgohypergiant/agent-skillsReact performance optimization and best practices. ALWAYS use this skill when working with any React code - writing components, hooks, JSX; refactoring; optimiz335skills.sh installs
5dalestudy avatarreactdalestudy/skillsReact 성능 최적화 및 베스트 프랙티스 스킬. Vercel Engineering 가이드 기반, 프레임워크 비종속. 다음 상황에서 사용: (1) React 컴포넌트(.tsx, .jsx) 작성 또는 수정 시, (2) 상태 관리, hooks, 리렌더링 최적화 작업 시, (3) 비동기 데이334skills.sh installs
6vinayakkulkarni avatarnuxt-best-practicesvinayakkulkarni/vue-nuxt-best-practicesNuxt 4 performance optimization and architecture guidelines (current through Nuxt 4.5) for building fast, maintainable full-stack applications. This skill shoul325skills.sh installs