shadcnpor shadcn

shadcn Skill.

Una skill de Claude Code y Codex para diseño UI: añade, busca, corrige, estiliza y compone componentes shadcn en un proyecto.

Web y UI
Código UI

Descargar OpenDesign Ver guía de uso

shadcn-ui/ui · skills/shadcn/SKILL.mdSKILL.md

--- name: shadcn description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". --- ## Current Project Context ## Principles ## Critical Rules ## Key Patterns ## Component Selection ## Key Fields

Front matter y encabezados de sección leídos del archivo original el 14/09/2026 · 19.427 caracteres en total

01 Qué hace

Qué Hace el Skill de shadcn en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Este skill gestiona proyectos de shadcn/ui añadiendo, buscando, corrigiendo y componiendo componentes. Inyecta contexto en vivo del proyecto desde components.json, aplica reglas específicas del framework para formularios, estilos, composición, iconos e interfaces de chat, y usa la CLI de shadcn para todas las operaciones. Los componentes se instalan como código fuente mediante npx shadcn@latest (o el gestor de paquetes del proyecto).

El skill se aplica al trabajar con shadcn/ui, registros de componentes, códigos preestablecidos o cualquier proyecto con un archivo components.json. Cubre directivas RSC, Tailwind v3/v4, primitivas Base UI frente a Radix, detección de librerías de iconos y estructuras de monorepo. Cada comando hace referencia a los alias reales del proyecto, el gestor de paquetes y las rutas resueltas.

Qué produce

Archivos de código fuente de los componentes de shadcn añadidos a la ruta de UI resuelta del proyecto
Archivos de componentes fusionados al actualizar, conservando los cambios locales mientras se aplican las actualizaciones ascendentes

Ver el ejemplo de prompt ↗

Cómo funciona

01
Inyectar Contexto del Proyecto
Ejecuta npx shadcn@latest info --json para obtener la configuración del proyecto, los componentes instalados, los alias, el indicador RSC, la versión de Tailwind, la librería de iconos, la base (radix o base) y las rutas resueltas.
02
Buscar en Registros Antes de Escribir UI Personalizada
Usa npx shadcn@latest search para comprobar el registro de shadcn y los registros de la comunidad en busca de componentes existentes que se ajusten a la necesidad.
03
Obtener Documentación y Ejemplos de Componentes
Ejecuta npx shadcn@latest docs <component> para obtener documentación y URLs de ejemplos, y luego los recupera para verificar el uso correcto de la API antes de crear o corregir un componente.
04
Añadir o Actualizar Componentes con la CLI
Usa npx shadcn@latest add para instalar componentes.
05
Corregir Importaciones en Componentes de Terceros
Después de añadir componentes de registros de la comunidad, revisa los archivos que no son de UI en busca de rutas codificadas de forma fija como @/components/ui/...
06
Revisar y Verificar los Componentes Añadidos
Lee todos los archivos añadidos para comprobar si faltan subcomponentes, si la composición es incorrecta, si se incumplen reglas críticas o si hay importaciones de iconos incorrectas.

02 Encuentra tu caso de uso

Cuándo usar la Skill shadcn

Usa el skill shadcn en Claude Code o Codex cuando el trabajo sea diseño de interfaz de este tipo. El alcance y límites a continuación están tomados del archivo propio del skill.

Buen caso de uso

Construir UI con componentes de shadcn/ui en un proyecto existente que tenga un archivo components.json
Inicializar un nuevo proyecto shadcn con un preset code o un preset con nombre como nova o vega
Construir interfaces de chat o conversación usando MessageScroller, Message, Bubble, Attachment y Marker

Conozca los límites

Obtener manualmente archivos de componentes desde GitHub en lugar de usar la CLI
Usar un registro por defecto cuando el usuario no especifica cuál usar
Usar --overwrite para actualizar componentes sin la aprobación explícita del usuario
Inventar capacidades, integraciones o nombres de archivo que no están presentes en el contexto del proyecto

Qué proporcionar

Nombre del componente o bloqueEl nombre de un componente de shadcn (button, dialog, select) o un elemento de registro (@magicui/shimmer-button, owner/repo/item) para añadir o buscar.
Preset code o preset con nombreUna cadena base62 con prefijo de versión (por ejemplo, a2r6bw) de ui.shadcn.com, o un preset con nombre (nova, vega, maia, lyra, mira, luma) para init o apply.

03 Dentro del skill

