Skill shadcn/ui para OpenClaw

Descripción General del Skill shadcn/ui de OpenClaw

El skill shadcn/ui conecta OpenClaw con la biblioteca de componentes shadcn/ui, otorgando a tu agente la capacidad de añadir, configurar y componer componentes React accesibles en tu proyecto. Una vez instalado, puedes generar funcionalidades completas de interfaz — formularios, tablas de datos, navegación, diálogos y más — usando descripciones en lenguaje natural.

A diferencia de las bibliotecas de componentes tradicionales que se distribuyen como paquetes npm, shadcn/ui copia el código fuente de los componentes directamente en tu proyecto. Esto significa que eres dueño de cada línea de código y puedes personalizar los componentes sin luchar contra abstracciones de la biblioteca. El skill shadcn/ui de OpenClaw hace este flujo de trabajo aún más rápido al gestionar la selección, instalación, composición y estilización de componentes a través de conversación.

Flujo de trabajo típico:

1. Pide a OpenClaw que añada una tabla de datos con ordenación y paginación.
2. El agente ejecuta npx shadcn@latest add table y los componentes relacionados, luego genera la implementación de la tabla con las columnas que especificaste.
3. Una tabla de datos completamente funcional y accesible aparece en tu proyecto — lista para personalizar.

Este skill está diseñado para proyectos React y Next.js que usan Tailwind CSS. Se combina naturalmente con el skill de Frontend Design para orientación en diseño y UX, y funciona bien junto a cualquier flujo de trabajo de sistema de diseño.

Requisitos Previos para el Skill shadcn/ui

Antes de instalar el skill shadcn/ui, asegúrate de tener:

• OpenClaw instalado y en ejecución (v1.0+)
• Un proyecto React o Next.js con Tailwind CSS configurado
• Node.js v18+ y un gestor de paquetes (npm, pnpm o bun)
• clawhub CLI instalado para la gestión de skills

Verifica tu configuración:

# Comprobar la versión de OpenClaw
openclaw --version

# Comprobar la versión de Node.js
node --version

# Verificar que Tailwind CSS está configurado
npx tailwindcss --help

Si estás comenzando un nuevo proyecto, el agente puede ayudarte a inicializar un proyecto Next.js con shadcn/ui preconfigurado usando npx shadcn@latest init.

Cómo Instalar el Skill shadcn/ui

Instala el skill shadcn/ui con un solo comando:

npx clawhub@latest install shadcn-ui

Para verificar la instalación:

clawhub list

Deberías ver shadcn-ui en la lista de skills instalados.

Configuración del Skill shadcn/ui

El skill shadcn/ui no requiere claves de API ni autenticación externa. Funciona con los archivos locales de tu proyecto y el CLI de shadcn.

Inicialización del Proyecto

Si tu proyecto aún no tiene shadcn/ui configurado, el agente puede inicializarlo:

# Inicializar shadcn/ui en tu proyecto
npx shadcn@latest init

Esto crea un archivo de configuración components.json en la raíz de tu proyecto con ajustes para:

| Ajuste | Descripción | |--------|-------------| | style | Variante de estilo del componente (default o new-york) | | tailwind.baseColor | Color base para el tema (slate, gray, zinc, etc.) | | tailwind.cssVariables | Si se usan variables CSS para la tematización | | aliases.components | Alias de ruta de importación para componentes | | aliases.utils | Alias de ruta de importación para funciones utilitarias |

Personalización del Tema

Personaliza el tema predeterminado editando tus variables CSS o pidiendo al agente que ajuste los colores:

/* Ejemplo: Variables de tema personalizadas en globals.css */
@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
  }
}

Importante: Los componentes shadcn/ui se copian en el código fuente de tu proyecto. Tienes control total sobre cada componente — no hay dependencias ocultas ni abstracciones bloqueadas.

Ejemplos de Uso del Skill shadcn/ui

1. Añadir un Formulario Completo

Tú: "Crea un formulario de registro de usuario con campos para nombre, correo electrónico, contraseña y una casilla de términos y condiciones. Añade validación usando zod."

