tablet

ultrahand: tablet

Diseña pantallas de tablet como un artefacto interactivo de Claude. El artefacto cambia entre tamaños de iPad y Android en ambas orientaciones, se ajusta a divisiones de ancho (1/3, 1/2, 2/3), y refluye en vivo mientras arrastras una ventana desde ancho completo hasta 320. Cada regla que aplicas está en references/principles.md, y cada regla cita references/sources.md. Los tamaños, divisiones y clases de tamaño están en references/presets.md.

1. Recopilar requisitos

Pregunta solo lo que no puedas deducir. Resuelve esto antes de dibujar:

• Plataforma: iPadOS, Android o ambas. Si son ambas, usa objetivos de 48 unidades y patrones neutrales de plataforma.
• Alcance: una pantalla o un flujo. Para un flujo, enumera las pantallas y cómo se mueven las personas entre ellas: barra lateral o rail, lista a detalle, hoja, popover o nueva ventana.
• Tarea principal: la única función de cada pantalla y qué layout canónico le corresponde (lista-detalle, panel secundario, feed o un solo panel).
• Contenido real: nombres, longitudes, recuentos y las cadenas plausibles más largas. No diseñes con lorem ipsum.
• Estados de datos: qué se carga, qué puede estar vacío, qué puede fallar o desconectarse.
• Entradas: solo táctil, o también teclado, trackpad o ratón, o lápiz. Asume que todos son posibles a menos que se indique lo contrario.
• Multitarea: qué hace la gente además de esta aplicación (referencia lado a lado, arrastrar contenido hacia adentro o hacia afuera). Espera ventanas desde 320 de ancho hasta pantalla completa.
• Restricciones: colores de marca, fuentes, un sistema de diseño existente, y si es una app nativa o web.
• Tema: busca el tema del proyecto (design/THEME.md, *.tokens.json; consulta shared/theme/README.md) antes de elegir cualquier color, tamaño o espaciado. Si hay uno, diseña con él: ejecuta node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html, pasa --head theme.html a la compilación, usa solo sus propiedades personalizadas (var(--color-surface), var(--space-gap-group)), y reutiliza los componentes de su inventario. Cuando el diseño necesite algo que el tema no tenga, usa el token más cercano y lista la adición como pregunta abierta; no inventes un valor. Sin tema, sigue los innegociables en shared/theme/rules.md y ofrece el skill theme.

2. Leer las referencias

Lee references/principles.md y references/presets.md antes de diseñar. Usa los patrones propios de la plataforma (barra lateral o rail, vista dividida, popovers, comandos de barra de menú) en lugar de inventar otros nuevos.

3. Componer la pantalla

Los componentes que pasan sus verificaciones individuales aún pueden sumar una pantalla desordenada. Antes de construir, planifica cómo forman secciones y cómo las secciones forman la pantalla, usando las reglas de composición del plugin en shared/composition/principles.md:

• Escribe el mapa de secciones. Para cada pantalla, enumera sus secciones (una barra lateral, un panel de lista, un panel de detalle con su barra de herramientas y un inspector), el trabajo único de cada una, sus miembros ordenados por frecuencia de uso, y su único énfasis. Indica qué es contenido principal y qué es chrome: el contenido domina y el chrome se retira.
• Agrupa con espacio. Los espacios dentro de un grupo son claramente más pequeños que entre grupos; añade un contenedor solo cuando el espacio no pueda mostrar el grupo.
• Un aspecto por rol, un énfasis por sección. Mismo rol, mismo estilo; el estado y las etiquetas nunca parecen botones; el acento fuerte va a una cosa por sección, y los estados seleccionados usan un tratamiento más suave.
• Mantenlo pequeño. Alrededor de tres tamaños de letra, un dato en un lugar, los miembros frecuentes visibles y los raros detrás de un menú. Cuando un cambio añada algo, reorganiza primero y añade solo lo que se gane su lugar.

4. Construir el artefacto de lienzo

Construye sobre el lienzo redimensionable compartido del plugin (shared/canvas/; su README.md tiene el contrato completo). Escribe la pantalla como screen.html y la configuración del diseño como config.json en una carpeta de trabajo, luego construye:

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/tablet/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<nombre del diseño>" --out index.html

