Documents et pages HTML

Que fait Documents et pages HTML ?

Ce que vous produisez

Un fichier .html autonome. Enregistrez chaque fichier livré dans ~/.opencode/html/<slug>.html, y compris les révisions. Créez le répertoire avec mkdir -p ~/.opencode/html si nécessaire. Ne dispersez pas la sortie dans le dépôt, le bureau ou les répertoires temporaires.

Le fichier s'ouvre depuis le disque et fonctionne hors ligne. Incorporez CSS, JavaScript, images et diagrammes. N'utilisez aucune ressource externe, requête réseau, étape de construction ou installation de package.

Cette compétence fournit une feuille de style standard et des règles de sortie simples. Le catalogue de composants est un point de départ, pas une limite sur ce que l'agent peut représenter.

Chemin rapide : écrire → montrer → itérer

1. Lisez la source et components/shell.html.
2. Lisez uniquement les composants nécessaires au contenu.
3. Écrivez le fichier avec un espace réservé pour la feuille de style.
4. Remplacez l'espace réservé par styles/base.css textuellement. Ajoutez un skin si utile.
5. Montrez le fichier avec tools.browser.preview via l'outil execute.

Écrivez d'abord le document utile. Ne transformez pas une page simple en projet de validation. Corrigez les problèmes visibles lorsqu'ils apparaissent. Révisez le même fichier sauf si une version séparée est demandée.

Composer et étendre

• Réutilisez le balisage des composants quand il convient. Préservez les classes c- existantes pour que la feuille de style s'applique toujours.
• Composez les mises en page avec .c-wrap, .c-section, .c-stack, .c-grid, .c-split, .c-rail et .c-card.
• Ajoutez du balisage, du CSS, du SVG intégré ou du JavaScript natif lorsque le catalogue ne couvre pas la tâche.
• Préférez les tokens --c-* pour le style personnalisé. Gardez les remplacements après la feuille de style standard.
• Utilisez les propriétés personnalisées pour les réglages courants, comme style="--v: 62%" sur un remplissage de barre.

Il n'y a pas de limite de lignes de code personnalisé. Gardez les extensions aussi simples que la tâche le permet. Ne modifiez pas la compétence ou n'ajoutez pas un composant partagé juste pour terminer un document.

Feuilles de style : langages de conception interchangeables

Fichier	Rôle
styles/base.css	Langage de conception complet par défaut. Marqueur : /* html-skill: standalone */.
styles/editorial.css	Skin : papier chaud, police avec empattement. Marqueur : /* html-skill: skin */.

Règles :

• Collez la feuille de style choisie textuellement entre les balises <style> dans <head>. Placez les remplacements spécifiques au document après elle au lieu de modifier la copie collée.
• Une feuille de style autonome est utilisée seule. Un skin est collé après base.css — les skins remplacent les tokens et certaines règles uniquement ; le balisage reste identique.
• Changer de skin ne doit pas nécessiter de modifications du balisage. Les extensions peuvent ajouter leur propre balisage et classes.
• Pour ajouter un langage de conception : copiez styles/editorial.css, remplacez d'abord les tokens (--c-bg, --c-ink, --c-accent, --c-font-*, --c-radius-*, --c-measure), puis corrigez ce qui semble encore incorrect. Donnez-lui le marqueur skin sauf s'il remplace vraiment chaque règle, alors standalone.

Anatomie du document

Commencez par components/shell.html. Suivez ces règles de sortie :

• exactement un <h1>, et il correspond au <title> ;
• <title> et <meta name="description"> indiquent ce qu'est le document ;
• <meta name="color-scheme" content="light dark"> et le script de thème avant l'affichage dans <head> — avant le premier rendu, sinon la page scintille ;
• lien d'évitement vers <main id="main"> ;
• les sections sont <section class="c-section" id="…"> ; les id sont stables et humains ;
• une TOC (components/navigation.html) quand elle aide à la navigation, avec chaque cible de lien présente ;
• bouton de basculement de thème et pied de page, sauf si le format est un document imprimable uniquement.

Règles de contenu

