Communitygithub.com

TomasValleDuran/ui-ux-playbook

El punto de entrada para cualquier trabajo de UI/UX en web o móvil: flujo de trabajo completo (brief → dirección → sistema → stack → construcción → animación → verificación), estándares de la industria y mejores prácticas (WCAG 2.2, Apple HIG, Material 3, heurísticas de Nielsen, Leyes de UX, Core Web Vitals, formularios, navegación, estados, i18n), una lista de verificación previa al lanzamiento y un mapa de ruta que te indica qué skill especializado cargar para cada subtarea.

¿Qué es ui-ux-playbook?

Este playbook es el recurso central para cualquier tarea de diseño de interfaces, ya sea para web o aplicaciones móviles. Proporciona un flujo de trabajo completo de 8 pasos que va desde el brief inicial hasta la verificación final, cubriendo dirección estética, sistemas de diseño, construcción con estados reales, animación con propósito y revisión de accesibilidad y rendimiento. Además, incluye una tabla de enrutamiento que te guía para cargar el skill especializado adecuado (como `frontend-design`, `color-theory`, `better-accessibility`, `animate`, etc.) según la tarea específica que necesites resolver, evitando conflictos entre skills. El playbook también condensa los estándares clave de accesibilidad (WCAG 2.2 AA), plataformas (iOS HIG, Material 3), rendimiento (Core Web Vitals) y principios de UX (heurísticas de Nielsen, Leyes de UX), junto con una lista de verificación previa al envío que cubre propósito, jerarquía, estados, formularios, teclado, lectores de pantalla, contraste, diseño responsive, animación, copy y rendimiento. Está diseñado para usarse como punto de partida en cualquier proyecto de frontend o móvil, ya sea nuevo o existente, y para responder preguntas sobre mejores prácticas en diseño de interfaces.

Compatible con~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/TomasValleDuran/pomos-skillzzeria/tree/HEAD/plugins/skillzzeria/skills/ui-ux-playbook
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

UI/UX Playbook

Las grandes interfaces surgen de tres cosas hechas juntas: un punto de vista claro (quién, qué trabajo, qué sensación), un sistema coherente (tokens + componentes) y cientos de detalles correctos (estados, animación, accesibilidad, copy). Este playbook orquesta el arsenal de skills que cubren cada parte.

Flujo de trabajo para cualquier tarea de UI

Escálalo: un ajuste de botón necesita los pasos 5–7; una app nueva los necesita todos.

  1. Brief — Quién es la persona, cuál es el trabajo (verbo), qué contexto/dispositivo, qué sensación debería transmitir (palabras concretas). Infiere desde el código y la solicitud; haz solo una pregunta si una restricción crítica es desconocida (plataforma, marca existente, audiencia).
  2. Dirección — elige el carácter estético y de interacción antes del código. Mira 2–4 referencias reales para este tipo de pantalla (ui-stack-advisor/references/inspiration.md).
  3. Sistema — tokens y DESIGN.md (design-system-builder; colores vía color-theory). ¿Proyecto existente? Lee y sigue su sistema; extiéndelo, no lo bifurques.
  4. Stack — librerías de componentes/animación (ui-stack-advisor). Usa primitivas accesibles; no implementes a mano diálogos, menús, comboboxes, selectores de fecha, toasts.
  5. Construcción — estructura y jerarquía primero (layout, tipografía, espaciado), luego color, luego detalle. Contenido real, no lorem ipsum. Todos los estados: carga, vacío, error, parcial, éxito, deshabilitado, contenido largo.
  6. Animación — solo donde tenga un propósito (feedback, continuidad, cambio de estado); consulta los skills de animación.
  7. Verificar mirando — renderízalo (servidor de desarrollo + Playwright/Chrome MCP/simulador), verifica en tamaños reales (390, 768, 1280+; teléfono pequeño, tablet), ambos temas, solo teclado, zoom al 200% / Dynamic Type más grande. Corrige lo que veas en lotes.
  8. Revisión — ejecuta la lista de verificación previa al envío a continuación o un skill de revisión.

Qué skill para qué (enrutamiento)

