원클릭으로 Manus에서 모든 스킬 실행

format-as-html

스타0

포크0

업데이트2026년 5월 1일 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.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

bacoco

bacoco/useless-report

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

관련 직업SOC

SOC 직업 분류 기준

웹 개발자컴퓨터 및 수학직·SOC 15-1254

SKILL.md

readonly

이 저장소의 다른 Skills

같은 저장소

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