El agente instala los componentes necesarios (form, input, checkbox, button, label) usando npx shadcn@latest add, luego genera un componente de formulario completo con validación de esquema zod, mensajes de error y etiquetas accesibles. El formulario sigue los patrones de React Hook Form y está listo para conectarse a tu API.

2. Construir una Tabla de Datos

Tú: "Añade una tabla de datos para mostrar usuarios con columnas para nombre, correo electrónico, rol y estado. Incluye ordenación, filtrado y paginación."

El agente añade el componente table y construye una tabla de datos completa usando @tanstack/react-table. Genera definiciones de columnas, controles de filtrado, manejadores de ordenación y paginación — todo con tipos TypeScript adecuados y atributos de accesibilidad.

3. Crear un Diseño de Panel de Control

Tú: "Configura un diseño de panel de control con una barra lateral plegable, barra de navegación superior, migas de pan y un área de contenido principal."

El agente instala los componentes sidebar, navigation-menu, breadcrumb y separator, luego los ensambla en un diseño responsivo con un botón de alternancia de barra lateral compatible con dispositivos móviles y una estructura HTML semántica adecuada.

4. Añadir una Paleta de Comandos

Tú: "Añade una paleta de comandos como la de VS Code con el atajo Ctrl+K que permita a los usuarios buscar páginas y acciones."

El agente instala los componentes command y dialog, configura el detector de atajos de teclado y crea un menú de comandos con búsqueda, elementos agrupados, íconos y manejadores de navegación.

5. Componer una Página de Configuración

Tú: "Construye una página de configuración con pestañas para Perfil, Cuenta, Notificaciones y Apariencia. Usa tarjetas dentro de cada pestaña para agrupar opciones relacionadas."

El agente instala los componentes tabs, card, switch, select y separator, luego construye una interfaz de configuración completa con campos de formulario, interruptores y selectores desplegables organizados en grupos lógicos de pestañas.

Seguridad y Mejores Prácticas

Sigue estas directrices al usar el skill shadcn/ui:

• Revisa el código generado. El agente genera código de componentes directamente en tu proyecto. Siempre revisa los archivos nuevos y los cambios antes de hacer commit, especialmente los manejadores de formularios y las integraciones con APIs.
• Valida la entrada del usuario. shadcn/ui proporciona componentes de interfaz, no validación de entrada. Siempre combina los formularios con validación del lado del servidor usando bibliotecas como zod o yup, y sanitiza las entradas antes de procesarlas.
• Mantén las dependencias actualizadas. Los componentes shadcn/ui dependen de primitivos de Radix UI y otros paquetes. Ejecuta npm audit periódicamente y actualiza las dependencias vulnerables.
• Usa HTML semántico. El agente genera marcado accesible por defecto, pero verifica que las modificaciones personalizadas preserven los atributos ARIA y la navegación por teclado.
• Sigue el patrón de componentes. Mantén los componentes shadcn/ui en tu directorio de componentes designado (por ejemplo, components/ui/). Evita modificarlos en línea — extiéndelos mediante composición. Revisa la Lista de Verificación de Seguridad para orientación general sobre OpenClaw.

Solución de Errores Comunes

"components.json not found"

Tu proyecto aún no ha sido inicializado con shadcn/ui.

# Inicializar shadcn/ui en tu proyecto
npx shadcn@latest init

Sigue las indicaciones para seleccionar tu estilo, color base y alias de importación. El agente también puede ejecutar esto por ti.

"Module not found: Can't resolve '@/components/ui/button'"

El alias de ruta de importación no coincide con la configuración de tu proyecto.

1. Revisa tu components.json para verificar la ruta del alias configurado.
2. Verifica que tu tsconfig.json tenga alias de ruta coincidentes:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3. Si usas Next.js, reinicia el servidor de desarrollo después de cambiar tsconfig.json.

"Tailwind CSS classes not applying"

Tailwind no está procesando el directorio de archivos de componentes.

1. Verifica que tu tailwind.config.js incluya la ruta de componentes:

module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
}

2. Asegúrate de que globals.css importe las directivas de Tailwind (@tailwind base; @tailwind components; @tailwind utilities;).
3. Reinicia el servidor de desarrollo.