Ir a la guía de uso
baseline-uipor Julien Thibeaut

Baseline UI Skill.

Un skill de Claude Code y Codex para revisión de diseño: mejora rápidamente el código de interfaz corrigiendo espaciado, jerarquía, tipografía y pequeños problemas de layout.

  • Revisión de Diseño y Accesibilidad
  • Código UI
ibelick/ui-skills · skills/baseline-ui/SKILL.mdSKILL.md
--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. --- ## How to use ## Stack ## Components ## Interaction ## Animation ## Typography
Encabezado y títulos de sección leídos del archivo original el 14 de septiembre de 2026 · 3.417 caracteres en total

01 Qué hace

Qué hace el skill baseline-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

Baseline UI es un skill de revisión que impone una base de UI con criterio propio para detener el desorden de interfaces generadas por IA en una base de código. Está pensado para proyectos de Tailwind CSS que usan primitivas de React, y se instala como un conjunto permanente de restricciones sobre cualquier trabajo de UI en la conversación, o como un pase de revisión a nivel de archivo.

Lo que lo hace específico es el vocabulario: nombra las utilidades y props exactas que hay que usar o evitar, desde h-dvh en lugar de h-screen y text-balance para los encabezados, hasta animaciones que solo usan el compositor limitadas a 200ms y sin valores de z-index arbitrarios. Úselo cuando la interfaz necesite una limpieza rápida o un pase de pulido.

Qué produce

  • Una explicación de una sola frase de por qué importa cada infracción.
  • Una solución concreta a nivel de código para cada hallazgo.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Invóquelo como un conjunto de restricciones para toda la conversación

    Ejecutar el comando sin argumentos aplica todas las restricciones de este archivo a cualquier trabajo de UI realizado en esa conversación, no solo a un archivo.

  2. 02
    O apúntelo a un único archivo

    Pasar un archivo como destino cambia el skill al modo de revisión, comprobando ese archivo contra todas las restricciones listadas a continuación.

  3. 03
    Devuelve un informe de infracciones en tres partes

    Cada hallazgo cita el fragmento problemático, ofrece una frase breve sobre por qué importa y propone una solución a nivel de código.

  4. 04
    Recorra los grupos de restricciones en orden

    El archivo organiza sus reglas en Stack, Components, Interaction, Animation, Typography, Layout, Performance y Design, cada uno mezclando elementos MUST, SHOULD y NEVER.

02 Encuentra tu caso de uso

Cuándo usar el skill baseline-ui

Usa el skill baseline-ui en Claude Code o Codex cuando el trabajo sea revisión de diseño de este tipo. El alcance y los límites que siguen están tomados del archivo del propio skill.

Buen caso de uso

  • Una limpieza rápida o un pase de pulido en una interfaz que se ha desviado de una línea base consistente.
  • Revisar un archivo específico en busca de problemas de espaciado, jerarquía, tipografía y pequeños problemas de layout.

Conozca los límites

  • Trabajo de diseño que depende de gradientes, curvas de easing personalizadas o letter-spacing personalizado, todo lo cual está bloqueado detrás de una solicitud explícita.
  • Programar manualmente el comportamiento de teclado o foco, lo cual no está permitido a menos que se solicite explícitamente.

Qué proporcionar

  • Un archivo para revisarOpcional. Nombrar un archivo convierte el skill en un pase de revisión que reporta infracciones solo para ese archivo.

03 Dentro del skill

Reglas que el skill baseline-ui 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.

  1. Manténgase en los valores predeterminados de Tailwind CSS

    Los valores personalizados solo son aceptables cuando ya existen en el proyecto o fueron solicitados explícitamente; de otro modo, el agente debe usar los valores predeterminados de Tailwind.

  2. Sin animación a menos que se solicite

    La animación está desactivada por defecto. Cuando se solicita explícitamente, solo pueden animarse propiedades del compositor, nunca width, height, top, left, margin o padding.

  3. Limite la retroalimentación de interacción a 200ms

    Las entradas deben usar ease-out, las animaciones en bucle deben pausarse cuando están fuera de pantalla, y debe respetarse prefers-reduced-motion.

  4. Nunca mezcle sistemas de primitivas

    Cualquier elemento con comportamiento de teclado o foco necesita una primitiva accesible de Base UI, React Aria o Radix; las primitivas existentes del proyecto tienen prioridad, y reconstruir manualmente el comportamiento de teclado o foco está prohibido a menos que se solicite explícitamente.

  5. Use h-dvh, nunca h-screen

    La sección de interacción también exige que los elementos fijos respeten safe-area-inset y que los errores se muestren junto al lugar donde ocurre la acción.

  6. Use una Escala Fija de z-index

    No se permiten valores z- arbitrarios, y los elementos cuadrados deben usar size- en lugar de los utilitarios w- y h- combinados.

  7. Mantenga los Utilitarios de Tipografía Literales

    text-balance para encabezados, text-pretty para el cuerpo de texto, tabular-nums para datos, y letter-spacing no debe modificarse a menos que se solicite explícitamente.

  8. Sin Gradientes ni Resplandor por Defecto

    Los gradientes requieren una solicitud explícita, los gradientes púrpura y multicolor quedan totalmente descartados, y los efectos de resplandor no pueden servir como affordances principales.

