| name | format-as-html |
| description | Converts a markdown manager report (the output of any useless-report generate-* skill) into a standalone styled HTML file ready to email, share, or save. Includes embedded CSS derived from the project's DESIGN.md brand tokens — no hardcoded themes, no external dependencies. If no DESIGN.md is found, runs the generate-design flow first. Use this skill when the user wants to send a report by email, share a polished version, generate a printable artifact, or asks for "the HTML version", "make it look nice", "I need to send this to my boss", "format this for email". Triggers after any generate-* skill when the user wants a more polished output.
|
format-as-html
Goal
Take a generated markdown report and produce a single self-contained HTML file: typography and colors from the project's DESIGN.md charte, embedded CSS, no external resources, no JavaScript. The output should be readable in any email client, browser, or printed.
One file. Your brand. No dependencies. Looks professional in any inbox.
How to use
Step 1 — Get the markdown
The user provides (or has just generated) a markdown report. If unclear, ask them to paste it or point you to it.
Step 2 — Load the visual identity
- Look for
./DESIGN.md in the current working directory.
- If found → parse the YAML front matter, extract tokens.
- If not found → invoke
useless-report:generate-design (it will ask the user for sources or generate a generic design). Continue once DESIGN.md exists.
Token extraction:
| CSS variable | DESIGN.md source | Fallback |
|---|
--bg | colors.neutral | #ffffff |
--fg | colors.primary | #1a1a1a |
--accent | colors.secondary → colors.tertiary | #2563eb |
--rule | colors.primary à 10% opacité (calculé) | #e5e5e5 |
--code-bg | colors.neutral légèrement contrasté | #f5f5f5 |
--font-body | typography.body-md.fontFamily | -apple-system, sans-serif |
--font-heading | typography.h1.fontFamily | Georgia, serif |
--font-size-body | typography.body-md.fontSize | 16px |
--line-height | typography.body-md.lineHeight | 1.6 |
--font-weight-heading | typography.h1.fontWeight | 600 |
--radius-sm | rounded.sm | 4px |
Tokens absents du DESIGN.md → utiliser le fallback avec commentaire /* fallback */ dans le CSS généré.
Couleurs sémantiques (ON TRACK / AT RISK / BLOCKED) : toujours fixes — elles portent une signification universelle indépendante de la charte :
- ON TRACK :
background: #dcfce7; color: #166534
- AT RISK :
background: #fef3c7; color: #92400e
- BLOCKED :
background: #fee2e2; color: #991b1b
Step 3 — Generate the HTML
Produce a complete HTML5 document with:
<!DOCTYPE html> and proper <html lang="fr"> (or en based on report language)<meta charset="UTF-8"> and viewport tag<title> derived from the report's first H1 or H2- All CSS embedded in
<style> — no <link> to external files
- A header block: report title, date, repo name (if available), generated by useless-report tagline
- The full markdown content rendered as semantic HTML
- A footer with the generation timestamp
CSS template (valeurs injectées depuis DESIGN.md) :
:root {
--bg: [colors.neutral ];
--fg: [colors.primary ];
--accent: [colors.secondary ?? colors.tertiary ];
--muted: [colors.primary à 45% opacité ];
--rule: [colors.primary à 10% opacité ];
--code-bg: [colors.neutral légèrement contrasté ];
--font-body: [typography.body-md.fontFamily ];
--font-head: [typography.h1.fontFamily ];
--size-body: [typography.body-md.fontSize ];
--lh-body: [typography.body-md.lineHeight ];
--fw-head: [typography.h1.fontWeight ];
--radius-sm: [rounded.sm ];
}
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--fg);
max-width: 760px;
margin: 0 auto;
padding: 48px 32px;
line-height: var(--lh-body);
font-size: var(--size-body);
}
h1 {
font-family: var(--font-head);
font-size: [typography.h1.fontSize ];
font-weight: var(--fw-head);
margin-top: 0;
padding-bottom: 12px;
border-bottom: 2px solid var(--rule);
}
h2 {
font-family: var(--font-head);
font-size: [typography.h2.fontSize ?? 22px];
font-weight: var(--fw-head);
margin-top: 36px;
padding-bottom: 6px;
border-bottom: 1px solid var(--rule);
}
h3 { font-size: 17px; margin-top: 28px; color: var(--accent); }
ul, ol { padding-left: 24px; }
li { margin: 6px 0; }
a { color: var(--accent); }
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; background: var(--code-bg); }
code {
font-family: "SF Mono", Consolas, monospace;
font-size: 14px;
background: var(--code-bg);
padding: 2px 6px;
border-radius: var(--radius-sm);
}
pre { background: var(--code-bg); padding: 16px; border-radius: [rounded.md ]; overflow-x: auto; }
blockquote { border-left: 4px solid var(--accent); padding-left: 16px; color: var(--muted); margin: 16px 0; }
.report-header { color: var(--muted); font-size: 13px; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.5px; }
.report-footer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.status-banner { padding: 12px 16px; border-radius: var(--radius-sm); margin: 16px 0; font-weight: 600; }
.status-on-track { background: #dcfce7; color: #166534; }
.status-at-risk { background: #fef3c7; color: #92400e; }
.status-blocked { background: #fee2e2; color: #991b1b; }
Step 4 — Save and report
Save to ./useless-report-[YYYY-MM-DD].html. Confirm path and offer: "Open with open useless-report-[date].html or attach to your email."
If the report contained a status banner (ON TRACK / AT RISK / BLOCKED), wrap it in <div class="status-banner status-on-track"> etc.
Rules
- No external resources. No
<link href="https://...">, no <script src=>, no fonts loaded from Google. Self-contained or it's broken.
- No JavaScript. Must work in email clients with scripts disabled.
- Render markdown faithfully. Format conversion only — don't editorialize or restructure.
- Preserve every fact. No summarization.
- Sanitize raw HTML in the markdown (escape it unless it's a deliberate
<table>).
- Email-client safe CSS: no flexbox/grid magic, no CSS variables in inline styles for old clients — keep variables in
:root and use them in modern selectors.
Pipeline position
DESIGN.md (ou generate-design si absent)
↓
generate-X-report (markdown output)
↓
format-as-html ← you are here
↓
open / email / print
