samarth-na/skills

Documentos e páginas HTML

O que você produz

Um único arquivo .html autocontido. Salve cada arquivo entregue em ~/.opencode/html/<slug>.html, incluindo revisões. Crie o diretório com mkdir -p ~/.opencode/html se necessário. Não espalhe a saída pelo repositório, Desktop ou diretórios temporários.

O arquivo abre do disco e funciona offline. Incorpore CSS, JavaScript, imagens e diagramas. Não use ativos externos, requisições de rede, etapa de construção ou instalações de pacotes.

Esta skill fornece uma folha de estilo padrão e regras de saída simples. O catálogo de componentes é um ponto de partida, não um limite sobre o que o agente pode representar.

Caminho rápido: escrever → mostrar → iterar

1. Leia a origem e components/shell.html.
2. Leia apenas os componentes necessários para o conteúdo.
3. Escreva o arquivo com um placeholder de folha de estilo.
4. Substitua o placeholder por styles/base.css na íntegra. Adicione uma skin se for útil.
5. Mostre o arquivo com tools.browser.preview através da ferramenta execute.

Escreva o documento útil primeiro. Não transforme uma página simples em um projeto de validação. Corrija problemas visíveis quando eles aparecerem. Revise o mesmo arquivo, a menos que uma versão separada seja solicitada.

Compor e estender

• Reutilize a marcação do componente quando couber. Preserve as classes c- existentes para que a folha de estilo ainda se aplique.
• Componha layouts com .c-wrap, .c-section, .c-stack, .c-grid, .c-split, .c-rail e .c-card.
• Adicione marcação, CSS, SVG embutido ou JavaScript simples quando o catálogo não cobrir a tarefa.
• Prefira os tokens --c-* para estilização personalizada. Mantenha as substituições após a folha de estilo padrão.
• Use propriedades personalizadas para ajustes de rotina, como style="--v: 62%" em um preenchimento de barra.

Não há limite de linhas para código personalizado. Mantenha as extensões tão simples quanto a tarefa permitir. Não edite a skill ou adicione um componente compartilhado apenas para finalizar um documento.

Folhas de estilo: linguagens de design intercambiáveis

Arquivo	Função
styles/base.css	Linguagem de design padrão completa. Marcador: /* html-skill: standalone */.
styles/editorial.css	Skin: papel quente, serifada para leitura. Marcador: /* html-skill: skin */.

Regras:

• Cole a folha de estilo escolhida na íntegra entre as tags <style> em <head>. Coloque substituições específicas do documento após ela, em vez de editar a cópia colada.
• Uma folha de estilo standalone é usada sozinha. Uma skin é colada após base.css — as skins substituem tokens e regras seletivas apenas; a marcação permanece idêntica.
• Trocar uma skin não deve exigir alterações na marcação. Extensões podem adicionar sua própria marcação e classes.
• Para adicionar uma linguagem de design: copie styles/editorial.css, substitua os tokens primeiro (--c-bg, --c-ink, --c-accent, --c-font-*, --c-radius-*, --c-measure), em seguida, corrija tudo o que ainda parecer errado. Dê a ela o marcador skin, a menos que ela realmente substitua todas as regras, então standalone.

Anatomia do documento

Comece de components/shell.html. Siga estas regras de saída:

• exatamente um <h1>, e ele corresponde ao <title>;
• <title> e <meta name="description"> indicam o que é o documento;
• <meta name="color-scheme" content="light dark"> e o script de tema antes da pintura em <head> — antes da primeira pintura, ou a página pisca;
• link de pular para <main id="main">;
• seções são <section class="c-section" id="…">; os ids são estáveis e humanos;
• um sumário (components/navigation.html) quando ajudar na navegação, com todos os alvos do link presentes;
• botão de alternância de tema e rodapé, a menos que o formato seja um folheto apenas para impressão.

Regras de conteúdo

