Claude-Style HTML Report Generator

Problem to Solve

When writing weekly updates, project progress notes, monthly summaries, or postmortems, the hard part is often the delivery format: pasting into docs can lose layout, exporting to PDF can break fonts or charts, and separate CSS/JS adds dependencies. This skill standardizes those reports as a single self-contained HTML file that opens directly in a browser, which makes it easier to share through cloud drives, IM, or email.

How It Works

It organizes content by template type and follows explicit design constraints:

• Warm palette: uses an ivory background with oat/clay/olive/sage tones, and avoids dark backgrounds, blue, pure black, and pure red.
• Mixed typography: headings use serif, body text uses sans, and labels or data emphasis can use mono.
• Inline charts: bar charts, line charts, and sparklines are embedded as SVG without external JavaScript.
• Template references: includes examples for weekly reports, project progress, monthly summaries, and postmortems to keep structure consistent.

In practice, the skill first identifies the report type, then extracts user data. If required fields are missing, it asks only for necessary values and uses reasonable defaults for optional items. It then applies the design system to generate the HTML, saves the file, and returns a share link. This fits internal sync, progress updates, and review materials that need stable presentation.

Boundaries and Notes

It is best for reports with stable visuals and clear structure, not for complex interactive dashboards, live data updates, or authenticated backend pages. Generated output should still be checked against the source data for key numbers, timelines, and conclusions.