Skills Agentes

Improve Ui

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.

Estrellas
8.3k

en todo el repo

Actividad
51

0–100, la ruta de este skill

Actualizado
el mes pasado

último commit aquí

Commits
1

últimos 90 días

Contexto
2k tok

91 tok en reposo

Paquete
3 archivos

10 KB

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add ibelick/ui-skills --skill improve-ui --agent claude-code

Se instala solo en este repositorio.

Qué hace

  • Audita una superficie de producto concreta trazando su ruta real de renderizado y nunca modifica el código fuente.
  • Reconstruye el sistema de diseño local y solo admite hallazgos con pruebas de contrato, runtime y corrección.
  • Escribe planes de implementación autocontenidos en `design-plans/` para que otro agente los ejecute.
  • Detiene el informe en tres hallazgos y pide que elijas antes de convertirlos en planes.

Úsalo cuando

  • Te piden revisar, refinar, mejorar o limpiar una interfaz sin reemplazar su identidad.
  • Hay que investigar si una superficie se ha desviado del design system.
  • Hay que preparar un handoff de diseño para que otro agente implemente los cambios.

No lo uses cuando

    Qué lo activa

    Di cualquiera de estas frases y el agente debería cargar este skill.

    • Revisa esta interfaz y dime qué problemas de UI tiene.
    • Refina la página de inicio sin cambiar su identidad.
    • Investiga si este módulo se está alejando del design system.
    • Prepara un handoff de diseño para la pantalla de ajustes.
    • Limpia la interfaz de la ficha de producto y propón mejoras.

    SKILL.md

    En inglés

    Improve UI

    Audit one coherent product surface against the system that actually governs it. Preserve the product's identity, reuse existing owners, and prefer no finding to an unsupported one. Write plans only for changes the user selects; another agent executes them.

    Boundaries

    • Never modify product source. Create or edit files only under design-plans/.
    • Do not install dependencies, run formatters, commit, push, or otherwise mutate the working tree.
    • Do not update design documentation. Record accepted documentation changes in the plan for its executor.
    • Use rendered evidence only when the user provides it or explicitly requests visual inspection.
    • Make every plan self-contained; its executor has no context from the audit or conversation.

    1. Select the surface

    Honor the user's scope. If the request is broad, select one deployable application and one coherent surface family representing a primary product task. State the selection; do not synthesize the whole repository into one product.

    Start from the surface's routes and layouts. Trace the rendered path through compositions, shared components, variants, resolved tokens, and styles. Do not begin with a repository-wide search for inconsistencies.

    A connection exists only when it is proven through rendering, imports, props, resolved configuration, CSS inheritance, or a generated artifact loaded by the surface. Shared names, similar tokens, repository proximity, and conceptual relationships do not establish a connection. Exclude other applications, previews, configurators, generated registries, legacy systems, and enterprise variants unless they participate in the traced path.

    2. Reconstruct the local system

    Check for DESIGN.md, repository guidance, and surface-local design documentation. Use a source only after proving it is current and governs the selected surface; drafts, proposals, migrations, and task lists describe future intent unless explicitly accepted and current. Absence of design documentation is not a finding.

    Inspect only the tokens, variables, themes, primitives, variants, and compositions relevant to the traced path. Resolve aliases and variants to their definitions. Classify an implementation as local or legacy only when the repository says so.

    Record:

    ## Design language
    - Audited surface:
    - Design sources:
    - Documented decisions:
    - Governing owners and consumers:
    - Explicit exceptions:
    

    Write None documented under Explicit exceptions unless a cited source explicitly identifies the exception.

    3. Prove findings

    Before applying the proof gate, inspect every traced surface's user-facing labels, active-state presentation, responsive branches, and sibling variants for internal contradictions. Treat the results only as candidates.

    A finding is in scope only when its correction primarily changes visual presentation, interface copy, layout, component styling, or conformance to a documented design rule. If the correction primarily changes whether product behavior works, reject it.

    Search results, repetition, and implementation differences produce candidates, not findings. Keep a candidate only when all three proofs exist:

    1. Contract — Cite a binding design decision for this property and scope, or a direct contradiction in user-facing presentation or content within the same task. “Prefer,” “generally,” names, omissions, repetition, and absence of an exception do not establish a contract.
    2. Runtime — Prove that the cited owner, value, or behavior reaches the affected surface through the traced runtime path. Do not compare separate ownership layers or lifecycle states.
    3. Correction — State one change required by the evidence. If it depends on an existing token, variant, primitive, or exemplar, name it exactly. If the evidence cannot determine the correct choice, the intended condition is ambiguous, the proposal contains alternatives, or the correction requires inventing product intent, reject the candidate.

    Source can prove token, typography, color, spacing, layout, copy, component-variant, responsive-presentation, and explicit design-contract violations. It cannot turn functional behavior, state management, or interaction correctness into design findings. Hierarchy, prominence, density, clarity, discoverability, usability, and perceived coherence require rendered or user evidence.

    Discard accessibility and HTML/ARIA semantic findings unless the user explicitly requests them. Discard broken routes, redirects, data wiring, action failures, metadata, package API, performance, architecture, and code-quality findings unless the user requested them or a product-specific design contract governs them.

    Assign confidence only after all proofs pass. Reuse an existing owner when the evidence supports it; do not create a shared primitive from repetition alone.

    4. Vet findings

    Before reporting, re-open every cited source and try to falsify each candidate. Delete it when:

    • The problem does not exactly match the cited implementation.
    • The rule does not govern that property and surface.
    • Counterevidence shows the difference is valid or deliberate.
    • The evidence supports multiple corrections.
    • The correction invents product intent.
    • Another finding describes the same root problem.

    Only findings that survive this pass may enter the table.

    5. Report

    Order surviving findings by confidence, user impact, reach, and correction cost. Stop at three.

    Use this structure:

    ## Design language
    - Audited surface:
    - Design sources:
    - Documented decisions:
    - Governing owners and consumers:
    - Explicit exceptions:
    
    ## Findings
    | # | Problem | Evidence | Proposed change | Scope | Confidence |
    | --- | --- | --- | --- | --- | --- |
    
    ## Improve first
    <Highest-leverage finding and why, or no supported recommendation.>
    

    Evidence must establish the contract, runtime relationship, and deterministic interface consequence. Proposed change must contain one correction. Delete unsupported or overlapping rows before returning.

    Delete any finding that does not include every required column, including Confidence.

    Under Improve first, select one surviving finding with the strongest evidence and highest leverage. Never combine findings.

    If no candidate survives, write No supported findings were found. under ## Findings and No supported recommendation. under ## Improve first.

    If findings survive, stop and ask which to turn into plans. If the user already selected a finding or explicitly requested a plan for a described improvement, continue with that scope. If asked to fix or improve directly, offer a plan; never implement it.

    6. Specify selected changes

    Read references/plan-template.md. Write one plan per selected change, never one per symptom.

    Before writing, re-open every cited source, record the current commit when available, identify exact reusable primitives and exemplars, and trace affected surfaces. Reconcile an existing plan instead of duplicating it.

    Do not invent values when the repository provides a token or component contract. Introduce a primitive only after proving why the existing system cannot express the decision and which consumers should share it.

    If asked to reconcile, recheck existing plans against current source and documented decisions; update stale evidence, affected surfaces, and status.

    Reproducido de ibelick/ui-skills bajo licencia MIT. Leer esta página en markdown.

    Archivos

    3 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

    Detalles

    Creador
    ibelick
    Categoría
    Diseño y UI
    Licencia
    MIT
    Recursos incluidos
    referencias
    Código fuente
    Ver SKILL.md

    Etiquetas

    Más de ibelick/ui-skills

    Este repo incluye 7 skills. Si instalas uno, normalmente ya tienes los demás. Ver el pack ui-skills entero y su comando de instalación

    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.

    Costo de contexto al activarse
    4.1k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    el mes pasado
    herramientas desarrollo

    Ú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.

    Costo de contexto al activarse
    362 tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 2 meses
    diseno 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.

    Costo de contexto al activarse
    855 tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 3 meses
    diseno ui

    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.

    Costo de contexto al activarse
    1.2k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 6 meses
    herramientas desarrollo

    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.

    Costo de contexto al activarse
    1.4k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 6 meses
    herramientas desarrollo

    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.

    Costo de contexto al activarse
    1.1k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 7 meses
    seo geo

    Skills relacionados

    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.

    Costo de contexto al activarse
    855 tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 3 meses
    diseno ui

    Ú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.

    Costo de contexto al activarse
    362 tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 2 meses
    diseno ui

    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.

    Costo de contexto al activarse
    4.1k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    el mes pasado
    herramientas desarrollo