SanyamPunia/verso

O que verso faz?

Transforme uma parte de uma interface existente em uma página de um caderno de trabalho do Alto Renascimento: tinta ferrogálica, desbotada para tons de marrom, em papel de trapo.

As referências são cinco folhas de Leonardo da Vinci: as notas anatômicas de Windsor (RCIN 919070 verso), uma página do Codex Leicester, o Homem Vitruviano, uma página do Codex Arundel e uma página do caderno do Codex Forster. Leia references/style.md antes da primeira conversão em uma sessão. Ele explica cada fato físico do estilo e a decisão de UI que decorre dele. As decisões abaixo só fazem sentido com ele.

Arquivos desta skill

• references/style.md: a pesquisa: papel, tinta, mão, composição, paleta com contraste medido e uma tabela de mapeamento de partes comuns de UI para partes de manuscrito.
• assets/manuscript.css: o tema como CSS puro, com escopo sob .ms-scope, com quatro predefinições de papel definidas por data-ms-paper. A fonte da verdade para cada valor.
• assets/defs.svg: quatro filtros SVG (pena, linha à mão livre, borda irregular, aguada). Monte uma vez por documento.
• assets/sketches.svg: esboços a pena para colocar em uma página: uma construção geométrica, um mecanismo, uma linha de chamada, uma mancha de tinta, raios de luz com pontos nomeados, um sólido hachurado.
• examples/: duas conversões realizadas, cada uma com um antes e um depois: before.html e after.html (um cartão de configurações, windsor), e release-before.html e release-after.html (notas de lançamento, leicester). examples/index.html as mostra lado a lado e alterna a predefinição. Leia os arquivos "depois" como o padrão que uma conversão finalizada deve atingir.

Etapa 1. Definir o escopo

O usuário nomeia uma parte: um arquivo, um componente, uma rota, um seletor ou uma descrição. Converta essa parte e nada mais.

• Se nenhum alvo foi fornecido, peça um. Não reestilize um aplicativo inteiro com base em um palpite.
• Encontre o elemento raiz da parte. Tudo o que o tema faz depende de uma única classe ms-scope nessa raiz, para que o resto do aplicativo não seja alterado.
• Se a parte for compartilhada por outras telas (um botão de sistema de design, um layout), informe e pergunte se deve converter a parte compartilhada ou encapsular uma cópia local.

Etapa 2. Leia o projeto antes de escrever

• Descubra como o projeto estiliza as coisas: Tailwind, CSS Modules, CSS puro, uma biblioteca CSS-in-JS, uma biblioteca de componentes. Adapte o tema a esse idioma. Não introduza um segundo sistema de estilização em um projeto que já possui um.
• Leia o arquivo de regras do projeto (CLAUDE.md, AGENTS.md ou similar). Se ele proibir hexadecimais brutos em componentes, adicione os valores --ms-* como tokens em sua única folha de estilo primeiro, depois use os tokens. Se ele tiver uma escala tipográfica ou um carregador de fontes, adicione as três famílias por meio desse carregador (por exemplo, next/font/google no Next.js) e não pela linha @import, que é apenas para HTML puro.
• Mantenha os primitivos do próprio projeto. Reestilize seu Button por meio de uma variante ou de uma classe; não o substitua por um <button> bruto.

Etapa 3. Instale os primitivos uma vez

1. Tokens e classes. Traga o conteúdo de assets/manuscript.css, ou seu equivalente no idioma do projeto. No Tailwind v4, os tokens vão em @theme e as peças de várias camadas (.ms-page::before, .ms-frame, .ms-cast, .ms-button) vão em @layer components, já que pilhas de pseudo-elementos não se encaixam em utilitários.
2. Filtros. Monte assets/defs.svg uma vez, dentro ou antes da raiz com escopo. No React, transforme-o em um pequeno componente. Sem ele, os quadros e réguas são renderizados retos e a borda irregular desaparece, o que é uma falha silenciosa: verifique isso.
3. Fontes. EB Garamond (leitura), IM Fell English (títulos), La Belle Aurore (notas marginais). Carregue apenas os pesos usados.

Etapa 4. Escolha uma predefinição

Escolha a predefinição pela forma da parte, usando a tabela na seção 6 de references/style.md. Resumindo:

• windsor para formulários, configurações e painéis de ferramentas densos,
• leicester para artigos, documentação, notas de lançamento, herois e estados vazios,
• arundel para painéis de controle, telas e quadros com muitas peças pequenas,
• forster para cartões estreitos, barras laterais, listas e telas móveis.

Defina-o como data-ms-paper="..." na raiz com escopo. windsor não precisa de nenhum atributo. O usuário pode nomear uma predefinição ou um códice, e isso prevalece. Uma predefinição por superfície.

Etapa 5. Converta, parte por parte

Trabalhe através da parte com a tabela de mapeamento em references/style.md. As regras mais importantes:

• Superfície. A raiz da parte se torna .ms-page: papel, granulação, linhas de pauta e de corrente, borda irregular. Superfícies brancas ou cinzas internas desaparecem. Use .ms-repair para no máximo um patch mais claro, onde um bloco precisa ser separado.
• Cartões. Um cartão se torna um quadro solto a pena (.ms-frame) ou nada. A maioria dos grupos não precisa de quadro: espaço e uma régua à mão os separam, como na folha. Use quadros para um ou dois blocos que são notas emolduradas.
• Sombras. Cada box-shadow e elevação se torna hachura (.ms-cast) ou desaparece. Não há sombras cinzas suaves neste tema.
• Cantos. Substitua raios por --ms-radius (um raio desenhado à mão) ou nenhum.
• Cor. Apenas tinta marrom. Corpo em --ms-ink, secundário em --ms-ink-2, legendas em --ms-ink-3. A cor da marca se torna sanguínea, gasta uma vez por superfície: a ação principal, links e o anel de foco.
• Tipografia. Corpo em EB Garamond com algarismos antiqua. O título em IM Fell. Um cabeçalho de seção em IM Fell itálico com uma régua dupla à mão abaixo dele. Nunca defina o texto do corpo na face da mão: é apenas para notas curtas.
• Campos. Um campo de entrada é uma linha pautada (.ms-input), uma área de texto são linhas pautadas, uma caixa de seleção é um quadrado de tinta com uma cruz (.ms-check). Mantenha os elementos reais <input> e <label>; apenas o desenho muda.
• Selos e tags. Tornam-se palavras circuladas (.ms-circled).
• Listas de valores, estatísticas e tabelas. Tornam-se um livro-razão (.ms-ledger): linhas em réguas à mão, líderes pontilhados até o valor, algarismos antiqua.
• Ícones. Mantenha os ícones do projeto. Coloque-os em tom de tinta e através do filtro ms-ink. Não os troque por emojis ou glifos.
• Imagens. Recebem .ms-plate: sépia, multiplicada no papel.
• Gráficos. Tornam-se linhas a pena e preenchimentos hachurados. Sem gradientes. Nomeie pontos e regiões com letras em itálico (.ms-point) da mesma forma que os diagramas de Leicester.
• Barras de progresso, medidores e faixas de controle deslizante. Tornam-se a escala vitruviana (.ms-scale com --value). Mantenha o papel e os valores aria do elemento. Para um <input type="range"> ou <progress> nativo, mantenha o elemento nativo e desenhe a escala atrás dele.
• Números de etapa, classificações e índices. Tornam-se números de figura na margem (.ms-figno), como em Forster.
• Um valor alterado é uma correção: <del> riscado a pena, <ins> na mão. Apenas onde a UI já mostra um valor antigo e um novo.
• Totais e detalhamentos podem ser uma soma trabalhada (.ms-sum), como em Arundel.
• Seções em texto longo começam com uma inicial simples (.ms-initial) e terminam com uma linha pautada (.ms-endrule), como em Leicester.

Etapa 6. Componha como uma página de trabalho

Uma conversão direta de uma grade de cartões em cartões marrons é o modo de falha. Re-componha a parte para que ela se leia como uma folha que foi preenchida, não projetada:

