Field Notes Editorial Template
Generate a single-file, magazine-style Field Notes HTML report with pastel insight cards, metrics blocks, and a retention chart for board memos or data storytelling.
Overview
Field Notes Editorial Template is an agent skill most often used in Build (also Validate, Grow) that produces a premium single-file HTML Field Notes report with serif hero type, pastel cards, and a retention chart from D
Install
npx skills add https://github.com/nexu-io/open-design --skill field-notes-editorial-templateWhat is this skill?
- Self-contained index.html from assets/template.html with DESIGN.md-driven CSS variables
- Serif hero typography, soft paper background, and rounded pastel insight cards
- Retention line chart panel plus key metrics blocks in one layout
- Hyperframes desktop surface with debounced HTML preview workflow
- Design-system sections required: color, typography, layout, components
- 4 design-system sections: color, typography, layout, components
- 3 primary layout motifs: hero, insight cards, retention chart panel
Adoption & trust: 829 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have metrics and insights but only generic slides or raw charts—not a cohesive, magazine-quality one-page report your agent can ship as HTML.
Who is it for?
Solo builders presenting validation findings, product updates, or retention stories as a polished HTML memo without a full frontend sprint.
Skip if: Teams that need a multi-page CMS, real-time BI dashboards, or video-native layouts without HTML export.
When should I use this skill?
Users ask for Field Notes editorial template, magazine-style business report, pastel insight dashboard, or cream-background editorial data report.
What do I get? / Deliverables
You get index.html (and optional template/example copies) matching your design system with editorial layout ready to share or host.
- index.html primary report
- template.html and example.html references
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is build/docs because the skill’s primary output is a polished HTML artifact tied to DESIGN.md variables—not a live app feature. Documentation and narrative deliverables (reports, one-pagers) belong under docs even when they visualize metrics.
Where it fits
Mock a investor-ready Field Notes page with three insight cards before the real product ships.
Ship an internal release memo as index.html that mirrors your DESIGN.md palette and typography.
Turn weekly retention deltas into an editorial report you can email or host as a static page.
How it compares
A structured HTML report template—not a charting SaaS or a generic Tailwind landing generator.
Common Questions / FAQ
Who is field-notes-editorial-template for?
Indie founders, operators, and builders who want Claude/Cursor to output an elegant, self-contained business report page aligned to an existing DESIGN.md.
When should I use field-notes-editorial-template?
During validate when you need a credible one-pager for stakeholders, during build when docs must look board-ready, or during grow when you turn analytics into editorial storytelling layouts.
Is field-notes-editorial-template safe to install?
It primarily writes local HTML from bundled assets; review the Security Audits panel on this Prism page before enabling broad file-write permissions in your agent.
SKILL.md
READMESKILL.md - Field Notes Editorial Template
# Field Notes Editorial Template Produce a premium editorial data report in a single self-contained HTML file. ## Resource map ```text field-notes-editorial-template/ ├── SKILL.md ├── assets/ │ └── template.html ├── references/ │ └── checklist.md └── example.html ``` ## Workflow 1. Read active `DESIGN.md` and map palette/typography to root CSS variables. 2. Copy `assets/template.html` to `index.html` as the working artifact. 3. 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 4. Keep interactions lightweight and presentation-safe: - page view switcher (metrics / insights / retention) - number count-up animation for key metrics - chart line reveal animation 5. Use honest placeholders (`—` or neutral labels) where data is unknown. 6. Validate against `references/checklist.md` before emitting. ## Output contract One short orientation sentence, then: ```xml <artifact identifier="field-notes-editorial" type="text/html" title="Field Notes Editorial Report"> <!doctype html> <html>...</html> </artifact> ```