field-notes-editorial-template

Field Notes Editorial Template is a design skill that produces a premium, magazine-style business report as a single self-contained HTML file. It solves the problem of turning raw metrics and narrative into an elegant "data storytelling" layout without a build step or external dependencies, aiming for the look of an editorial print piece: a soft paper background with a subtle vignette, serif display headlines paired with clean sans-serif body copy, rounded pastel insight and metric cards, and a retention chart panel with a legend and axis labels.

The skill defines a concrete workflow: read the active DESIGN.md and map its palette and typography into root CSS variables, copy the bundled assets/template.html to index.html as the working artifact, preserve the editorial visual language, and add lightweight, presentation-safe interactions such as a metrics/insights/retention view switcher, a count-up animation for key numbers, and a chart line reveal. It ships an example.html and a references/checklist.md that gates output through P0 (single-file HTML, three report views, animated metrics, honest placeholders, no sandbox-hostile APIs without safe guards), P1 quality, and P2 polish tiers. Honest placeholder values (an em dash when data is unknown) are required so no figures are fabricated.

The skill targets designers, analysts, and founders who need a polished board memo one-pager, investor update, or executive summary quickly. It is well suited to anyone using an artifact-capable agent who wants a repeatable, checklist-enforced editorial report format rather than hand-building layout and chart styling each time.