NecesidadCargar
Dirección estética para landing pages, marketing, diseño visual distintivofrontend-design
UI de producto (dashboards, SaaS, admin, herramientas) con memoria de diseño persistenteinterface-design
Sistema de diseño, tokens, tematización, tokens multiplataforma, DESIGN.mddesign-system-builder
Elegir/derivar colores, paletas, colores para modo oscuro, contraste, seguridad para daltonismocolor-theory (genera) · better-colors (audita)
Tipografía: escala, ajuste de línea, características tipográficas, truncamientobetter-typography
Layout: agrupación, alineación, responsive, espacio para i18nbetter-layout
Pulido: radio, sombras, iconos, alineación ópticabetter-ui
Revisión/corrección de accesibilidad (WCAG 2.2)better-accessibility
Copy UX, etiquetas, errores, estados vacíosbetter-writing
Revisión clasificada de toda la pantalla en todos los aspectos anterioresbetter-interface · revisión de rama/PR: interface-review
Elegir librerías de componentes/animación/widgetsui-stack-advisor
Filosofía de animación, easing, duraciones, springs, sensación de componentesemil-design-eng
Construir una animación webanimate · varios elementos juntos: choreograph
Revisar / auditar / corregir animaciones con problemasreview-animations · improve-animations · animation-performance
Movimiento fluido al estilo Apple, gestos, materiales (web o nativo)apple-design
Web móvil con sensación nativa (PWA, táctil, 100vh, safe areas)mobile-native
Diseño y revisión de React Native / Expomobile-design · animación: animate-expo · skills de plugins Expo: expo-native-ui, expo-ui, expo-design-system, expo-animation, expo-router
Específicos de shadcn/uishadcn (plugin de Vercel)
Galería de variantes / máquina de estados / test de estrésvariant · state-machine · break (invocado por el usuario)
Visualización de datos para gráficos y dashboardsdataviz
Figma ↔ códigoSkills de Figma MCP (figma-design-to-code, figma-generate-library, …)

Regla de conflicto: cuando dos skills discrepan, gana el DESIGN.md/sistema existente del proyecto, luego el brief del usuario, luego el skill más específico (ej. animate-expo sobre emil-design-eng en una app Expo). No apiles múltiples skills de dirección estética en una misma tarea — elige uno (frontend-design o interface-design).

Chuleta de estándares

Accesibilidad (WCAG 2.2 AA — línea base legal en EE. UU. (ADA/508), UE (Acta Europea de Accesibilidad, en vigor desde junio de 2025) y muchos otros)

  • Contraste 4.5:1 texto, 3:1 texto grande y componentes de UI/gráficos significativos
  • Todo operable con teclado; foco visible (2.4.7) no oculto por UI fija (2.4.11); orden lógico
  • Tamaño de objetivo ≥ 24×24 CSS px (2.5.8) — diseña para 44×44
  • Arrastrar tiene una alternativa de un solo puntero (2.5.7)
  • Etiquetas para cada entrada, errores identificados en texto, ninguna información solo por color
  • El texto se redimensiona al 200% / se reajusta a 320 px de ancho sin desplazamiento horizontal (1.4.10)
  • Respeta movimiento reducido; sin destellos > 3/s; contenido en movimiento automático > 5s se puede pausar
  • Ubicación de ayuda consistente (3.2.6), sin reingreso redundante (3.3.7), autenticación accesible — sin pruebas cognitivas, permitir pegar/gestores de contraseñas (3.3.8)
  • HTML semántico primero; ARIA solo para llenar vacíos. Nativo: etiquetas de accesibilidad/traits (iOS), contentDescription/semantics (Android/Compose), accessibilityLabel/accessibilityRole (RN)

Plataformas

  • iOS (HIG): objetivos 44×44pt, barra de pestañas para navegación de nivel superior (≤5), pila de navegación con deslizamiento hacia atrás, hojas con detentes, SF Symbols, Dynamic Type, colores semánticos, Liquid Glass para la capa de control (iOS 26+), hápticos para eventos significativos
  • Android (Material 3 / Expressive): objetivos 48×48dp, barra/riel/cajón de navegación por clase de ancho, retroceso predictivo, edge-to-edge con insets, color dinámico, escala tipográfica M3
  • Detalles y diferencias: references/mobile-standards.md

Rendimiento (Core Web Vitals, percentil 75): LCP ≤ 2.5s · INP ≤ 200ms · CLS ≤ 0.1. Responde a la entrada en ~100ms; muestra progreso para cualquier cosa > 400ms (umbral de Doherty); skeletons para contenido, spinners para acciones; UI optimista cuando sea seguro. Móvil: 60/120fps, mantén el hilo de JS libre (Reanimated worklets), listas virtualizadas.

Principios de UX: 10 heurísticas de Nielsen + Leyes de UX (Fitts, Hick, Jakob, Miller/agrupación, Tesler, Doherty, peak-end, estética-usabilidad, Von Restorff, Gestalt). Guía de patrones para formularios, navegación, búsqueda, tablas, onboarding, estados vacío/error/carga, notificaciones, configuraciones, acciones destructivas: references/ux-principles-and-patterns.md.

