83.3K+Descargar
Ir a la guía de uso
shadcn-uipor Google Labs

shadcn UI Skill.

Una skill de Claude Code y Codex para diseño UI: integración y personalización de componentes shadcn/ui: descubrimiento, instalación y buenas prácticas.

  • Web y UI
  • Código UI
Descargar OpenDesignVer guía de uso
google-labs-code/stitch-skills · plugins/stitch-build/skills/shadcn-ui/SKILL.mdSKILL.md
--- name: shadcn-ui description: Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices. --- ## Core Principles ## Component Discovery and Installation ## Project Setup ## Component Architecture ## Customization Best Practices ## Blocks and Complex Components
Front matter y encabezados de sección leídos del archivo original el 14/09/2026 · 9.117 caracteres en total

01 Qué hace

Qué hace el skill shadcn-ui 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 le da a un agente una guía experta para construir aplicaciones con shadcn/ui, la colección de componentes accesibles y personalizables creados con Radix UI o Base UI y Tailwind CSS. Cubre el descubrimiento de componentes mediante las herramientas MCP de shadcn, la instalación con la CLI o la integración manual, la configuración del proyecto mediante los comandos create e init, y las opciones de components.json como style, baseColor, cssVariables, rsc y rtl.

Explica la estructura de archivos de components/ui/ y el helper cn(), y luego la personalización mediante variables CSS en app/globals.css, las variantes de class-variance-authority y los componentes wrapper. Los bloques están organizados por categoría, seguidos de reglas de accesibilidad, patrones comunes de formularios, diálogos y tablas, solución de problemas y una lista de validación de cinco pasos.

Qué produce

  • Archivos fuente de componentes escritos en components/ui/ y conectados a sus importaciones.
  • Un components.json actualizado que refleja la configuración y los componentes añadidos.
  • Código fuente de bloques obtenido para interfaces multiarchivo como dashboards o flujos de inicio de sesión.
  • Sus propios archivos de componentes wrapper, por ejemplo components/custom-button.tsx.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Explorar Primero el Catálogo

    Explore los componentes disponibles mediante las herramientas MCP de shadcn en lugar de adivinar nombres, usando list_components, get_component_metadata y get_component_demo.

  2. 02
    Añadir el Componente con la CLI

    La ruta recomendada es el comando add, que descarga el código fuente adaptado a su configuración, instala las dependencias y coloca los archivos en components/ui/.

  3. 03
    O Integrar el Código Fuente a Mano

    Para la integración manual, obtenga el código con get_component, cree el archivo usted mismo, instale las dependencias entre pares y ajuste los imports.

  4. 04
    Inicializar la Configuración del Proyecto

    Los proyectos nuevos usan create para elegir estilo, fuentes y librería de componentes; los proyectos existentes ejecutan init, que genera components.json.

  5. 05
    Aplicar Tema con Variables CSS

    Los colores residen en la configuración de Tailwind y en variables CSS, con un bloque .dark que proporciona los overrides del modo oscuro.

  6. 06
    Validar Antes de Confirmar los Cambios

    Verifique tipos, ejecute el linter, pruebe la accesibilidad, revise los modos claro y oscuro y verifique los breakpoints.

02 Encuentra tu caso de uso

Cuándo usar el skill shadcn-ui

Usa el skill shadcn-ui 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

  • Iniciar un proyecto nuevo donde el estilo, las fuentes y la librería de componentes deban elegirse desde el principio.
  • Incorporar shadcn/ui a una base de código existente que necesita una configuración components.json.
  • Trabajar con un registro privado o de equipo declarado en components.json, o explorar el Registry Directory público.
  • Ensamblar pantallas más grandes, como flujos de autenticación o paneles, a partir de bloques prediseñados.
  • Proyectos en los que la navegación por teclado, los atributos ARIA y la gestión del foco son innegociables.

Conozca los límites

  • Las versiones de los componentes y de las primitivas se desalinean, por lo que las actualizaciones pueden romperse y requieren revisar las notas de la versión.

Qué proporcionar

  • Librería de primitivasElija Radix UI o Base UI; el código fuente descargado se adapta a esa elección.
  • Nombres de registrosCuando se configura más de un registro predeterminado, liste lo disponible antes de extraer elementos de él.
  • Categoría de bloqueUn filtro de categoría opcional restringe qué bloques se listan antes de obtener su código fuente.

03 Dentro del skill

Reglas que el Skill shadcn-ui Proporciona a Claude Code y Codex