04 Ponlo a trabajar

Instalar baseline-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.

Agregar baseline-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/ibelick/ui-skills --skill baseline-ui

Forma genérica de la CLI de skills para skills/baseline-ui/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de revisión de diseño

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

Starter prompt
Review [src/components/SettingsDialog.tsx] against the baseline UI constraints. We generated this dialog quickly and the spacing, hierarchy and layout feel off, so report the violations with the exact lines, why they matter, and the code-level fix for each.

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:

  • Confirme que ninguna propiedad animada esté fuera de transform y opacity.
  • Confirme que los botones solo con icono lleven un aria-label y que las acciones destructivas estén detrás de un AlertDialog.

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

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.

Repository
github.com/ibelick/ui-skills Rama main
Archivo de skill
skills/baseline-ui/SKILL.md Suma de verificación del contenido registrada en la verificación; commit 79081ab
License
MIT De LICENSE.
Estrellas del repositorio
8.402 Instantánea de GitHub tomada el 14 de septiembre de 2026 para el repositorio completo ibelick/ui-skills, que contiene 5 skills en este catálogo. No es una calificación ni un recuento de uso para baseline-ui.
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

  1. Cómo usarloDos modos de invocación: el comando simple aplica las restricciones, y el argumento de archivo genera un informe de infracciones.
  2. StackValores predeterminados de Tailwind CSS, motion/react para animación en JS, tw-animate-css y el utilitario cn.
  3. ComponentesSolo primitivas accesibles, priorizando las primitivas existentes del proyecto, aria-label en botones solo con icono.
  4. InteracciónAlertDialog para acciones destructivas, skeletons para la carga, h-dvh, safe-area-inset, sin bloqueo de pegado.
  5. AnimaciónSin animación salvo que se solicite; solo propiedades del compositor, ease-out, límite de 200ms, respeto de reduced-motion.
  6. Tipografíatext-balance en encabezados, text-pretty en el cuerpo, tabular-nums para datos, sin cambios de tracking.
  7. DiseñoEscala fija de z-index en lugar de valores arbitrarios, size-* para elementos cuadrados.
  8. RendimientoEvite animaciones de blur o backdrop-filter grandes, limite el alcance de will-change, prefiera la lógica de renderizado sobre useEffect.
  9. DiseñoSin gradientes ni affordances de resplandor, escala de sombra por defecto, un solo color de acento, reutilice los tokens existentes.
La descripción propia del Skill
«Limpia código de interfaz rápidamente corrigiendo espaciado, jerarquía, tipografía y pequeños problemas de layout. Úsalo cuando la interfaz necesite una pasada rápida de limpieza o pulido.»

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 3.417 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill baseline-ui

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

¿Qué stack asume?

Valores predeterminados de Tailwind CSS, motion/react (antes framer-motion) cuando se requiere animación en JavaScript, tw-animate-css para animaciones de entrada y microanimaciones, y el utilitario cn construido a partir de clsx y tailwind-merge.

¿Añadirá animaciones o gradientes para que las cosas se vean mejor?

No. La animación nunca se añade a menos que se solicite explícitamente, y los degradados no se usan a menos que se solicite explícitamente. Los degradados morados y multicolor quedan descartados por completo.

¿Qué librerías de componentes permite?

Base UI, React Aria o Radix para cualquier elemento con comportamiento de teclado o foco, priorizando los primitivos ya existentes del proyecto. Base UI es la opción recomendada para primitivos nuevos si es compatible con el stack, y no está permitido mezclar sistemas de primitivos en una misma superficie de interacción.

Baseline UI

Ejecuta baseline-ui en una tarea real de revisión de diseño.

Descarga OpenDesign, importa baseline-ui desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows