---
name: html-reports
description: Create HTML reports, explainers, and dashboards with consistent dark theme styling. Use when generating HTML output for sharing via iMessage or sven-pages. Trigger words - report, explainer, dashboard, html, visualize.
---
# HTML Reports
Generate consistent, hermetic HTML reports with tight padding and dark theme.
## Style Guidelines
**ALWAYS use these principles:**
- **Tight padding**: 8-12px, never gaudy spacing
- **Dark theme**: `#0d1117` background, `#c9d1d9` text
- **Small fonts**: 12-13px body, 16px h1, 12px h2
- **Compact cards**: 1px borders, 4-6px border-radius
- **Inline styles**: No external CSS, fully hermetic
## Base Template
```html
{{TITLE}}
{{TITLE}}
{{CONTENT}}
```
## Color Palette
| Use | Color | Hex |
|-----|-------|-----|
| Background | Dark | `#0d1117` |
| Card bg | Slightly lighter | `#161b22` |
| Border | Subtle | `#30363d` |
| Text | Light gray | `#c9d1d9` |
| Muted | Gray | `#8b949e` |
| Link/accent | Blue | `#58a6ff` |
| Code | Light blue | `#79c0ff` |
| Success | Green | `#238636` |
| New | Blue | `#1f6feb` |
| Warning | Yellow | `#d29922` |
## Badge Classes
```html
NEW
FIX
WARN
```
## Section Cards
```html
Section TitleNEW
Description text
Important callout
```
## Sending Reports
```bash
# Via iMessage
~/.claude/skills/sms-assistant/scripts/send-sms "chat_id" --file report.html
# Via sven-pages (permanent URL)
~/.claude/skills/sven-pages/scripts/publish ./report-folder --public
```
## Examples
### Status Dashboard
- System metrics with tables
- Color-coded status badges
- Compact card layout
### Feature Explainer
- Per-feature sections
- Code snippets in monospace
- Flow diagrams with arrows
### Diff Summary
- Changed files list
- Before/after comparisons
- Commit info footer