Field Notes Editorial Template

A single-file HTML template that frames business metrics and insights in a magazine editorial style: soft paper background, serif headlines, rounded pastel cards for KPIs, and a retention chart panel. Built for board memos, executive one-pagers, or any report where you want data to feel polished rather than clinical. It respects an active design system for color and type, includes view switching between metrics, insights, and retention screens, and animates numbers on load. The workflow is straightforward: it copies a base template, maps your palette to CSS variables, and keeps interactions lightweight so the output works in presentations. If you need analytics to look like they belong in a thoughtful publication rather than a dashboard, this handles the layout work.

skills.sh installs: 2.9K
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill field-notes-editorial-template --agent claude-code

Installs into .claude/skills of the current project.

Files

Field Notes Editorial Template

Produce a premium editorial data report in a single self-contained HTML file.

Resource map

field-notes-editorial-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

Read active DESIGN.md and map palette/typography to root CSS variables.
Copy assets/template.html to index.html as the working artifact.
Keep the editorial frame language:
- paper-like background and subtle vignette
- serif display headlines plus clean sans-serif body copy
- rounded pastel metric / insight cards
- chart panel with legend and axis labels
Keep interactions lightweight and presentation-safe:
- page view switcher (metrics / insights / retention)
- number count-up animation for key metrics
- chart line reveal animation
Use honest placeholders (— or neutral labels) where data is unknown.
Validate against references/checklist.md before emitting.