7 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

  1. Apropiarse del Código de los Componentes

    Trate los componentes como código fuente que copió y que puede reescribir, no como una dependencia que se actualiza en bloque; puede cambiar el estilo, el comportamiento y la estructura libremente.

  2. Mantenga los wrappers fuera de Components/ui/

    Los componentes compuestos o extendidos van en components/, nunca en components/ui/, que contiene los propios componentes de shadcn.

  3. Combine clases con Cn()

    Cada componente de shadcn usa el helper cn(), una combinación de clsx y tailwind-merge, para que las anulaciones no entren en conflicto.

  4. Exprese variantes con Cva

    La lógica de variantes y tamaños pertenece a class-variance-authority, con defaultVariants declarando qué variante y tamaño se aplican cuando no se pasa ninguno.

  5. Conserve la accesibilidad al personalizar

    Mantenga los atributos ARIA, conserve los controladores de teclado, pruebe con lectores de pantalla y mantenga indicadores de foco visibles.

  6. Respete los requisitos del entorno de ejecución

    shadcn/ui v4 necesita React 18+ y, en proyectos Next.js, Next.js 13+; algunos componentes también fijan versiones específicas de Radix UI.

  7. Instale usted mismo las dependencias entre pares al hacerlo manualmente

    La integración manual significa que usted resuelve las dependencias entre pares y corrige las importaciones a mano en lugar de dejar que lo haga el CLI.

04 Ponlo a trabajar

Instalar shadcn-ui 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.

Añadir shadcn-ui 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/google-labs-code/stitch-skills --skill shadcn-ui

Forma genérica del CLI de skills para plugins/stitch-build/skills/shadcn-ui/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
Set up shadcn/ui in my existing [Next.js app] with the new-york style and zinc base color, then add Button, Card and Dialog. Use the login block for the sign-in page, and wrap Button in a LoadingButton in components/ that shows a spinner while [the form submission] is pending. Keep the ARIA attributes and keyboard handling intact.

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 el linter del proyecto para detectar problemas de estilo en el código copiado.
  • Verifique la accesibilidad con herramientas como axe DevTools.
  • Haga una revisión visual tanto en modo claro como en modo oscuro.
  • Verifique el comportamiento en distintos breakpoints.

En OpenDesign shadcn-ui viene incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer 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
Google Labs
Repository
github.com/google-labs-code/stitch-skills Rama main
Archivo de skill
plugins/stitch-build/skills/shadcn-ui/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 0337446
License
Apache-2.0 De LICENSE.
Estrellas del repositorio
8.304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for shadcn-ui.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. Principios fundamentalesPor qué el código copiado que usted posee es mejor que una dependencia.
  2. Descubrimiento e instalación de componentesHerramientas MCP, instalación por CLI frente a manual, registros personalizados.
  3. Configuración del proyectocreate frente a init, opciones de components.json, dependencias necesarias.
  4. Arquitectura de componentesEstructura de directorios y la utilidad de combinación de clases cn().
  5. Buenas prácticas de personalizaciónTemas con variables CSS, variantes de cva, componentes wrapper fuera de components/ui/.
  6. Bloques y componentes complejosListado, obtención e instalación de bloques multiarchivo por categoría.
  7. AccesibilidadComportamiento de teclado, ARIA, foco y estados deshabilitados respaldado por Radix que debe preservarse.
  8. Patrones ComunesRecetas de importación para formularios, diálogos y tablas de datos.
  9. Solución de ProblemasSoluciones para problemas de importación, conflictos de estilo, dependencias y versiones.
  10. Validación y CalidadCinco verificaciones previas al commit, desde la comprobación de tipos hasta el control de calidad responsive.
  11. RecursosArchivos de referencia de configuración, catálogo, personalización y migración.
  12. EjemplosImplementaciones de ejemplo más patrones de formularios, paneles, autenticación y tablas de datos.
La descripción propia del Skill
Orientación experta para integrar y construir aplicaciones con componentes shadcn/ui, incluyendo descubrimiento, instalación, personalización y mejores prácticas de componentes.

Descripción de front-matter de SKILL.md. El archivo completo tiene aproximadamente 9.117 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill shadcn-ui

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Radix UI o Base UI?

Cualquiera de los dos. Usted elige el primitivo en su configuración y la CLI adapta el código fuente descargado en consecuencia. Las garantías de accesibilidad descritas están vinculadas a componentes construidos sobre primitivos de Radix UI.

shadcn UI

Ejecute shadcn-ui en una tarea de diseño UI real.

El skill shadcn-ui está incluido en OpenDesign. Descargue la aplicación, seleccione el skill en Plugins → Skills, pegue el prompt anterior y lea el plan antes del resultado.

Descargar OpenDesignVer todas las skills
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui