Run any Skill in Manus with one click

format-as-html

Stars0

Forks0

UpdatedMay 1, 2026 at 08:45

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

bacoco

bacoco/useless-report

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

More from this repository

same repository

generate-dev-change-report

bacoco/useless-report

Generates a developer-facing change report from a repository's current changes, commits, PR context, saved screenshots, and before/after visual evidence. Use when the user asks for a dev report, change report, report on modifications, before/after screenshot report, UI change report, PR summary with visuals, "rapport de dev", "rapport sur les modifications", or wants to send a report about what changed after development.

2026-05-050

format-as-call-prep

bacoco/useless-report

Generates a natural call preparation document — talking points, opening hook, key messages, objection responses, and closing ask — adapted to both the manager's archetype and the user's own communication persona. Not a script: a structured guide that sounds like you. Covers status calls, idea pitches, crisis management, and general check-ins. Use when the user says "I have a call with my manager", "help me pitch this idea", "I need talking points", "prepare me for this conversation", or "what do I say on this call".

2026-05-010

format-as-qa

bacoco/useless-report

Generates a Q&A preparation document from a manager report — all the questions the manager is likely to ask (based on their archetype), with prepared answers derived strictly from the report data. Includes "danger questions" (the ones that catch you off guard), objection responses, and a quick-reference cheat sheet. Output is a collapsible HTML file to review before a meeting or call. Use when the user asks "what will my manager ask?", "help me prepare for my meeting", "I have a review tomorrow", or "Q&A prep".

2026-05-010

track-history

bacoco/useless-report

Persists every generated report to a local history store, tracks manager requests and TODOs across sessions, and generates a delta section comparing current work to previous commitments. Answers: "what did I promise last time?", "what's still open?", "what changed since my last report?". Runs automatically as part of weekly-report. Also invokable standalone to review history, list open manager requests, or generate a delta summary. Use when the user asks "what was outstanding from last week?", "what did my manager ask for?", "show me the diff since last report", or "what's still on my TODO list from Alice?".

2026-05-010

weekly-report

bacoco/useless-report

One-shot orchestrator that produces complete manager-adapted reports from the current git repository. Installed once per project, it reads the project's .useless-report/config.yml to know which manager profiles to generate for — no questions asked on repeat runs. Supports multiple managers: one run generates one report per saved profile. Ingests git activity, GitHub PRs, and ticket references. Renders to markdown, HTML, email, and/or slides using the project's DESIGN.md brand tokens. Use this skill when the user asks "generate my weekly report", "status update for my boss", or any one-shot report request from inside a git repo.

2026-05-010

setup-github-action

bacoco/useless-report

Installe une GitHub Action dans le repo courant qui génère automatiquement un commentaire useless-report sur chaque Pull Request. À l'ouverture ou la mise à jour d'une PR, la CI lit les commits, détecte le profil manager configuré, génère le rapport adapté via l'API Claude, et le poste comme commentaire sur la PR. Use this skill when the user asks for "CI integration", "auto-comment on PRs", "GitHub Action for reports", or "automate the report on every PR".

2026-05-010

name

format-as-html

description

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) :

/* Generated from DESIGN.md — do not edit manually */
:root {
  --bg:         [colors.neutral /* fallback: #ffffff */];
  --fg:         [colors.primary /* fallback: #1a1a1a */];
  --accent:     [colors.secondary ?? colors.tertiary /* fallback: #2563eb */];
  --muted:      [colors.primary à 45% opacité /* fallback: #6b6b6b */];
  --rule:       [colors.primary à 10% opacité /* fallback: #e5e5e5 */];
  --code-bg:    [colors.neutral légèrement contrasté /* fallback: #f5f5f5 */];
  --font-body:  [typography.body-md.fontFamily /* fallback: -apple-system, sans-serif */];
  --font-head:  [typography.h1.fontFamily /* fallback: Georgia, serif */];
  --size-body:  [typography.body-md.fontSize /* fallback: 16px */];
  --lh-body:    [typography.body-md.lineHeight /* fallback: 1.6 */];
  --fw-head:    [typography.h1.fontWeight /* fallback: 600 */];
  --radius-sm:  [rounded.sm /* fallback: 4px */];
}
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 /* fallback: 28px */];
  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 /* fallback: 8px */]; 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); }
/* Semantic status colors — not branded */
.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