ui-stylingpor nextlevelbuilder

UI Styling Skill.

Un skill de Claude Code y Codex para diseño UI: estilos de interfaz accesibles con shadcn/ui, Tailwind CSS y visuales basados en canvas.

Web y UI
Código UI

Descargar OpenDesign Ver guía de uso

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-styling/SKILL.mdSKILL.md

--- name: ui-styling description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and … --- ## When to Use This Skill ## Core Stack ## Script Paths ## Quick Start ## Component Library Guide ## Theme & Customization

Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 10.626 caracteres en total

01 Qué hace

Qué Hace el Skill ui-styling 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 construye interfaces de usuario React accesibles combinando componentes shadcn/ui (primitivas de Radix UI con Tailwind CSS), estilización utility-first con Tailwind CSS y sistemas de diseño visual basados en canvas. Está orientado a proyectos Next.js, Vite, Remix y Astro. Los componentes se copian en su base de código mediante CLI, lo que le da control total y seguridad de tipos con TypeScript.

El skill cubre diseños responsivos, modo oscuro, tokens de diseño, validación de formularios, tablas de datos y composiciones visuales de calidad museística. Incluye documentación de referencia para patrones de componentes, theming, accesibilidad (ARIA, navegación por teclado), breakpoints responsivos y personalización de Tailwind. Los scripts de Python automatizan la instalación de componentes y la generación de configuración.

Qué produce

tailwind.config.js generado con tokens de tema personalizados, colores, tipografías, espaciado y extensiones de breakpoints.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Inicializar Shadcn/ui con Tailwind
Ejecute npx shadcn@latest init para configurar tanto shadcn/ui como Tailwind CSS, con solicitudes sobre framework, TypeScript, rutas y preferencias de tema.
02
Agregar Componentes a Su Base de Código
Instale componentes con npx shadcn@latest add button card dialog form, que los copia en su proyecto para brindarle control y personalización total.
03
Componer con Clases de Utilidad
Combine componentes shadcn/ui con clases de utilidad de Tailwind para diseños responsivos, espaciado, colores y estados de hover directamente en los atributos className de JSX.
04
Aplicar Variantes de Modo Oscuro
Use next-themes para el cambio de tema y agregue clases de utilidad con prefijo dark: a todos los elementos con tema para un soporte de modo oscuro consistente.
05
Aprovechar la Accesibilidad de Radix
Las primitivas de Radix UI proporcionan patrones ARIA integrados, navegación por teclado y gestión de foco sin configuración adicional.

02 Encuentra tu caso de uso

Cuándo Usar el Skill ui-styling

Usa el skill ui-styling en Claude Code o Codex cuando el trabajo sea diseño UI de este tipo. Ajuste y límites abajo están tomados del archivo propio del skill.

Buen caso de uso

Construir interfaces de usuario con frameworks basados en React como Next.js, Vite, Remix o Astro.
Implementar componentes accesibles como diálogos, formularios, tablas y navegación.
Crear diseños responsivos, mobile-first, con un enfoque de CSS utility-first.
Construir sistemas de diseño con tokens consistentes y soporte de modo oscuro.
Generar diseños visuales, pósteres o materiales de marca con workflows basados en canvas.

Conozca los límites

Requiere shadcn/ui, Tailwind CSSEl SKILL.md nombra esta dependencia; la skill no funciona sin ella en tu proyecto.

Qué proporcionar

Nombres de componentes para instalaciónPase los nombres de componentes a shadcn_add.py o npx shadcn@latest add para instalarlos con gestión de dependencias.
Tokens de tema personalizadosProporcione colores y tipografías personalizadas a tailwind_config_gen.py para generar tailwind.config.js con el tema extendido.

03 Dentro del skill

Reglas que el Skill ui-styling 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.

Responsivo Mobile-first
Empiece con estilos móviles y superponga variantes responsivas usando breakpoints (sm, md, lg, xl, 2xl). Tailwind procesa mobile-first por defecto.
Extracción utility-first
Use las clases de Tailwind directamente en JSX. Extraiga componentes solo para repetición real, no para patrones de un solo uso.
Rutas de scripts relativas al directorio del skill
Las rutas de los scripts en este skill son relativas al directorio que contiene SKILL.md, no a la raíz del proyecto.
Uso de componentes centrado en la accesibilidad
Aproveche los primitivos de Radix UI para los patrones ARIA, añada estados de foco a los elementos interactivos y use HTML semántico. El soporte de lectores de pantalla está integrado en los componentes de shadcn/ui.
Design tokens para la consistencia
Use una escala de espaciado, paletas de color y sistema tipográfico consistentes definidos en la configuración de Tailwind. Aplique las variables del tema en lugar de valores arbitrarios.
Seguridad de tipos con TypeScript
Todos los componentes son TypeScript-first con seguridad de tipos completa. Use props tipadas y esquemas de formulario para una mejor experiencia de desarrollo.
Evite nombres de clase dinámicos
La purga automática de CSS de Tailwind requiere nombres de clase estáticos. La construcción dinámica de clases impide la eliminación del código muerto.
Estándar de artesanía experta
Cada detalle importa: trate la UI como un oficio. Aplique una ejecución de calidad de museo a las composiciones visuales con patrones sistemáticos y estéticas refinadas.

