# HTML Report Template
> Generisches CSS-Skin für selbstständige HTML-Reports (Dark Mode, Desktop-first) auf Basis der globalen Design Tokens. Kein Struktur-Skeleton — nur Variablen und Basis-Komponenten (Cards, Tabellen, Tags, Stat-Grid), die jeder Report-Skill frei anordnet. Use when ein HTML-Report/Dashboard/Analyse-Output erstellt wird und dabei konsistent zu anderen Reports aussehen soll statt eigene Farben/Abstände zu erfinden.
- Skill: `is-noname/html-report-template` (Agent Skill)
- Install (CLI): `npx skillmds@latest add is-noname/html-report-template`
- Raw SKILL.md: https://api.skillmd.com/api/skills/is-noname/html-report-template/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: is-noname (https://skillmd.com/u/is-noname)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/is-noname/html-report-template
---
# HTML Report Template
Ein **Skin, kein Skeleton**: dieses Skill definiert CSS-Variablen und Basis-Komponenten,
keine feste HTML-Struktur (Header/Sections/Footer). Jeder Report-Skill baut seine eigene
Struktur (siehe z.B. `layer-3-domain/coding/improve-codebase-architecture/HTML-REPORT.md`
für ein sehr spezifisches Format mit Mermaid-Diagrammen) — aber alle greifen auf dieselben
Farb-/Typografie-/Spacing-Werte zu, statt sie neu zu erfinden.
Quelle der Werte: `~/.claude/design-tokens.md` (globale Design Tokens für Web, CLI, Apps,
Reports). Dieses Skill übersetzt sie in ein direkt einbindbares CSS-Snippet für
selbstständige (self-contained) HTML-Dateien ohne Build-Step.
## Wann nutzen
- Neuer HTML-Report/Dashboard, der als einzelne `.html`-Datei ausgeliefert wird
(kein Framework, keine externen Stylesheets außer optional CDN-Fonts)
- Wenn Konsistenz mit anderen Reports/Tools des Users gewünscht ist (Dark Mode,
Canto-Green-Akzent, Manrope-Typografie)
## Wann nicht nutzen
- Interaktive Web-Apps mit eigenem Design-System — dort gelten die App-eigenen Tokens
- Reports mit einem bereits etablierten, sehr spezifischen Format (z.B.
`improve-codebase-architecture`'s Mermaid/Editorial-Stil) — dort nur die Farbwerte
übernehmen, nicht die Komponenten-Patterns erzwingen
## CSS-Variablen (aus design-tokens.md)
In den `` einbinden:
```html
```
Für Fonts (optional, CDN): Google Fonts `Manrope:400,500,600,700,800` und
`JetBrains+Mono`. Falls die Report-Datei komplett offline/self-contained sein muss,
Fallback-Stack (`'Segoe UI', sans-serif` bzw. `Consolas, monospace`) reicht ohne CDN.
## Basis-Komponenten
### Listen / Tabellen (Rows)
```html
Row 1
Letzte Row — kein border-bottom
```
Hover (falls interaktiv): `background: var(--raised)`. Nie Card-per-Item mit eigenem
`border-radius` stapeln — wirkt "bubblig".
### Stats-Grid (Metabar)
```html
Label
42
```
Border als Gap-Farbe (`gap:1px; background:var(--border)`), kein separater
Border-Trick pro Zelle.
### Tags / Badges
```html
OKFEHLER
```
### Card-Nesting
Max 1 Ebene: Section-Heading + flache Rows, oder eine Card mit flachen Rows.
Nie: card → card-header → card-body → setting-row → item-card.
## Spacing-Referenz
- Content-Padding: `20px 24px`
- Row-Padding: `8px 12px`
- Card-Body: `12px 14px`
- Card-Header: `10px 14px`
- Sektionsabstand: `margin: 18px 0 8px`
- Max-Width Panels: `1060px` (Desktop-first, verhindert dass Tabellen auf breiten
Monitoren leer wirken)
## Referenzimplementierungen
- `layer-3-domain/coding/improve-codebase-architecture/HTML-REPORT.md` — nutzt ein
eigenes Editorial-Farbschema (Tailwind stone/slate/emerald), **nicht** auf dieses
Skin umgestellt. Kandidat für spätere Migration der Farbwerte, aber die
Mermaid/Card-Struktur bleibt eigenständig.
## Update-Pfad
Diese Werte sind eine Kopie aus `~/.claude/design-tokens.md`, keine Live-Referenz —
bei Änderungen dort manuell nachziehen, bis [[IZG-T-054]] (Single-Source-of-Truth
für gemeinsame Konventionsdateien) geklärt ist.