Ética: sin patrones oscuros (confirmshaming, cancelación en trampa para ratones, consentimiento previamente marcado, urgencia falsa, costos ocultos, molestias persistentes). Son cada vez más ilegales (EU DSA/DMA, reglas FTC click-to-cancel, reglas de consentimiento GDPR) y erosionan la confianza.

Lista de verificación previa al envío

  • Propósito de cada pantalla obvio en 5 segundos; una acción principal por vista
  • Jerarquía legible al entrecerrar los ojos (tamaño/peso/contraste, no solo color)
  • Espaciado, radio, tipografía, color solo desde tokens; coherente con DESIGN.md
  • Estados de carga, vacío, error, parcial, sin conexión y contenido largo diseñados
  • Formularios: etiquetas, tipos de input/autocompletado correctos, errores en línea, entrada preservada al error, sin bloqueo de pegado
  • Teclado: orden de tabulación, foco visible, Escape cierra superposiciones, el foco vuelve al activador
  • Lector de pantalla: nombres/roles/estados, regiones vivas para actualizaciones asíncronas, estructura de encabezados
  • Contraste medido en ambos temas; nada comunicado solo por color
  • Responsive en 320 / 390 / 768 / 1024 / 1440; objetivos táctiles ≥ 44; sin affordances solo hover
  • Animación con propósito, ≤ 300ms para UI, interrumpible, movimiento reducido respetado
  • Copy: verbos específicos en botones, errores explican la corrección, terminología coherente, preparado para i18n (sin cadenas concatenadas, espacio para +30–40% de texto, propiedades lógicas seguras para RTL)
  • Rendimiento: imágenes dimensionadas/carga diferida, fuentes precargadas/intercambiadas, sin desplazamiento de layout, listas largas virtualizadas
  • Revisado el resultado renderizado (capturas de pantalla en tamaños reales), no solo el código

Auditoría de código web con el conjunto completo de reglas (foco, formularios, animación, tipografía, contenido, imágenes, rendimiento, navegación, táctil, tematización, i18n, hidratación, copy, antipatrones): lee references/web-interface-guidelines.md e informa como archivo:línea - problema.

Referencias

  • references/web-interface-guidelines.md — Guías de Interfaz Web de Vercel (vendidas, MIT) para auditorías de código
  • references/ux-principles-and-patterns.md — heurísticas, Leyes de UX y mejores prácticas a nivel de patrón
  • references/mobile-standards.md — iOS HIG + Material 3 esencial y diferencias entre plataformas
  • references/arsenal.md — cada skill de UI instalado: fuente, licencia, para qué sirve, cómo actualizar; extras opcionales

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

TomasValleDuran/color-theory

Color theory and palette engineering for UI on any platform (web, iOS, Android, Flutter, React Native). Choose and derive brand palettes, build tonal ramps, tinted neutrals and status colors, map them to light/dark semantic tokens, and verify contrast (WCAG 2.2 + APCA) and color-blind safety with a bundled zero-dependency OKLCH tool. Use this whenever the user picks, generates, critiques or fixes colors — "what colors should I use", brand color, palette, color scheme, theme, dark mode colors, accent, gradient, "this looks dull/garish", contrast problems, color-blind friendliness, or turning one hex into a full system — even if they don't say "color theory".

TomasValleDuran/design-system-builder

Create, extend, or audit a design system for any project and platform — design tokens (color, typography, spacing, radius, elevation, motion, breakpoints), token architecture (primitive → semantic → component), the W3C DTCG token format, theming (light/dark, brands, density), multi-platform output (CSS variables, Tailwind v4 @theme, React Native, Flutter, SwiftUI, Compose), component API conventions, documentation (DESIGN.md, Storybook) and governance. Use this whenever the user starts a new app and needs a visual foundation, says "design system", "design tokens", "theme", "style guide", "UI kit", "make it consistent", "set up Tailwind theme", wants to unify inconsistent UI, extract tokens from existing code or Figma, support dark mode or multiple brands, or share styles between web and mobile.

TomasValleDuran/ui-stack-advisor

Curated, up-to-date knowledge of UI component libraries, animation libraries and building blocks (icons, charts, tables, forms, toasts, drag-and-drop, virtualization, rich text) for web (React, Next.js, Vue, Svelte, Solid, Angular) and mobile (React Native/Expo, Flutter, SwiftUI, Jetpack Compose), with a decision process for picking one. Use this whenever a project is being started or scaffolded, when the user asks "which UI library / component library / design kit should I use", compares libraries (shadcn vs MUI vs Mantine, Tamagui vs NativeWind, etc.), needs a specific widget (date picker, data table, command palette, carousel, bottom sheet, chart), wants "cool animated components", or when you are about to hand-roll a component that a mature library already solves well.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community