04 Ponlo a trabajar

Instalar ui-styling 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 ui-styling 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/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Formato genérico de la CLI skills para .claude/skills/ui-styling/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

Build a responsive dashboard with a three-column card grid layout that shows analytics metrics. Add a data table component with sorting and filtering for user records. Implement dark mode using next-themes with consistent color variants across all cards and table elements. Include a form dialog with email and password validation using react-hook-form and zod schema. Make sure all interactive elements have proper focus states and keyboard navigation.

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:

Pruebe los breakpoints responsivos en sm, md, lg, xl y 2xl para asegurar que el diseño mobile-first se adapta correctamente.
Valide la accesibilidad probando la navegación por teclado, la gestión del foco y los anuncios de lectores de pantalla en diálogos y formularios.
Revise la validación de formularios con react-hook-form y el resolver de zod para asegurar que los mensajes de error se muestran correctamente.

En OpenDesign importe ui-styling desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, y 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: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Rama main
Archivo de skill: .claude/skills/ui-styling/SKILL.md Suma de verificación de contenido registrada en la validación; commit 7f69fed
License: Apache-2.0 De .claude/skills/ui-styling/LICENSE.txt; el SKILL.md dice "MIT". El archivo LICENSE.txt de nivel individual dice Apache-2.0 mientras el front matter dice MIT; listada por la licencia a nivel de archivo.
Estrellas del repositorio: 127.450 Snapshot de GitHub tomado el 14/09/2026 para todo el repositorio nextlevelbuilder/ui-ux-pro-max-skill, que contiene 7 skills en este catálogo. No es una calificación ni un recuento de uso para ui-styling.
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

Cuándo usar este skillEnumera escenarios: frameworks de React, componentes accesibles, diseños responsivos, modo oscuro, sistemas de diseño, diseños visuales.
Stack principalDescribe los componentes de shadcn/ui, el estilizado con utilidades de Tailwind y las capas de diseño visual en canvas.
Rutas de scriptsExplica que las rutas de los scripts son relativas al directorio del skill, no a la raíz del proyecto.
Inicio rápidoMuestra la inicialización de shadcn/ui, la instalación de componentes y la configuración solo con Tailwind para Vite.
Guía de la librería de componentesRemite a shadcn-components.md, que cubre formularios, layouts, overlays, feedback y componentes de visualización.
Tema y personalizaciónRemite a shadcn-theming.md para el modo oscuro, variables CSS, colores y variantes de componentes.
Patrones de accesibilidadRemite a shadcn-accessibility.md para ARIA, navegación por teclado, gestión del foco y lectores de pantalla.
Utilidades de TailwindRemite a tailwind-utilities.md para diseño, espaciado, tipografía, colores, bordes y sombras.
Diseño responsivoRemite a tailwind-responsive.md para breakpoints mobile-first y patrones de utilidades responsivas.
Personalización de TailwindRemite a tailwind-customization.md para la estructura de configuración, utilidades personalizadas, plugins y extensiones de tema.
Sistema de diseño visualRemite a canvas-design-system.md para la filosofía de diseño, la comunicación visual y composiciones sofisticadas.
Scripts de utilidadDescribe shadcn_add.py para la instalación de componentes y tailwind_config_gen.py para la generación de configuración.

La descripción propia del Skill

"Crea interfaces de usuario hermosas y accesibles con componentes shadcn/ui (basados en Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas. Usar cuando construyas interfaces de usuario, implementes sistemas de diseño, crees layouts responsivos, agregues componentes accesibles (diálogos, desplegables, formularios, tablas), personalices temas y colores, implementes modo oscuro, generes diseños visuales y pósteres, o establezcas patrones de estilo consistentes en aplicaciones."

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

06 Antes de instalar

Preguntas sobre el skill ui-styling

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

¿Qué formatos de salida produce el sistema de diseño visual?

La capa de diseño visual basada en canvas crea composiciones de calidad museística para diseños visuales, pósteres y materiales de marca. Sigue un enfoque impulsado por la filosofía, con texto mínimo y máximo impacto visual.

UI Styling

Ejecuta ui-styling en una tarea real de diseño UI.

Descarga OpenDesign, importa ui-styling 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/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Qué Hace el Skill ui-styling en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo Usar el Skill ui-styling

Buen caso de uso

Conozca los límites

Qué proporcionar

Reglas que el Skill ui-styling Da a Claude Code y Codex

Responsivo Mobile-first

Extracción utility-first

Rutas de scripts relativas al directorio del skill

Uso de componentes centrado en la accesibilidad

Design tokens para la consistencia

Seguridad de tipos con TypeScript

Evite nombres de clase dinámicos

Estándar de artesanía experta