Reglas que el skill de shadcn le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Usar gap-, nunca space-x- ni space-y-*
Para el espaciado entre elementos flex hijos, usa gap-. Para pilas verticales, usa flex flex-col gap-. space-x- y space-y- nunca están permitidos.
Los formularios usan FieldGroup + Field
Los diseños de formulario deben usar los componentes FieldGroup y Field. Nunca uses un div sin formato con space-y- o grid gap- para el diseño de formularios.
Iconos en botones: usar data-icon
Los iconos dentro de Button deben tener data-icon="inline-start" o data-icon="inline-end". No se permiten clases de tamaño como size-4 o w-4 h-4 en iconos dentro de componentes.
Los elementos siempre dentro de su grupo
SelectItem va dentro de SelectGroup, DropdownMenuItem dentro de DropdownMenuGroup, CommandItem dentro de CommandGroup. Nunca renderices los elementos directamente.
Usar tokens de color semánticos, no valores en bruto
Usa bg-primary, text-muted-foreground, etc. Nunca uses colores de Tailwind en bruto como bg-blue-500 o text-emerald-600. Sin sobrescrituras manuales de color dark:.
Dialog, Sheet y Drawer siempre necesitan un título
DialogTitle, SheetTitle y DrawerTitle son obligatorios por accesibilidad. Usa className="sr-only" si el título debe estar oculto visualmente.
Nunca decodifiques los preset codes manualmente
Use npx shadcn@latest preset decode <code>, preset url <code>, o preset open <code>. Para la detección de preset consciente del proyecto, use preset resolve. Nunca construya las URL de preset manualmente.
Ejecute Todos los Comandos CLI con el Package Runner del Proyecto
Use npx shadcn@latest, pnpm dlx shadcn@latest, o bunx --bun shadcn@latest según el campo packageManager del proyecto. Nunca fije npx si el proyecto usa pnpm o bun.

04 Ponlo a trabajar

Instalar shadcn en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar shadcn a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

Forma genérica del CLI de skills para skills/shadcn/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

I need a settings page with tabs for profile, account, and notifications. Each tab should have form fields grouped by section, with a save button at the bottom. Use the project's existing shadcn components and follow the FieldGroup pattern. The profile tab needs an avatar upload, the account tab needs email and password inputs with inline buttons to change them, and the notifications tab needs toggle groups for frequency (daily, weekly, monthly) and a set of checkboxes for notification types. Make sure all validation states use data-invalid and aria-invalid correctly.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Ejecute npx shadcn@latest info para verificar que el componente se añadió a la lista de componentes instalados
Compruebe que las importaciones de iconos coincidan con el campo iconLibrary del proyecto (lucide-react, @tabler/icons-react, etc.)

En OpenDesign importe shadcn desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: shadcn
Repository: github.com/shadcn-ui/ui Rama main
Archivo de skill: skills/shadcn/SKILL.md Checksum del contenido registrado en la verificación; commit 2b3e6d4
License: MIT De LICENSE.md.
Estrellas del repositorio: 123.708 Snapshot de GitHub tomada el 14-09-2026 para todo el repositorio shadcn-ui/ui. No es una valoración ni recuento de uso de shadcn.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Contexto Actual del ProyectoInyecta la configuración en vivo del proyecto y los componentes instalados desde npx shadcn@latest info --json
PrincipiosUse primero los componentes existentes, componga en lugar de reinventar, use variantes integradas, use colores semánticos
Reglas CríticasReglas siempre aplicadas para estilos, formularios, composición, iconos, chat y CLI con enlaces a archivos detallados
Patrones ClaveLos patrones de código más comunes: diseño de formularios, validación, iconos en botones, espaciado, dimensiones iguales, colores de estado
Selección de ComponentesTabla que asigna necesidades de UI a los componentes shadcn correctos (botones, formularios, superposiciones, retroalimentación, navegación, chat)
Campos ClaveExplica aliases, isRSC, tailwindVersion, base, iconLibrary, resolvedPaths, framework, packageManager, preset desde el contexto del proyecto
Documentación, Ejemplos y Uso de ComponentesEjecute npx shadcn@latest docs para obtener las URL, y consúltelas para conocer la API y los patrones de uso correctos
Flujo de trabajoProceso de nueve pasos: obtener contexto, comprobar lo instalado, buscar, obtener la documentación, instalar, corregir importaciones, revisar, gestionar registros, cambiar de preajustes
Actualización de ComponentesUse --dry-run y --diff para fusionar cambios ascendentes preservando las modificaciones locales, nunca use --overwrite sin aprobación
Referencia RápidaEjemplos de comandos CLI para init, apply, add, search, docs, view, operaciones de preset con flags y sintaxis de registro
Referencias DetalladasEnlaces a archivos de reglas separados para formularios, composición, chat, iconos, estilos, base-vs-radix, CLI, registro, personalización

La descripción propia del Skill

«Gestiona componentes y proyectos de shadcn: agregar, buscar, corregir, depurar, estilizar y componer UI, incluidas interfaces de chat. Proporciona contexto de proyecto, documentación de componentes y ejemplos de uso. Se aplica al trabajar con shadcn/ui, registros de componentes, presets, códigos --preset o cualquier proyecto con un archivo components.json. También se activa con "shadcn init", "crear una app con --preset" o "cambiar a --preset".»

Descripción del front-matter de SKILL.md. El archivo completo tiene unos 19.427 caracteres. Lee el archivo completo en GitHub.

shadcn

Ejecuta shadcn en una tarea de diseño UI real.

Descarga OpenDesign, importa shadcn desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills

Terminal

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

Qué Hace el Skill de shadcn en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo usar la Skill shadcn

Buen caso de uso

Conozca los límites

Qué proporcionar

Reglas que el skill de shadcn le da a Claude Code y Codex

Usar gap-, nunca space-x- ni space-y-*

Los formularios usan FieldGroup + Field

Iconos en botones: usar data-icon

Los elementos siempre dentro de su grupo

Usar tokens de color semánticos, no valores en bruto

Dialog, Sheet y Drawer siempre necesitan un título

Nunca decodifiques los preset codes manualmente

Ejecute Todos los Comandos CLI con el Package Runner del Proyecto