SanyamPunia/verso

¿Qué hace verso?

Convierte una porción de una interfaz existente en una página de un cuaderno de trabajo del Alto Renacimiento: tinta ferrogálica, oxidada a marrones, sobre papel de trapo.

Las referencias son cinco de los folios de Leonardo da Vinci: las notas anatómicas de Windsor (RCIN 919070 verso), una página del Codex Leicester, el Hombre de Vitruvio, una página del Codex Arundel y una página del cuaderno Codex Forster. Lee references/style.md antes de la primera conversión en una sesión. Explica cada hecho físico del estilo y la decisión de UI que se deriva de él. Las decisiones siguientes solo tienen sentido con ese documento.

Archivos en esta habilidad

• references/style.md la investigación: papel, tinta, mano, composición, paleta con contraste medido, y una tabla de mapeo de partes comunes de UI a partes de manuscrito.
• assets/manuscript.css el tema como CSS plano, con ámbito bajo .ms-scope, con cuatro preajustes de papel definidos por data-ms-paper. La fuente de verdad para cada valor.
• assets/defs.svg cuatro filtros SVG (pluma, línea a mano alzada, barba, aguada). Montar una vez por documento.
• assets/sketches.svg bocetos a pluma para colocar en una página: una construcción geométrica, un mecanismo, una línea de llamada, una mancha de tinta, rayos de luz con puntos con letras, un sólido rayado.
• examples/ dos conversiones realizadas, cada una con un antes y un después: before.html y after.html (una tarjeta de configuración, windsor), y release-before.html y release-after.html (notas de versión, leicester). examples/index.html las muestra lado a lado y cambia el preajuste. Lee los archivos "after" como el estándar que una conversión finalizada debe cumplir.

Paso 1. Fijar el alcance

El usuario nombra una porción: un archivo, un componente, una ruta, un selector o una descripción. Convierte esa porción y nada más.

• Si no se dio ningún objetivo, solicítalo. No rediseñes una aplicación entera por suposición.
• Encuentra el elemento raíz de la porción. Todo lo que hace el tema cuelga de una clase ms-scope en esa raíz, para que el resto de la aplicación no se vea afectado.
• Si la porción es compartida por otras pantallas (un botón de sistema de diseño, un layout), indícalo y pregunta si se debe convertir la parte compartida o envolver una copia local.

Paso 2. Leer el proyecto antes de escribir

• Averigua cómo el proyecto estiliza las cosas: Tailwind, CSS modules, CSS plano, una biblioteca CSS-in-JS, una biblioteca de componentes. Adapta el tema a ese lenguaje. No introduzcas un segundo sistema de estilos en un proyecto que ya tiene uno.
• Lee el archivo de reglas del proyecto (CLAUDE.md, AGENTS.md o similar). Si prohíbe el uso de hex en componentes, añade los valores --ms-* como tokens en su única hoja de estilos primero, luego usa los tokens. Si tiene una escala tipográfica o un cargador de fuentes, añade las tres familias a través de ese cargador (por ejemplo next/font/google en Next.js) y no a través de la línea @import, que es solo para HTML plano.
• Conserva las primitivas del proyecto. Rediseña su Button mediante una variante o una clase; no lo reemplaces con un <button> genérico.

Paso 3. Instalar las primitivas una vez

1. Tokens y clases. Incorpora assets/manuscript.css, o su equivalente en el lenguaje del proyecto. En Tailwind v4, los tokens van en @theme y las piezas de varias capas (.ms-page::before, .ms-frame, .ms-cast, .ms-button) van en @layer components, ya que las pilas de pseudoelementos no encajan en utilidades.
2. Filtros. Monta assets/defs.svg una vez, dentro o antes de la raíz con ámbito. En React, conviértelo en un componente pequeño. Sin esto, los marcos y las reglas se renderizan rectos y la barba desaparece, lo que es un fallo silencioso: compruébalo.
3. Fuentes. EB Garamond (lectura), IM Fell English (títulos), La Belle Aurore (notas marginales). Carga solo los pesos utilizados.