• Use .ms-folio: a coluna principal e uma margem. Mova fatos secundários, dicas e texto de ajuda para a margem como .ms-note, com um esboço de líder apontando para seu assunto onde isso ajudar.
• Deixe os blocos diferirem em largura. Coloque um esboço dentro do texto, não em sua própria faixa.
• Incline dois ou três blocos pequenos com .ms-tilt-l, .ms-tilt-r ou .ms-tilt-s. Nunca incline um campo de formulário, uma tabela ou qualquer coisa com mais de cerca de um terço da página.
• Adicione um esboço a pena de assets/sketches.svg que se encaixe no assunto: o mecanismo para configurações ou sistemas, a construção para layout, dados ou medição. Desenhe um novo da mesma maneira se nenhum se encaixar. Um por superfície.
• Mantenha-se dentro do orçamento de decoração para uma superfície: um esboço (no máximo dois), uma mancha ou borrão, um verso (show-through), dois blocos espelhados. Uma página que carrega todos eles soa como uma fantasia. A maioria das superfícies precisa de dois ou três destes, não de todos.
• Preencha o espaço verdadeiramente vazio com no máximo dois blocos de escrita espelhada decorativa (.ms-mirror, aria-hidden="true"). Escreva em italiano da época (notas para si mesmo, listas, medidas). Não apresente como uma citação real.
• A ordem do DOM permanece a ordem de leitura. O layout pode mover coisas visualmente; a ordem de origem ainda deve fazer sentido para um leitor de tela e para a navegação por Tab.

Etapa 7. Barreiras de proteção

• Contraste. O texto real nunca usa --ms-wash. Meça qualquer coisa nova contra o papel: 4,5:1 para texto, 3:1 para um gráfico significativo ou a borda de um controle.
• Texto espelhado nunca é conteúdo. Rótulos, valores, erros e instruções permanecem legíveis e na orientação correta.
• A semântica permanece. Mesmos elementos, papéis, nomes, estados e manipuladores. Um componente convertido deve se comportar exatamente como antes.
• Os controles permanecem reconhecíveis. Um botão ainda parece pressionável, um campo ainda parece escrevível, o foco está sempre visível (contorno sanguíneo).
• Movimento. O movimento do tema é tinta: um esboço se desenhando com data-draw, uma marca aparecendo em uma caixa de seleção. Hover e pressionar são uma aguada, nunca uma escala. Respeite prefers-reduced-motion, que manuscript.css já faz.
• Custo. Cada elemento filtrado é uma passagem de filtro. Mantenha filtros em pseudo-elementos, quadros e esboços, não em listas longas de linhas ou em conteúdo de rolagem. Não coloque ms-ink no texto do corpo.
• Sem marcas institucionais. Não copie um selo de biblioteca ou colecionador, um número de catálogo de museu como marca, ou o nome de Leonardo como uma assinatura. A página está em sua maneira, não apresentada como dele.
• Apenas claro. A folha é um objeto, portanto não inverte no modo escuro. Se o aplicativo tiver um tema escuro, a parte com escopo mantém seu papel.

Etapa 8. Verifique

1. Renderize a parte convertida e tire uma captura de tela. Se uma ferramenta de navegador estiver disponível (agent-browser, Playwright, o painel de visualização), use-a. Olhe para ela.
2. Verifique se os quadros e réguas estão ondulados. Retos significam que as definições não estão montadas ou os IDs dos filtros colidem.
3. Navegue pela parte com Tab. Todos os controles são alcançados em uma ordem sensata e mostram o anel de foco.
4. Verifique a página em uma largura de telefone. O fólio se reduz a uma coluna.
5. Execute a própria verificação do projeto (verificação de tipos, lint, compilação) se ele tiver uma.

Relatório

Quando terminar, informe ao usuário em algumas linhas curtas:

• qual parte mudou e quais arquivos,
• qual predefinição e por que ela se encaixa na parte,
• o que foi adicionado uma vez (tokens, fontes, filtros) e onde,
• qualquer parte deixada como estava e por quê,
• como vê-la (a rota ou o arquivo para abrir).