¿Qué hace implementar / refactorizar)?
La fuente de verdad es el repositorio upstream https://github.com/Caho1/open-claude-ui (MIT): AGENTS.md (tokens, presets, componentes), code-examples/ y docs/v2/ (Claude Desktop 2.0, v2.37337.1). Las rutas a continuación son relativas a ese repositorio; clónalo o ábrelo junto a tu proyecto, o léelas en GitHub. Este skill es el flujo de trabajo; no duplica los valores. Lee references/v2-delta.md cuando la tarea toque el comportamiento de v2 (densidad, barra lateral, esfuerzo, movimiento del compositor, cola sin conexión).
0. Elegir la línea base primero
- CDS 1.x (por defecto en
code-examples/): acento arcilla cálida, compositor de 20px, radio de 8px, muelles de Framer Motion. - CDS 2.0 (docs/v2): lienzo frío
#FCFCFB, compositor de 12/14px, radio de 6/8px, controles de 24/32px, movimiento mediante compositor CSS. Pregunta o deduce cuál usar; no los mezcles dentro de una misma superficie. Muchos tokens de v2 (--cds-h-control,data-density) están documentados en docs pero aún no definidos encode-examples/cds-theme.css: defínelos antes de usarlos.
1. Flujo de trabajo
- Clasifica la tarea: nuevo componente / reestilizar / refactorizar / auditar.
- Reutiliza antes de escribir: revisa
code-examples/(30 módulos, índice en AGENTS.md §3) ysrc/index.ts. Compón o extiende; no vuelvas a derivar. - Tokens: cada color, radio, duración y easing proviene de una variable
--cds-*o un alias de Tailwind. Sin valores hexadecimales brutos, sinmsad-hoc. - Movimiento: elige según la tabla a continuación.
- Protecciones de borde (sección 3) para cualquier código de entrada, desplazamiento o iframe.
- Verifica (sección 4). Reporta los fallos textualmente.
2. Reglas de decisión
Elección del movimiento
| Situación | Usar |
|---|---|
| Hover/presión/desvanecimiento/esqueleto/entrada, cualquier cosa que se ejecute durante el streaming | CSS puro + --cds-dur-* + --cds-ease-* (solo compositor: transform, opacity, filter) |
| Liberación de arrastre, ancho/alto que depende de la velocidad o el diseño | Framer Motion con uno de SPRING_BOUNCY / SNAPPY / GENTLE / HEAVY_SNAP |
| Movimiento reducido | Snap, nunca eliminar el cambio de estado. Respeta prefers-reduced-motion |
Nunca uses transition: all, nunca linear, nunca números de muelle codificados. Una abreviatura transition que usa var(--cds-dur-*) muere silenciosamente si el token no está definido, así que define los cinco (60ms/120/200/300/450). |
Superficie y bordes: capas con surface-0..3 + borde sutil border-subtle (0.5px en v2). Solo un trazo: los controles dentro de un contenedor con borde obtienen border-none. Deriva las sombras con color-mix() a partir de la superficie, no con negro alfa fijo. Nunca uses #000/#fff puros (excepto bloque de código #0d0d0c).
Densidad: dimensiona los controles desde --cds-h-control / --cds-radius / --cds-icon, nunca en px fijos, para que tanto Compacto como Cómodo funcionen. Las filas compactas que caigan por debajo de 44px de área de impacto usan el crecimiento táctil con margen negativo (--cmp-chin-touch-grow).
Números: cualquier temporizador, contador, indicador de token, número de línea usa tabular-nums.
Diseño de información (postura v2): una estación de trabajo, no un juguete de chat. Prefiere filas de estado densas (28px, rama, PR, latido de ejecución) sobre tarjetas espaciosas; muestra el costo/riesgo explícitamente (niveles de esfuerzo con advertencia Máx., indicador de uso); trata la entrada del usuario como valiosa.
3. Protecciones no negociables
- IME:
if (e.nativeEvent.isComposing || e.keyCode === 229) return;antes de cualquier Enter para enviar. - Scroll durante streaming: no fijar automáticamente si
Date.now() - lastUserScroll < 150; fijar solo dentro de los 40px del final. - Iframes para HTML generado por el modelo: sandbox sin
allow-same-origin, postMessage verificado por origen, controlado pornavigator.userActivation. - Entrada sin pérdida: los envíos fallidos/sin conexión persisten (cola IndexedDB) y se restauran al recargar.
- Inmutabilidad del entorno: la ventana de contexto / árbol de trabajo / configuración MCP se congelan una vez que se crea una sesión; no construyas UI que los edite a mitad de sesión.
- Sin activos binarios (
.ttf/.otf/.mp3/.wav); solo pilas de fuentes del sistema y síntesis Web Audio. - Se deben comprobar tanto el modo claro (
:root) como el oscuro (.dark). Sin gradientes fríos de púrpura/neón (1.x). - Teclado: listas/cuadrículas usan enfoque rotativo (
useClaudeRovingFocus); los diálogos atrapan el enfoque.
4. Checklist de refactorización / auditoría
Busca en el objetivo: literales hexadecimales, rounded-[…px], transition-all, ease-linear, duration-[…], stiffness: fuera de presets, onKeyDown con Enter sin protección IME, scrollTo/scrollTop = en código de streaming, allow-same-origin, bordes de 1px anidados en padres con borde. Reemplaza cada uno con el token/preset/protección. Mantén el comportamiento; cambia solo la presentación a menos que se solicite.
Luego ejecuta, todo debe salir con código 0:
npm run typecheck && npm run check:tokens && npm run build
Si añadiste una referencia --cds-* a AGENTS.md, check:tokens requiere que exista en cds-theme.css.
5. Contrato de salida
Indica qué línea base (1.x/2.0), qué módulos existentes se reutilizaron, qué tokens/presets se eligieron y por qué, y el resultado de la verificación. Marca cualquier cosa no verificada (por ejemplo, comprobación visual del modo oscuro) como no verificada.