Publica index.html como un artefacto. Desde references/presets.md, el lienzo obtiene:

• Pantalla completa: ipad-mini 744, ipad 820, ipad-13 1032 y android-tablet 800. La rotación da cada uno en horizontal.
• Vista dividida: ipad-split, ipad-13-split y android-split, el dispositivo en horizontal con tu app a un lado de un divisor. El divisor se ajusta a 1/3, 1/2 y 2/3 (arrastra o enfoca y usa las teclas de flecha); Full es el preset de pantalla completa en horizontal.
• Redimensionamiento libre: arrastra los tiradores desde el preset hacia abajo hasta 320 × 450.
• Verificaciones: reflujo a 320 de ancho, y horizontal con el teclado activo (1180 × 420).

Mientras arrastras, el layout debe refluir en vivo. Ir de ancho completo a medio ancho tiene que re-renderizar continuamente, cruzando los puntos de quiebre 840 y 600 sin recarga ni pérdida de estado. El indicador muestra el ancho actual y su clase de tamaño (compacto, mediano, expandido, grande).

• config.json establece title y states (ej. default, loading, empty, error). Para un diseño solo Android, establece "initialPreset": "android-tablet"; para iPadOS y Android juntos, establece "minTarget": 48.
• Contrato de pantalla: un <template id="uh-screen"> con secciones [data-screen], y data-nav, data-nav-replace, data-nav-back y data-show-state para clics. Organiza por clase de tamaño con @container screen (width >= 600px) y (width >= 840px), o el data-width-class del viewport, nunca por preset o @media. Rellena los bordes con var(--uh-safe-*), declaradas en [data-screen] (:host no puede verlas). Texto en rem; áreas de toque, iconos y medianiles en px, para que el texto al 200% crezca las palabras, no los controles. Colores con light-dark(). El comportamiento va en window.ultrahandSetup = function (canvas) { … }.
• Alternativas integradas: claro/oscuro, texto al 200%, selector de estado y mostrar objetivos de toque. No construyas las tuyas propias. Llama a canvas.refresh() después de abrir una hoja, popover o menú.
• El puntero y el teclado siempre están activos: el espectador maneja el artefacto con mouse y teclado, así que da a cada control un estado hover, un menú contextual con clic derecho donde la plataforma lo tenga, un enfoque :focus-visible visible y sugerencias de atajos. Verifica el toque con la superposición de objetivos de toque. No ocultes nada de esto detrás de una alternativa propia.
• En estados de iPad con ventanas, mantén los controles de la barra de herramientas principal alejados de los controles de ventana superiores-izquierdos.
• Haz que el flujo principal sea cliqueable: la navegación cambia, las filas seleccionan o empujan, los paneles se ocultan y muestran, y las hojas y popovers se abren y cierran. Nunca uses alert, confirm o prompt.

5. Diseñar cada clase de tamaño

Trabaja de ancho a estrecho, y resuelve cada problema en el tamaño donde aparece:

1. Expandido / grande, pantalla completa horizontal (ej. ipad 1180): elige los paneles, navegación (barra lateral o rail) y densidad. Limita longitudes de línea y anchos de control.
2. Mediano, pantalla completa vertical y división 2/3 (ej. 820, 787): colapsa a menos paneles, con un rail o una barra de pestañas superior.
3. Compacto, división 1/2 y 1/3 (ej. 590, 393): el layout de teléfono, con una barra inferior o barra de pestañas, un panel a la vez y Atrás para volver a la lista.
4. Arrastra lentamente desde ancho completo hasta 320 y de vuelta. Verifica que la selección, la posición de desplazamiento y el texto escrito sobrevivan. Verifica que lista-detalle mantenga el detalle abierto cuando se estrecha, y seleccione ese elemento cuando se ensancha.

Luego verifica los casos adicionales: reflujo a 320 de ancho, horizontal con el teclado activo, y el preset android-tablet (si Android está en alcance) en ambas orientaciones.

6. Autoverificación antes de presentar

Revisa cada elemento. Corrige cualquier fallo, o nómbralo y di por qué es aceptable.

Composición (ejecuta la auditoría de composición, node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs", en el tamaño más grande y más pequeño, o verifica a ojo):

• Desenfocada, la pantalla muestra las secciones previstas, y el contenido principal atrae la atención primero. Sin punto brillante no intencionado.
• Cada sección tiene un trabajo, sus miembros agrupados por función y frecuencia, con espacios entre grupos claramente más grandes que dentro de ellos.
• Cada sección tiene como máximo un elemento fuertemente enfatizado; los estados seleccionados son sutiles.
• Un estilo por rol: cuenta los estilos de control en cada sección y justifica cualquier extra. Ninguna etiqueta o estado parece un botón.
• Filas y secciones se alinean a bordes compartidos; aproximadamente tres tamaños de letra en la pantalla.
• Ningún dato mostrado dos veces, y nada en pantalla que no sirva a una tarea aquí.
• Después de una ronda de cambios: enumera lo que se añadió; la pantalla no está más ocupada de lo necesario.
• Solo valores del tema: sin colores crudos, sin espaciado fuera de la escala de 8 puntos, sin tamaños de letra fuera de la escala, y componentes del inventario reutilizados en lugar de reconstruidos (shared/theme/rules.md NN-1, NN-2, NN-6, EV-4).

Componentes y plataforma:

• El layout cambia según la clase de ancho (600 / 840), no por dispositivo. Cada funcionalidad es alcanzable en cada ancho, desde 320 hasta pantalla completa.
• Redimensionar refluye en vivo y mantiene selección, desplazamiento, entrada y reproducción. Nada se reinicia en un punto de quiebre.
• La navegación se ajusta al ancho: una barra inferior en compacto, y un rail, barra de pestañas superior o barra lateral por encima. Hay cinco pestañas de nivel superior o menos, ninguna oculta o deshabilitada.
• Los diseños de múltiples paneles siguen un patrón canónico. La selección está resaltada en cada panel, los paneles ocultos tienen más de una forma de volver, y ningún panel de detalle queda vacío.
• Nada se estira: botones, campos, hojas, diálogos e imágenes tienen anchos máximos, y el texto tiene una longitud de línea legible.
• Los objetivos de toque miden al menos 44 × 44 pt (iOS) o 48 × 48 dp (Android) y nunca están por debajo de 24 × 24, incluso con puntero. El contenido principal se sitúa en el centro y los controles frecuentes son alcanzables desde los bordes laterales.
• Nada interactivo está debajo de la barra de estado, indicador de inicio, barra de tareas o los controles de ventana de iPad, en ninguna orientación.
• Puntero: cada control tiene un estado hover, el clic derecho y mantener presionado abren un menú contextual, y nada está disponible solo al pasar el cursor.
• Cambiar elementos, cerrar un panel o descartar una hoja nunca pierde texto escrito; Deshacer sobrevive a dos eliminaciones consecutivas y devuelve el elemento a su panel.
• Teclado: los flujos principales funcionan con Tab y las flechas, el enfoque siempre es visible, los atajos estándar funcionan, y Esc cierra, cancela o limpia.
• Cada arrastrar y soltar tiene una alternativa sin arrastre, muestra objetivos válidos y se puede deshacer.
• Ambas orientaciones funcionan, y el campo enfocado permanece visible en horizontal con el teclado activo.
• El layout sobrevive al texto al 200%, y el contraste es al menos 4.5:1 para texto y 3:1 para UI en ambos modos claro y oscuro.
• Los estados de carga, vacío y error están diseñados para cada panel, no solo para la pantalla.
• El diseño funciona a 320 de ancho sin desplazamiento horizontal.

7. Presentar

Comparte el enlace del artefacto. En unas líneas, indica el mapa de secciones (trabajo y énfasis de cada sección), las decisiones clave y el principio detrás de cada una (cita la clave de fuente), cómo cambia el layout en cada clase de ancho, cualquier elemento de autoverificación que aceptaste con una razón, y cualquier adición propuesta al tema (para el skill theme), y cualquier pregunta abierta.