• Les niveaux de titres portent la structure. Ne choisissez jamais un niveau pour sa taille.
• Pour les longs documents, donnez à chaque h2/h3 un lien d'ancrage (.c-hlink).
• La prose suit les préférences d'écriture de l'utilisateur. Simple, directe, une idée par paragraphe. Supprimez les remplissages et les adjectifs promotionnels.
• Échappez <, >, & dans chaque <pre>.
• Les tableaux ont besoin de <thead>, et les nombres s'alignent à droite avec .c-num.
• Chaque <img> a alt. Les images de preuve obtiennent une légende .c-figure.
• Nom de fichier : court, descriptif, avec traits d'union — production-finalization.html, commits-2026-09-22.html, api-settings-explainer.html.

JavaScript

Réutilisez les blocs de composants pour le thème, l'impression, la copie, la navigation, les dialogues, les filtres, les onglets et l'animation. Incluez uniquement les fonctionnalités que le document utilise.

Le JavaScript natif personnalisé est autorisé. Gardez-le intégré et hors ligne. N'ajoutez pas de frameworks et ne récupérez pas de données. Le contenu essentiel doit rester lisible sans JavaScript.

Animation et accessibilité

• prefers-reduced-motion est respecté par base.css ; le JS qui anime doit également le vérifier (le bloc de compteur montre le motif).
• Points de repère (header, nav, main, footer) et aria-label sur chaque nav.
• Les états de focus proviennent de la feuille de style ; ne supprimez jamais les contours.
• Concevez d'abord pour le mobile. À 360 px de largeur, la page n'a pas de barre de défilement horizontale. Seuls .c-table-wrap, les blocs de code, les diffs, les terminaux et .c-tabs-nav peuvent défiler en interne (overflow-x: auto vient de la feuille de style).
• Les popups (.c-drop-body, TOC rail mini, infobulles) restent dans calc(100vw - 2rem). Les cibles tactiles font au moins 24 px dans chaque dimension.
• Enveloppez chaque <table> dans .c-table-wrap. Préférez .c-grid simple (auto-fit) sauf si des colonnes fixes sont nécessaires.

Diagrammes

Incorporez le SVG en ligne dans un cadre .c-shot (components/media.html) ou comme URI data:image/svg+xml;base64,. Utilisez data:image/png;base64, pour les images PNG. Ne liez pas de fichiers image séparés.

Révision légère

Montrez le fichier une fois. Corrigez les problèmes évidents de mise en page ou de contenu. N'exécutez pas par défaut de validateur, de matrice de captures d'écran ou d'audit répété. Utilisez des vérifications ciblées lorsque l'utilisateur le demande ou qu'un problème spécifique nécessite un diagnostic.

python3 <skill-dir>/scripts/check.py FICHIER.html est un diagnostic optionnel pour le balisage, les classes, les titres, les ancres, l'échappement de code et certaines références d'actifs. Ce n'est pas une porte de livraison ni une preuve de comportement hors ligne ou d'accessibilité.

Gardez les secrets et informations privées à l'écart, sauf si l'utilisateur demande explicitement leur inclusion. Si l'aperçu ne peut pas s'ouvrir, fournissez le chemin du fichier et indiquez que le rendu n'a pas été vérifié.

Fichiers

Chemin	Contenu
styles/base.css	Feuille de style canonique : tokens, thème, réinitialisation, tous les composants.
styles/editorial.css	Skin : empattement, papier chaud.
components/shell.html	Squelette, en-tête, pied de page, thème, impression.
components/layout.html	Conteneurs, grilles, régions, cartes.
components/reading.html	Titres, prose, citations, encadrés, verdicts, notes de bas de page.
components/evidence.html	Blocs de code, diffs, terminaux, puces, JS de copie.
components/data.html	Tableaux, statistiques, barres, jauges, chronologies, comparaisons.
components/navigation.html	TOC, rail, fils d'Ariane, paginateur, JS de suivi de défilement.
components/interaction.html	Accordéon, dialogue, infobulle, liste déroulante, filtre, onglets.
components/forms.html	Champs, choix, boutons, états de validation.
components/media.html	Figures, captures d'écran, diagrammes, intégrations.
components/motion.html	Révélations, compteurs, défilement, diaporamas.
specimen.html	Chaque composant rendu — la référence visuelle.
scripts/check.py	Diagnostic optionnel du balisage.