How to install field-notes-editorial-template
npx skills add https://github.com/nexu-io/open-design --skill field-notes-editorial-templateFull instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: field-notes-editorial-template description: | Editorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention chart panel. Use when users ask for a premium magazine-style business report, board memo one-pager, or elegant data storytelling layout. triggers:
- "field notes editorial template"
- "editorial report template"
- "magazine style business report"
- "pastel insight dashboard"
- "高级编辑风报告模板"
- "奶油底粉彩卡片数据报告"
od:
mode: template
surface: video
type: hyperframes
platform: desktop
preview:
type: html
entry: index.html
reload: debounce-100
design_system:
requires: true
sections: [color, typography, layout, components]
outputs:
primary: index.html
secondary:
- template.html
- example.html example_prompt: "Create an editorial Field Notes style report with three insight cards, key metrics blocks, and a retention line chart in one polished single-file HTML page." capabilities_required:
- file_write
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.mdand map palette/typography to root CSS variables. - Copy
assets/template.htmltoindex.htmlas 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.mdbefore emitting.
Output contract
One short orientation sentence, then:
<artifact identifier="field-notes-editorial" type="text/html" title="Field Notes Editorial Report">
<!doctype html>
<html>...</html>
</artifact>
Related skills
More from nexu-io/open-design and the wider catalog.
ui-ux-pro-max
|
web-design-guidelines
|
frontend-design
|
design-brief
|
pptx-html-fidelity-audit
Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export — including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair. Also trigger when the user shows you a deck.html and a deck.pptx side by side and is debugging visual differences.
hatch-pet
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.