shadcn-ui
✓Patrones de componentes shadcn/ui con primitivas Radix y estilo Tailwind. Úselo al crear componentes de interfaz de usuario, usar variantes de CVA, implementar componentes compuestos o diseñar con atributos de ranura de datos. Activadores en shadcn, cva, cn(), data-slot, Radix, Button, Card, Dialog, VariantProps.
Instalación
SKILL.md
Tokens: bg-background, text-foreground, bg-primary, text-primary-foreground, bg-card, text-card-foreground, border-input, text-muted-foreground
| Multiple visual variants (primary, outline, ghost) | Yes | Plain className | | Size variations (sm, md, lg) | Yes | Plain className | | Compound conditions (outline + large = thick border) | Yes | Conditional cn() | | One-off custom styling | No | className prop | | Dynamic colors from props | No | Inline styles or CSS variables |
| Complex UI with multiple semantic parts | Yes | Single component with many props | | Optional sections (header, footer) | Yes | Boolean show/hide props | | Different styling for each part | Yes | CSS selectors | | Shared state between parts | Yes + Context | Props drilling | | Simple wrapper with children | No | Single component |
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/existential-birds/beagle --skill shadcn-ui- Fuente
- existential-birds/beagle
- Categoría
- *Creatividad
- Verificado
- ✓
- Primera vez visto
- 2026-02-01
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es shadcn-ui?
Patrones de componentes shadcn/ui con primitivas Radix y estilo Tailwind. Úselo al crear componentes de interfaz de usuario, usar variantes de CVA, implementar componentes compuestos o diseñar con atributos de ranura de datos. Activadores en shadcn, cva, cn(), data-slot, Radix, Button, Card, Dialog, VariantProps. Fuente: existential-birds/beagle.
¿Cómo instalo shadcn-ui?
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/existential-birds/beagle --skill shadcn-ui Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor
¿Dónde está el repositorio de origen?
https://github.com/existential-birds/beagle
Detalles
- Categoría
- *Creatividad
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01