Docs Page Skill
Erstellen Sie eine einzelne, dreispaltige Dokumentationsseite in einer HTML-Datei.
Arbeitsablauf
- Lesen Sie das aktive DESIGN.md (oben eingefügt). Verwenden Sie den Body-Type-Token für Prosa; den Mono-Token für Code; respektieren Sie die Regeln für Zeilenhöhe und maximale Breite.
- Wählen Sie ein Thema aus der Aufgabenstellung – die Seite sollte wie echte Dokumentation aussehen, nicht wie ein generisches Drahtmodell. Konkrete API-Namen, Befehlsbeispiele, plausible Parameter.
- Legen Sie drei Bereiche an, die auf der Inline-Achse ausgerichtet sind, sodass das
Layout korrekt unter
dir="rtl"umschlägt:- Inline-Start-Navigation (240–280px, sticky): Gruppierte Linkliste, aktuelle Seite fett gedruckt mit einem Akzentstreifen an der Inline-Start-Kante. 3–5 Gruppen mit 4–8 Links.
- Artikelkörper (max-width ~720px, in der mittleren Spalte zentriert): H1, Einleitungsabsatz, H2-Abschnitte, Codeblöcke, Hinweisboxen (Hinweis / Warnung), Inline-Links, Listen.
- Inline-Ende-Inhaltsverzeichnis (200–240px, sticky): "Auf dieser Seite" mit den H2/H3-Ankern, der aktuelle Abschnitt wird beim Scrollen hervorgehoben.
- Schreiben Sie ein einzelnes HTML-Dokument:
<!doctype html>bis</html>, gesamtes CSS inline.- CSS Grid für die drei Spalten; sticky-Positionierung für die Seitenleisten.
- Codeblöcke: nichtproportionaler Token, weiche Oberflächenfüllung, Kopieren-Button-Funktion (nur visuell – kein JS erforderlich).
- Anker-IDs auf jedem H2/H3, damit die Links im Inhaltsverzeichnis funktionieren.
data-od-idauf der Navigation, dem Artikel und dem Inhaltsverzeichnis.
- Prosa: Schreiben Sie mindestens 350 Wörter glaubwürdiger Dokumentation. Fügen Sie mindestens einen Shell-Befehl, ein Code-Snippet (5–15 Zeilen), einen Hinweis und eine Tabelle ein.
- Selbstprüfung:
- Der Haupttext umbricht an der optimalen Zeilenlänge des Designsystems (60–75 Zeichen).
- Code verwendet den Mono-Token des Designsystems, nicht generisches
monospace. - Der Akzent ist dezent – verwendet für aktive Navigationselemente, Links und eine Hinweisbox-Umrandung. Nicht für Haupttext.
- Die Seite ist bei 1280w lesbar und bricht unter 900w anmutig zusammen (Inhaltsverzeichnis fällt aus, Navigation wird zu einer oberen Schublade).
- Verwenden Sie logisches CSS (
margin-inline-start,border-inline-start,inset-inline-end,text-align: start) auf den Seitenleisten und dem Akzentstreifen, damit das Layout unterdir="rtl"korrekt umklappt.
Ausgabe-Vertrag
Ausgabe zwischen <artifact>-Tags:
<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
<!doctype html>
<html>...</html>
</artifact>
Ein Satz vor dem Artefakt, nichts danach.