skill Claude Code CX Codex Cursor GitHub Copilot
Open on GitHub
field-notes-editorial-template — Claude Code skill: how to install
Generates a magazine-style editorial business report in a single HTML file. Useful for board memos and clean data storytelling.
Install into Claude Code · Skills CLI (Vercel)
All methods and platforms ↓
npx skills add nexu-io/open-design --skill field-notes-editorial-template -a claude-codeWhat field-notes-editorial-template does
This skill builds an editorial report in a single index.html file. The layout mimics a print magazine. It pairs a paper-like background with serif headlines and pastel insight cards.
Interactive elements work without extra setup. Key metrics feature a count-up animation, while the chart line reveals progressively. When numbers are missing, the skill inserts honest em-dash placeholders. It checks the final code against references/checklist.md.
Your agent requires file_write capabilities to run this workflow. Design tokens come directly from DESIGN.md, which maps typography and colors into root CSS variables.
What it helps with
- format an editorial business memo for board presentations
- build a single-file interactive HTML dashboard
- visualize user retention metrics with an animated line chart
- present data insights using pastel summary cards
Example prompts for the agent
- Create an editorial Field Notes style report with three insight cards, key metrics blocks, and a retention line chart in one single-file HTML page.
- Generate a magazine-style board memo one-pager using the editorial template
How to install field-notes-editorial-template
1Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill field-notes-editorial-template -a claude-code2Manually: put the files in place
~/.claude/skills/field-notes-editorial-template/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/field-notes-editorial-template/
1Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill field-notes-editorial-template -a codex2Manually: put the files in place
.agents/skills/field-notes-editorial-template/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill field-notes-editorial-template -a cursor2Manually: put the files in place
.cursor/skills/field-notes-editorial-template/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design field-notes-editorial-template2Manually: put the files in place
.github/skills/field-notes-editorial-template/SKILL.md1Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill field-notes-editorial-template -a gemini-cli2Platform CLI
gemini skills install https://github.com/nexu-io/open-design --path skills/field-notes-editorial-templateManually: put the files in place
.devin/skills/field-notes-editorial-template/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill field-notes-editorial-template -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set106
The whole set →
ui-ux-pro-max A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests.
Claude Code CX Codex Cursor +1
5,400installs
frontend-design Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards.
Claude Code CX Codex Cursor +1
4,800installs
threejs Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js.
Claude Code CX Codex Cursor +1
3,400installs
creative-director This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique.
Claude Code CX Codex Cursor +1
3,400installs
design-brief Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional."
Claude Code CX Codex Cursor +1
3,400installs
apple-hig Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning.
Claude Code CX Codex Cursor +1
3,200installs
hatch-pet Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions.
Claude Code CX Codex Cursor +1
3,100installs
design-md Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system.
Claude Code CX Codex Cursor +1
3,100installs
Similar
event-store-design This skill guides event store design for event-sourced systems and helps compare storage technologies. Use it when building event persistence infrastructure or choosing a store.
Claude Code CX Codex Cursor
10,800installs
answer-me-with-html This skill turns selected answers into one-page HTML explainers. Use it to show a flow, compare options, or lay out findings from an investigation.
Claude Code CX Codex Cursor +1
5,200installs
antislop A rule-based filter for generic AI output in interfaces and code. Use it when an agent needs explicit checks for UI, copy, accessibility, or mobile layout.
Claude Code CX Codex Cursor +1
7,300installs
frontend-design
official This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough.
Claude Code Claude.ai
1,025,790installs
grill-me grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts.
Claude Code
1,424,476installs
design-taste-frontend This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished.
Claude Code CX Codex Cursor +1
673,100installs
prototype Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase.
Claude Code
986,201installs
grilling Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting.
Claude Code
979,543installs
Questions about field-notes-editorial-template
How do I install field-notes-editorial-template in Claude Code?
Run npx skills add nexu-io/open-design --skill field-notes-editorial-template -a claude-code in your terminal to install the skill for Claude Code.
What does field-notes-editorial-template do?
It generates a standalone magazine-style HTML report with paper background styling, serif headings, pastel cards, and a retention chart panel.
What are the prerequisites for this skill?
The agent requires file_write capabilities to save output artifacts. It also relies on a DESIGN.md file to map typography and color variables.
Source text
SKILL.md · Apache-2.0
---
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
```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>
```
© nexu-io · Apache-2.0 · nexu-io/open-design
