Web Report Builder
Build a single, self-contained HTML file that presents an analysis or
briefing at the quality of a published product page. Everything inline:
one file, no local assets, no build step.
Language rule
All user-visible text on the page MUST be written in the same language as
the task description you received. This skill's instructions are English,
but the deliverable follows the task's language. Set the lang attribute
on <html> accordingly.
Companion skill
If the modern-web-guidance skill is available in your skills directory,
consult it for current best-practice APIs (container queries, View
Transitions, Popover, etc.) while implementing. This skill owns the
STRUCTURE and DESIGN of the report; modern-web-guidance owns modern
platform techniques. Prefer progressive enhancement: the page must remain
fully readable if a modern API is unavailable.
Hard requirements
- ONE self-contained
.html file: all CSS in a single <style> block,
all JS in a single <script> block, data embedded as one
const DATA = {...} JSON literal.
- Chart library from a CDN is allowed (e.g.
https://cdn.jsdelivr.net/npm/chart.js); everything else inline.
- Responsive from 360px to wide desktop; no horizontal scroll.
- Light and dark theme via CSS custom properties on
:root and
html[data-theme="dark"], with a visible toggle. Drive EVERY color
through the custom properties - hardcoded colors break the other theme.
- Accessible: semantic landmarks (
header, main, nav, footer),
one h1, ordered heading levels, alt/aria labels on visuals, WCAG AA
contrast in BOTH themes, visible focus states.
- State on the page that data is a point-in-time snapshot, with the date.
Page architecture
- Hero header: report title (assertion, not topic), one-line subtitle,
date + data-source note, theme toggle.
- KPI strip: 3-5 stat tiles - big number, short label, delta vs prior
period with an up/down indicator colored by MEANING (good/bad), not
by direction.
- Content sections (3-6), each: section heading as a takeaway sentence,
short lead paragraph, then a chart / table / card grid. Alternate
layout patterns between sections so the page has rhythm.
- Data table section: sortable columns (click header toggles asc/desc),
free-text filter input, and category filter chips where a dimension
has few values.
- Footer: methodology note, sources (real URLs if web research was
involved), generation date.
Design system
- Define spacing/type/color as CSS custom properties at the top.
- Palette (light): background
#FFFFFF, panel #F2F5FA, text #1F2733,
muted #66707F, primary #1A2B4A, accent #2E6FDB, warn #E8A33D,
positive #1E8E5A, negative #C6423F. Derive the dark theme by
swapping surfaces (#10151D background, #1A212C panel, #E8EDF4
text), keeping the same accent hues.
- Type scale: 1.25 ratio from a 16px base; page title clamps ~28-40px
via
clamp(). System font stack is fine.
- Cards: 12-16px radius, 1px border in a low-contrast border color,
subtle shadow in light theme only.
- Charts (Chart.js): wrap every canvas in a fixed-height container
(~320px) with
maintainAspectRatio: false; colors from the palette
via getComputedStyle; direct axis labels; no more than 5 series on
one chart; re-render charts on theme toggle so their colors follow.
- Max content width ~1080px, centered; KPI strip and card grids use
CSS grid with
auto-fit, minmax().
Content quality bar
- Section headings are findings ("Repeat buyers drive 62% of revenue"),
not labels ("Revenue analysis").
- Every number on the page must come from the provided data or cited
web research. No invented figures.
- Keep prose tight: lead paragraphs of 2-3 sentences; let visuals carry
detail.
Verification (mandatory)
- If Node.js is available, syntax-check the embedded script: extract the
<script> body to a temp .js file (strip the DOM calls into a guard
or use node --check).
python3 -c "import html.parser"-based or regex sanity pass: every
id referenced by getElementById exists; DATA parses as JSON
(extract and json.loads it).- Open-check with a headless fetch if a browser is unavailable: at
minimum re-read the file and confirm both theme blocks, the toggle
handler, and all section headings are present.
Fix and rebuild until clean.
Delivery
- Save with a descriptive filename, e.g.
q3_briefing.html.
- If the task provided an upload URL for deliverables, upload with:
curl -sS -X PUT --upload-file <file> -H "Content-Type: text/html; charset=utf-8" "<upload_url>"
Retry once on failure.
- In your final report, state the filename and list the sections with
their one-line findings.
1---2name: web-report3description: Build a polished, self-contained single-page HTML report or briefing microsite - executive briefings, analysis reports, campaign/project one-pagers rendered for the browser. Use whenever the task asks for a web page, HTML report, briefing page, or microsite. Covers page architecture, design system, charts, and delivery.4---56# Web Report Builder78Build a single, self-contained HTML file that presents an analysis or9briefing at the quality of a published product page. Everything inline:10one file, no local assets, no build step.1112## Language rule1314All user-visible text on the page MUST be written in the same language as15the task description you received. This skill's instructions are English,16but the deliverable follows the task's language. Set the `lang` attribute17on `<html>` accordingly.1819## Companion skill2021If the `modern-web-guidance` skill is available in your skills directory,22consult it for current best-practice APIs (container queries, View23Transitions, Popover, etc.) while implementing. This skill owns the24STRUCTURE and DESIGN of the report; modern-web-guidance owns modern25platform techniques. Prefer progressive enhancement: the page must remain26fully readable if a modern API is unavailable.2728## Hard requirements2930- ONE self-contained `.html` file: all CSS in a single `<style>` block,31 all JS in a single `<script>` block, data embedded as one32 `const DATA = {...}` JSON literal.33- Chart library from a CDN is allowed (e.g.34 `https://cdn.jsdelivr.net/npm/chart.js`); everything else inline.35- Responsive from 360px to wide desktop; no horizontal scroll.36- Light and dark theme via CSS custom properties on `:root` and37 `html[data-theme="dark"]`, with a visible toggle. Drive EVERY color38 through the custom properties - hardcoded colors break the other theme.39- Accessible: semantic landmarks (`header`, `main`, `nav`, `footer`),40 one `h1`, ordered heading levels, alt/aria labels on visuals, WCAG AA41 contrast in BOTH themes, visible focus states.42- State on the page that data is a point-in-time snapshot, with the date.4344## Page architecture45461. Hero header: report title (assertion, not topic), one-line subtitle,47 date + data-source note, theme toggle.482. KPI strip: 3-5 stat tiles - big number, short label, delta vs prior49 period with an up/down indicator colored by MEANING (good/bad), not50 by direction.513. Content sections (3-6), each: section heading as a takeaway sentence,52 short lead paragraph, then a chart / table / card grid. Alternate53 layout patterns between sections so the page has rhythm.544. Data table section: sortable columns (click header toggles asc/desc),55 free-text filter input, and category filter chips where a dimension56 has few values.575. Footer: methodology note, sources (real URLs if web research was58 involved), generation date.5960## Design system6162- Define spacing/type/color as CSS custom properties at the top.63- Palette (light): background `#FFFFFF`, panel `#F2F5FA`, text `#1F2733`,64 muted `#66707F`, primary `#1A2B4A`, accent `#2E6FDB`, warn `#E8A33D`,65 positive `#1E8E5A`, negative `#C6423F`. Derive the dark theme by66 swapping surfaces (`#10151D` background, `#1A212C` panel, `#E8EDF4`67 text), keeping the same accent hues.68- Type scale: 1.25 ratio from a 16px base; page title clamps ~28-40px69 via `clamp()`. System font stack is fine.70- Cards: 12-16px radius, 1px border in a low-contrast border color,71 subtle shadow in light theme only.72- Charts (Chart.js): wrap every canvas in a fixed-height container73 (~320px) with `maintainAspectRatio: false`; colors from the palette74 via `getComputedStyle`; direct axis labels; no more than 5 series on75 one chart; re-render charts on theme toggle so their colors follow.76- Max content width ~1080px, centered; KPI strip and card grids use77 CSS grid with `auto-fit, minmax()`.7879## Content quality bar8081- Section headings are findings ("Repeat buyers drive 62% of revenue"),82 not labels ("Revenue analysis").83- Every number on the page must come from the provided data or cited84 web research. No invented figures.85- Keep prose tight: lead paragraphs of 2-3 sentences; let visuals carry86 detail.8788## Verification (mandatory)8990- If Node.js is available, syntax-check the embedded script: extract the91 `<script>` body to a temp `.js` file (strip the DOM calls into a guard92 or use `node --check`).93- `python3 -c "import html.parser"`-based or regex sanity pass: every94 `id` referenced by `getElementById` exists; `DATA` parses as JSON95 (extract and `json.loads` it).96- Open-check with a headless fetch if a browser is unavailable: at97 minimum re-read the file and confirm both theme blocks, the toggle98 handler, and all section headings are present.99Fix and rebuild until clean.100101## Delivery1021031. Save with a descriptive filename, e.g. `q3_briefing.html`.1042. If the task provided an upload URL for deliverables, upload with:105 `curl -sS -X PUT --upload-file <file> -H "Content-Type: text/html; charset=utf-8" "<upload_url>"`106 Retry once on failure.1073. In your final report, state the filename and list the sections with108 their one-line findings.
GoogleCloudPlatform