Paso 4. Elegir un preajuste

Elige el preajuste según la forma de la porción, con la tabla de la sección 6 de references/style.md. En resumen:

• windsor para formularios, configuraciones y paneles de herramientas densos,
• leicester para artículos, documentación, notas de versión, héroes y estados vacíos,
• arundel para paneles de control, lienzos y tableros con muchas partes pequeñas,
• forster para tarjetas estrechas, barras laterales, listas y pantallas móviles.

Establécelo como data-ms-paper="..." en la raíz con ámbito. windsor no necesita atributo. El usuario puede nombrar un preajuste o un códice, y eso prevalece. Un preajuste por superficie.

Paso 5. Convertir, parte por parte

Trabaja a través de la porción con la tabla de mapeo en references/style.md. Las reglas más importantes:

• Superficie. La raíz de la porción se convierte en .ms-page: papel, grano, líneas de laid y de cadena, borde con barba. Desaparecen las superficies blancas o grises internas. Usa .ms-repair para como máximo un parche más claro, donde un bloque necesite separación.
• Tarjetas. Una tarjeta se convierte en un marco a pluma suelto (.ms-frame) o en nada. La mayoría de los grupos no necesitan marco: el espacio y una regla a mano los separan, como en el folio. Usa marcos para el bloque o los dos que sean notas enmarcadas.
• Sombras. Cada box-shadow y elevación se convierte en rayado (.ms-cast) o desaparece. No hay sombras grises suaves en este tema.
• Esquinas. Reemplaza los radios con --ms-radius (un radio dibujado a mano) o ninguno.
• Color. Solo tinta marrón. Cuerpo en --ms-ink, secundario en --ms-ink-2, pies de foto en --ms-ink-3. El color de marca se vuelve sanguina, usada una vez por superficie: la acción principal, los enlaces y el anillo de foco.
• Tipografía. Cuerpo en EB Garamond con cifras de estilo antiguo. El título en IM Fell. Un encabezado de sección en IM Fell cursiva con una regla doble a mano debajo. Nunca pongas texto del cuerpo en la fuente de letra manuscrita: es solo para notas cortas.
• Campos. Un input es una línea reglada (.ms-input), un textarea son líneas regladas, un checkbox es un cuadrado de tinta con una cruz (.ms-check). Conserva el <input> y <label> reales; solo cambia el dibujo.
• Insignias y etiquetas se convierten en palabras circuladas (.ms-circled).
• Listas de valores, estadísticas y tablas se convierten en un libro de contabilidad (.ms-ledger): filas sobre reglas a mano, líderes punteados al valor, cifras de estilo antiguo.
• Iconos. Conserva los iconos del proyecto. Ponlos en tono de tinta y a través del filtro ms-ink. No los cambies por emojis o glifos.
• Imágenes toman .ms-plate: sepia, multiplicadas en el papel.
• Gráficos se convierten en líneas a pluma y rellenos rayados. Sin degradados. Nombra puntos y regiones con letras en cursiva (.ms-point) como hacen los diagramas de Leicester.
• Barras de progreso, medidores y pistas de deslizador se convierten en la escala vitruviana (.ms-scale con --value). Conserva el rol del elemento y los valores aria. Para un <input type="range"> o <progress> nativos, conserva el elemento nativo y dibuja la escala detrás.
• Números de paso, rangos e índices se convierten en números de figura en el margen (.ms-figno), como en Forster.
• Un valor cambiado es una corrección: <del> tachado con pluma, <ins> en letra manuscrita. Solo donde la UI ya muestra un valor antiguo y uno nuevo.
• Totales y desgloses pueden ser una suma elaborada (.ms-sum), como en Arundel.
• Secciones en texto largo comienzan con una inicial simple (.ms-initial) y terminan con una línea de cierre reglada (.ms-endrule), como en Leicester.

Paso 6. Componerlo como una página de trabajo

Una conversión directa de una cuadrícula de tarjetas a tarjetas marrones es el modo de fallo. Recompón la porción para que se lea como un folio que fue llenado, no diseñado:

