splatstudio – Page de documentation

Compétence Page de documentation

Produire une page de documentation unique à trois colonnes dans un seul fichier HTML.

Flux de travail

1. Lire le DESIGN.md actif (injecté ci-dessus). Utiliser le token body pour le texte courant ; le token mono pour le code ; respecter les règles de hauteur de ligne et de largeur maximale.
2. Choisir un sujet dans le brief — la page doit ressembler à une vraie documentation, pas à une maquette générique. Noms d'API concrets, exemples de commandes, paramètres plausibles.
3. Disposer trois zones exprimées sur l'axe en ligne de sorte que la mise en page s'inverse correctement sous dir="rtl" :
   • Navigation en début de ligne (240–280 px, collante) : liste de liens regroupés, page courante en gras avec une bande d'accent sur le bord inline-start. 3–5 groupes de 4–8 liens.
   • Corps d'article (max-width ~720 px, centré dans la colonne du milieu) : H1, paragraphe d'introduction, sections H2, blocs de code, encadrés (note / avertissement), liens en ligne, listes.
   • Table des matières en fin de ligne (200–240 px, collante) : « Sur cette page » avec les ancres H2/H3, section courante mise en évidence lors du défilement.
4. Écrire un seul document HTML :
   • <!doctype html> jusqu'à </html>, tout le CSS en ligne.
   • CSS Grid pour les trois colonnes ; positionnement collant pour les rails.
   • Blocs de code : token monospace, fond de surface doux, bouton de copie (visuel uniquement — pas de JS nécessaire).
   • Identifiants d'ancre sur chaque H2/H3 pour que les liens du TOC fonctionnent.
   • data-od-id sur la navigation, l'article et le TOC.
5. Prose : écrire au moins 350 mots de documentation crédible. Inclure au moins une commande shell, un extrait de code (5–15 lignes), un encadré, un tableau.
6. Auto‑vérification :
   • Le texte du corps s'ajuste au point idéal de la DS (60–75 caractères).
   • Le code utilise le token mono de la DS, pas un générique monospace.
   • L'accent est discret — utilisé pour l'élément de navigation actif, les liens, la bordure d'un encadré. Pas sur le texte courant.
   • La page est lisible à 1280w et se réduit élégamment en dessous de 900w (le TOC disparaît, la navigation devient un tiroir en haut).
   • Utiliser du CSS logique (margin-inline-start, border-inline-start, inset-inline-end, text-align: start) sur les rails et la bande d'accent pour que la mise en page s'inverse correctement sous dir="rtl".

Contrat de sortie

Émettre entre les balises <artifact> :

<artifact identifier="docs-slug" type="text/html" title="Docs — Titre de la page">
<!doctype html>
<html>...</html>
</artifact>

Une phrase avant l’artefact, rien après.