• Os níveis de cabeçalho carregam estrutura. Nunca escolha um nível por seu tamanho.
• Para documentos longos, dê a cada h2/h3 um link de âncora (.c-hlink).
• A prosa segue as preferências de escrita do usuário. Simples, direta, uma ideia por parágrafo. Remova palavras de enchimento e adjetivos promocionais.
• Escape <, >, & dentro de todo <pre>.
• Tabelas precisam de <thead>, e números alinhados à direita com .c-num.
• Todo <img> tem alt. Imagens de evidência recebem uma legenda .c-figure.
• Nome do arquivo: curto, descritivo, com hífens — production-finalization.html, commits-2026-09-22.html, api-settings-explainer.html.

JavaScript

Reutilize os blocos de componentes para tema, impressão, cópia, navegação, diálogos, filtros, abas e movimento. Inclua apenas os recursos que o documento usa.

JavaScript personalizado simples é permitido. Mantenha-o embutido e offline. Não adicione frameworks ou busque dados. O conteúdo essencial deve permanecer legível sem JavaScript.

Movimento e acessibilidade

• prefers-reduced-motion é respeitado por base.css; JS que anima deve verificá-lo também (o bloco contador mostra o padrão).
• Marcos (header, nav, main, footer) e aria-label em cada nav.
• Estados de foco vêm da folha de estilo; nunca remova contornos.
• Projete mobile-first. A 360px de largura, a página não tem barra de rolagem horizontal. Apenas .c-table-wrap, blocos de código, diffs, terminais e .c-tabs-nav podem rolar internamente (overflow-x: auto vem da folha de estilo).
• Popups (.c-drop-body, sumário mini-trilho, tooltips) permanecem dentro de calc(100vw - 2rem). Alvos de toque têm pelo menos 24px em cada dimensão.
• Envolva cada <table> em .c-table-wrap. Prefira .c-grid simples (auto-fit) a menos que colunas fixas sejam necessárias.

Diagramas

Incorpore SVG embutido em um quadro .c-shot (components/media.html) ou como uma URI data:image/svg+xml;base64,. Use data:image/png;base64, para imagens PNG. Não vincule arquivos de imagem separados.

Revisão leve

Mostre o arquivo uma vez. Corrija problemas óbvios de layout ou conteúdo. Não execute um verificador, matriz de captura de tela ou auditoria repetida por padrão. Use verificações direcionadas quando o usuário solicitar ou um problema específico precisar de diagnóstico.

python3 <skill-dir>/scripts/check.py FILE.html é um diagnóstico opcional para marcação, classes, cabeçalhos, âncoras, escapamento de código e algumas referências de ativos. Não é uma porta de entrega ou prova de comportamento offline ou acessibilidade.

Mantenha segredos e informações privadas fora, a menos que o usuário solicite explicitamente sua inclusão. Se a pré-visualização não puder abrir, forneça o caminho do arquivo e declare que a renderização não foi verificada.

Arquivos

Caminho	Conteúdo
styles/base.css	Folha de estilo canônica: tokens, tema, reset, todos os componentes.
styles/editorial.css	Skin: serifada, papel quente.
components/shell.html	Esqueleto, cabeçalho, rodapé, tema, impressão.
components/layout.html	Contêineres, grids, regiões, cartões.
components/reading.html	Cabeçalhos, prosa, citações, destaques, vereditos, notas de rodapé.
components/evidence.html	Blocos de código, diffs, terminais, chips, JS de cópia.
components/data.html	Tabelas, estatísticas, barras, medidores, linhas do tempo, comparações.
components/navigation.html	Sumário, trilho, migalhas, paginador, JS de scroll-spy.
components/interaction.html	Acordeão, diálogo, tooltip, dropdown, filtro, abas.
components/forms.html	Campos, opções, botões, estados de validação.
components/media.html	Figuras, capturas de tela, diagramas, incorporações.
components/motion.html	Revelações, contadores, marquee, apresentações de slides.
specimen.html	Cada componente renderizado — a referência visual.
scripts/check.py	Diagnóstico opcional de marcação.