• Usa .ms-folio: la columna principal y un margen. Mueve los hechos secundarios, sugerencias y texto de ayuda al margen como .ms-note, con un boceto de llamada apuntando a su tema donde ayude.
• Permite que los bloques tengan diferente ancho. Coloca un boceto dentro del texto, no en su propia banda.
• Inclina dos o tres bloques pequeños con .ms-tilt-l, .ms-tilt-r o .ms-tilt-s. Nunca inclines un campo de formulario, una tabla, o nada que ocupe más de un tercio de la página.
• Añade un boceto a pluma de assets/sketches.svg que se ajuste al tema: el mecanismo para configuraciones o sistemas, la construcción para diseño, datos o medición. Dibuja uno nuevo de la misma manera si ninguno encaja. Uno por superficie.
• Mantén el presupuesto de decoración para una superficie: un boceto (como máximo dos), una mancha o borrón, un traspaso de tinta, dos bloques de espejo. Una página que los lleva todos se lee como un disfraz. La mayoría de las superficies necesitan dos o tres de estos, no todos.
• Llena el espacio vacío real con como máximo dos bloques de escritura especular decorativa (.ms-mirror, aria-hidden="true"). Escríbela en italiano de la época (notas para uno mismo, listas, medidas). No la presentes como una cita real.
• El orden del DOM se mantiene como orden de lectura. El layout puede mover visualmente las cosas; el orden fuente debe seguir teniendo sentido para un lector de pantalla y para la tecla Tab.

Paso 7. Guardarraíles

• Contraste. El texto real nunca usa --ms-wash. Mide cualquier cosa nueva contra el papel: 4.5:1 para texto, 3:1 para un gráfico significativo o el borde de un control.
• El texto especular nunca es contenido. Las etiquetas, valores, errores e instrucciones se mantienen legibles y en la orientación correcta.
• La semántica se mantiene. Los mismos elementos, roles, nombres, estados y manejadores. Un componente convertido debe comportarse exactamente como antes.
• Los controles siguen siendo reconocibles. Un botón sigue viéndose presionable, un campo sigue viéndose editable, el foco siempre es visible (contorno sanguina).
• Movimiento. El movimiento del tema es de tinta: un boceto dibujándose a sí mismo con data-draw, una marca que aparece en un checkbox. Hover y press son una aguada, nunca una escala. Respeta prefers-reduced-motion, que manuscript.css ya hace.
• Coste. Cada elemento filtrado es un pase de filtro. Mantén los filtros en pseudoelementos, marcos y bocetos, no en listas largas de filas o en contenido desplazable. No pongas ms-ink en el texto del cuerpo.
• Sin marcas institucionales. No copies un sello de biblioteca o coleccionista, un número de catálogo de museo como marca, o el nombre de Leonardo como firma. La página está en su estilo, no presentada como suya.
• Solo modo claro. El folio es un objeto, por lo que no se invierte en modo oscuro. Si la aplicación tiene un tema oscuro, la porción con ámbito mantiene su papel.

Paso 8. Verificar

1. Renderiza la porción convertida y toma una captura de pantalla. Si hay una herramienta de navegador disponible (agent-browser, Playwright, el panel de vista previa), úsala. Mírala.
2. Comprueba que los marcos y las reglas sean ondulados. Los rectos significan que las definiciones no están montadas, o que los IDs de filtro chocan.
3. Navega con Tab a través de la porción. Se alcanza cada control en un orden sensato y muestra el anillo de foco.
4. Comprueba la página en un ancho de teléfono. El folio se colapsa a una columna.
5. Ejecuta la propia verificación del proyecto (typecheck, lint, build) si la tiene.

Informe

Cuando termines, informa al usuario en unas pocas líneas cortas:

• qué porción cambió y qué archivos,
• qué preajuste, y por qué encaja con la porción,
• qué se añadió una vez (tokens, fuentes, filtros) y dónde,
• cualquier parte que se dejó como estaba, y por qué,
• cómo verlo (la ruta o el archivo a abrir).