📦

shadcn

Name: shadcn
Author: shadcn

Seguro ⚙️ Comandos externos🌐 Acceso a red📁 Acceso al sistema de archivos

Build React UIs with shadcn components

Developers struggle to maintain consistent, accessible UI components across React projects. This skill provides CLI commands, component composition patterns, and styling rules for building professional UIs with the shadcn/ui component library.

Soporta: Claude Codex Code(CC)

📊 69 Adecuado

Descargar el ZIP de la skill

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

Activa y empieza a usar

Pruébalo

Usando "shadcn". Add a dialog component with a form inside it

Resultado esperado:

Install: npx shadcn@latest add dialog
Composition pattern for accessible dialog with form

Usando "shadcn". Fix my form layout - fields are not spacing correctly

Resultado esperado:

Replace div wrappers with FieldGroup + Field pattern
Apply correct variant for form validation states

Auditoría de seguridad

Seguro

v1 • 3/13/2026

Audit complete. Static findings are false positives: backticks are markdown code formatting, URLs are documentation links, and cryptographic warnings are triggered by file paths. This is a legitimate UI component library skill with no actual security risks.

Archivos escaneados

1,813

Líneas analizadas

hallazgos

Auditorías totales

Factores de riesgo

⚙️ Comandos externos (884)

🌐 Acceso a red (11)

cli.md:88 cli.md:145 cli.md:146 cli.md:149 cli.md:150 cli.md:245 customization.md:75 mcp.md:81 mcp.md:83 mcp.md:94 SKILL.md:231

📁 Acceso al sistema de archivos (8)

cli.md:146 cli.md:150 mcp.md:22 mcp.md:22 rules/styling.md:3 rules/styling.md:59 rules/styling.md:104 SKILL.md:16

Auditado por: claude

Puntuación de calidad

Arquitectura

100

Mantenibilidad

Contenido

Comunidad

100

Seguridad

Cumplimiento de la especificación

Lo que puedes crear

Add components to React project

Use CLI to add button, form, dialog, and other UI components to a Next.js or Vite project

Debug styling and composition issues

Fix common issues with z-index, variants, semantic colors, and component nesting

Apply best-practice component patterns

Follow official composition rules for forms, dialogs, tabs, and other complex components

Prueba estos prompts

Add a new component

Add the button and card components to my project using shadcn CLI. Show me the correct composition pattern for a settings card with a title, description, and action button.

Debug a component issue

Debug and fix a dialog that is not appearing above other elements. The z-index seems wrong on mobile.

Search for a component

Search the shadcn registry for a table component and add it with the correct installation command.

Style with semantic tokens

Convert this button from hardcoded bg-blue-500 to use semantic tokens from the shadcn theme. Use the correct variant pattern.

Mejores prácticas

Always use project package runner (npx, pnpm dlx, bunx) based on project packageManager
Prefer component composition over custom markup (use Alert, Empty, Badge instead of styled divs)
Use semantic color tokens (bg-primary, text-muted-foreground) instead of raw Tailwind colors

Evitar

Do not override component colors with raw Tailwind classes - use variant prop instead
Do not use space-x-* or space-y-* - use flex with gap-* for layout
Do not invent CLI flags not documented in the official reference