# Baseline Ui > Pule rápido el código de interfaz corrigiendo espaciado, jerarquía, tipografía y pequeños problemas de layout. Úsalo cuando la interfaz necesite una limpieza o un pulido rápido. Fuente: https://skillsagentes.com/skills/ibelick/ui-skills/baseline-ui Markdown: https://skillsagentes.com/skills/ibelick/ui-skills/baseline-ui.md Repositorio: https://github.com/ibelick/ui-skills Autor: ibelick Licencia: MIT Actualizado: hace 3 meses Coste de contexto: 37 tok instalada, 855 tok al activarse, 855 tok con todos los archivos del bundle Bundle: 1 archivo, 3 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add ibelick/ui-skills --skill baseline-ui --agent claude-code # Cursor npx -y skills add ibelick/ui-skills --skill baseline-ui --agent cursor # Codex npx -y skills add ibelick/ui-skills --skill baseline-ui --agent codex # Gemini CLI npx -y skills add ibelick/ui-skills --skill baseline-ui --agent gemini # Windsurf npx -y skills add ibelick/ui-skills --skill baseline-ui --agent windsurf # Cline npx -y skills add ibelick/ui-skills --skill baseline-ui --agent cline ``` ## Qué hace - Aplica una línea base de UI con criterios definidos para evitar el 'slop' típico de las interfaces generadas por IA. - Corrige rápidamente el código de interfaz: espaciado, jerarquía, tipografía y pequeños problemas de layout. - Con `/baseline-ui `, revisa el archivo contra todas las restricciones y devuelve las violaciones (con la cita exacta), por qué importan y una corrección concreta a nivel de código. - Impone reglas de stack: Tailwind CSS por defecto, `motion/react` para animación con JavaScript, utilidad `cn` y primitivas de componentes accesibles (Base UI, React Aria, Radix). - Restringe animación, tipografía, layout y diseño a prácticas conservadoras: solo `transform` y `opacity`, `text-balance`, `h-dvh`, escala fija de `z-index`, sin gradientes ni brillos. ## Cuándo usarla - Cuando la interfaz necesite una limpieza o un pulido rápido. - Cuando haya que corregir espaciado, jerarquía, tipografía o pequeños problemas de layout. - Cuando se quiera revisar un archivo concreto contra la línea base con `/baseline-ui `. - Al iniciar cualquier trabajo de UI al que se quieran aplicar estas restricciones en la conversación. ## Qué la activa - "/baseline-ui" - "/baseline-ui src/components/Card.tsx" - "Aplica la línea base de UI a todo el trabajo de esta conversación." - "Revisa src/components/Button.tsx contra la línea base de UI." ## Antes de instalar - Requiere un proyecto con Tailwind CSS y la utilidad `cn` (`clsx` + `tailwind-merge`) disponibles. ## Archivos - SKILL.md — 3 KB ## SKILL.md Reproducido tal cual desde ibelick/ui-skills bajo MIT. Esta sección es el documento original y está en inglés. # Baseline UI Enforces an opinionated UI baseline to prevent AI-generated interface slop. ## How to use - `/baseline-ui` Apply these constraints to any UI work in this conversation. - `/baseline-ui ` Review the file against all constraints below and output: - violations (quote the exact line/snippet) - why it matters (1 short sentence) - a concrete fix (code-level suggestion) ## Stack - MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested - MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required - SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS - MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic ## Components - MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`) - MUST use the project’s existing component primitives first - NEVER mix primitive systems within the same interaction surface - SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack - MUST add an `aria-label` to icon-only buttons - NEVER rebuild keyboard or focus behavior by hand unless explicitly requested ## Interaction - MUST use an `AlertDialog` for destructive or irreversible actions - SHOULD use structural skeletons for loading states - NEVER use `h-screen`, use `h-dvh` - MUST respect `safe-area-inset` for fixed elements - MUST show errors next to where the action happens - NEVER block paste in `input` or `textarea` elements ## Animation - NEVER add animation unless it is explicitly requested - MUST animate only compositor props (`transform`, `opacity`) - NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`) - SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons) - SHOULD use `ease-out` on entrance - NEVER exceed `200ms` for interaction feedback - MUST pause looping animations when off-screen - SHOULD respect `prefers-reduced-motion` - NEVER introduce custom easing curves unless explicitly requested - SHOULD avoid animating large images or full-screen surfaces ## Typography - MUST use `text-balance` for headings and `text-pretty` for body/paragraphs - MUST use `tabular-nums` for data - SHOULD use `truncate` or `line-clamp` for dense UI - NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested ## Layout - MUST use a fixed `z-index` scale (no arbitrary `z-*`) - SHOULD use `size-*` for square elements instead of `w-*` + `h-*` ## Performance - NEVER animate large `blur()` or `backdrop-filter` surfaces - NEVER apply `will-change` outside an active animation - NEVER use `useEffect` for anything that can be expressed as render logic ## Design - NEVER use gradients unless explicitly requested - NEVER use purple or multicolor gradients - NEVER use glow effects as primary affordances - SHOULD use Tailwind CSS default shadow scale unless explicitly requested - MUST give empty states one clear next action - SHOULD limit accent color usage to one per view - SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [ibelick](https://skillsagentes.com/creators/ibelick.md) — 7 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Create Design Md](https://skillsagentes.com/skills/ibelick/ui-skills/create-design-md.md): Crea o actualiza un DESIGN.md desde un repositorio o web pública: documenta el lenguaje de diseño, reconstruye el sistema visual y extrae tokens y pautas de evidencia. No modifica código fuente ni convierte patrones accidentales en diseño. - [Improve Ui](https://skillsagentes.com/skills/ibelick/ui-skills/improve-ui.md): Audita una interfaz contra su diseño, detecta problemas de UI verificados y escribe planes autocontenidos sin tocar código. Útil para revisar, refinar o limpiar sin cambiar la identidad, ver deriva del design system o preparar un handoff. - [Ui Skills Root](https://skillsagentes.com/skills/ibelick/ui-skills/ui-skills-root.md): Úsalo antes de trabajo relacionado con UI para seleccionar el contexto de UI Skills más pequeño y útil a través de la CLI ui-skills. - [Fixing Accessibility](https://skillsagentes.com/skills/ibelick/ui-skills/fixing-accessibility.md): Audita y corrige problemas de accesibilidad HTML: ARIA, navegación por teclado, gestión del foco, contraste de color y errores de formulario. Úsalo al añadir controles interactivos, formularios, diálogos o revisar WCAG. - [Fixing Motion Performance](https://skillsagentes.com/skills/ibelick/ui-skills/fixing-motion-performance.md): Audita y corrige problemas de rendimiento en animaciones: layout thrashing, propiedades del compositor, movimiento ligado al scroll y desenfoques. Úsalo si las animaciones van a tirones o revisas el rendimiento de animaciones CSS/JS. ## Skills relacionadas - [Improve Ui](https://skillsagentes.com/skills/ibelick/ui-skills/improve-ui.md): Audita una interfaz contra su diseño, detecta problemas de UI verificados y escribe planes autocontenidos sin tocar código. Útil para revisar, refinar o limpiar sin cambiar la identidad, ver deriva del design system o preparar un handoff. - [Ui Skills Root](https://skillsagentes.com/skills/ibelick/ui-skills/ui-skills-root.md): Úsalo antes de trabajo relacionado con UI para seleccionar el contexto de UI Skills más pequeño y útil a través de la CLI ui-skills. - [Create Design Md](https://skillsagentes.com/skills/ibelick/ui-skills/create-design-md.md): Crea o actualiza un DESIGN.md desde un repositorio o web pública: documenta el lenguaje de diseño, reconstruye el sistema visual y extrae tokens y pautas de evidencia. No modifica código fuente ni convierte patrones accidentales en diseño. - [Fixing Accessibility](https://skillsagentes.com/skills/ibelick/ui-skills/fixing-accessibility.md): Audita y corrige problemas de accesibilidad HTML: ARIA, navegación por teclado, gestión del foco, contraste de color y errores de formulario. Úsalo al añadir controles interactivos, formularios, diálogos o revisar WCAG. - [Fixing Metadata](https://skillsagentes.com/skills/ibelick/ui-skills/fixing-metadata.md): Audita y corrige metadatos HTML: títulos, descripciones, canónicas, Open Graph, Twitter cards, favicons, JSON-LD y robots. Úsalo al añadir SEO, arreglar vistas previas, revisar Open Graph, configurar canónicas o publicar páginas nuevas. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)