Field Notes Editorial Template

Name: Field Notes Editorial Template
Author: nexu-io

nexu-io/open-design

1.8k installs
82k repo stars
Updated July 28, 2026
nexu-io/open-design

An editable, single-file HTML template that renders an editorial-styled business report with metrics, insights, and retention data visualization.

About

Field Notes Editorial Template produces premium, single-file HTML reports styled with soft paper backgrounds, serif display headlines, rounded pastel insight cards, and interactive retention charts. Developers use it when stakeholders request magazine-style board memos, data storytelling layouts, or elegant one-pagers. The workflow reads design system variables (color, typography, layout, components), copies a base template to index.html, preserves the editorial frame (vignette, serif/sans hierarchy, lightweight interactions like metric count-ups and chart reveals), and validates against a checklist before output. Outputs are production-ready HTML with honest placeholders where data is unknown.

Single self-contained HTML file with no external dependencies or build step
Soft paper vignette background and serif display typography for premium editorial feel
Rounded pastel metric cards with count-up animations and page-view switcher
Retention line chart with axis labels, legend, and line reveal animation
Design system integration - maps palette and typography to CSS variables from DESIGN.md

Field Notes Editorial Template by the numbers

1,784 all-time installs (skills.sh)
+122 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #157 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

field-notes-editorial-template capabilities & compatibility

Capabilities: single file html generation · design system variable mapping · interactive chart rendering · count up and reveal animations · lightweight page view switching
Use cases: ui design · presentations

From the docs

What field-notes-editorial-template says it does

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

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill field-notes-editorial-template

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/field-notes-editorial-template.svg)](https://skillselion.com/skills/nexu-io/open-design/field-notes-editorial-template)

Installs	1.8k
repo stars	★ 82k
Security audit	3 / 3 scanners passed
Last updated	July 28, 2026
Repository	nexu-io/open-design ↗

What it does

Generate a self-contained HTML editorial report with serif typography, pastel cards, and data visualizations for business communication.

Who is it for?

Product managers, designers, and engineers creating business communication artifacts; teams using design systems with defined color and typography palettes.

Skip if: Real-time dashboards, interactive BI tools, or applications requiring dynamic data binding or backend integration.

When should I use this skill?

User requests editorial report template, magazine-style business report, premium dashboard layout, or pastel insight card design.

What you get

A polished, self-contained HTML report suitable for board presentations, stakeholder memos, and data storytelling without custom design or build tools.

index.html (primary artifact)
template.html (reference asset)
example.html (demo)

By the numbers

Single HTML file (no external dependencies)
3 page views: metrics, insights, retention
Count-up animation and chart line reveal

Files

SKILL.mdMarkdownGitHub ↗

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

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:

<artifact identifier="field-notes-editorial" type="text/html" title="Field Notes Editorial Report">
<!doctype html>
<html>...</html>
</artifact>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Field Notes Editorial Report</title>
  <style>
    :root {
      --paper: #f4f0e8;
      --ink: #181715;
      --ink-soft: rgba(24, 23, 21, 0.72);
      --lime: #c9d57a;
      --pink: #e4b8cc;
      --peach: #e9cbaf;
      --line-pink: #e6a2bc;
      --line-yellow: #ddd06a;
      --line-ink: #1d1d1d;
      --radius: 28px;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; height: 100%; }
    body {
      font-family: "Avenir Next", "Segoe UI", Inter, sans-serif;
      background: radial-gradient(circle at 50% 40%, #f8f5ee 0%, var(--paper) 65%);
      color: var(--ink);
    }
    .deck {
      width: min(1280px, 96vw);
      margin: 22px auto;
      border-radius: 22px;
      padding: 30px 30px 84px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 18px 60px rgba(24, 23, 21, 0.12);
      background: var(--paper);
    }
    .topline {
      display: flex;
      justify-content: space-between;
      color: var(--ink-soft);
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .panel { display: none; min-height: 560px; }
    .panel.active { display: block; }

    .metrics-grid {
      display: grid;
      grid-template-columns: 1.8fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 18px;
      min-height: 520px;
    }
    .hero, .card { border-radius: var(--radius); padding: 28px; }
    .hero {
      grid-row: 1 / -1;
      background: var(--lime);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .hero em {
      display: block;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 32px;
      line-height: 1.2;
      font-style: italic;
      max-width: 560px;
    }
    .hero .pct {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 122px;
      line-height: .9;
    }
    .card { background: #fff5; display: flex; flex-direction: column; justify-content: flex-end; }
    .card.pink { background: var(--pink); }
    .card.peach { background: var(--peach); }
    .card .label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
    .card .num { font-family: Georgia, "Times New Roman", serif; font-size: 78px; line-height: 1; }

    .insight-grid {
      min-height: 520px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .insight {
      border-radius: var(--radius);
      padding: 30px;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .insight:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(24,23,21,.1); }
    .insight h3 { margin: 10px 0 12px; font-size: 28px; font-family: Georgia, serif; }
    .insight p { margin: 0; line-height: 1.6; color: var(--ink-soft); }
    .insight:nth-child(1) { background: var(--pink); }
    .insight:nth-child(2) { background: var(--lime); }
    .insight:nth-child(3) { background: var(--peach); }

    .retention {
      min-height: 520px;
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 24px;
      align-items: center;
    }
    .retention h2 {
      margin: 0 0 16px;
      font-size: 64px;
      line-height: 1.06;
      font-family: Georgia, serif;
    }
    .retention p { color: var(--ink-soft); line-height: 1.7; }
    .legend { margin-top: 22px; display: grid; gap: 10px; }
    .legend .row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
    .legend i { width: 24px; height: 4px; border-radius: 2px; display: inline-block; }
    .chart-wrap {
      background: #fff;
      border-radius: var(--radius);
      padding: 20px;
      box-shadow: 0 14px 44px rgba(24,23,21,.1);
    }
    .chart-wrap svg { width: 100%; height: auto; display: block; }
    .axis { font-size: 11px; fill: var(--ink-soft); }
    .line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

    .bottom {
      position: absolute;
      left: 30px;
      right: 30px;
      bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--ink-soft);
      font-size: 12px;
      letter-spacing: .08em;
    }
    .pager {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: #111;
      color: #f5f1ea;
      border-radius: 999px;
      padding: 8px 14px;
      border: 0;
      cursor: pointer;
    }
    .pager:hover { background: #222; }

    @media (max-width: 1100px) {
      .metrics-grid, .insight-grid, .retention { grid-template-columns: 1fr; }
      .hero { min-height: 300px; }
      .hero .pct { font-size: 84px; }
      .retention h2 { font-size: 44px; }
    }
  </style>
</head>
<body>
  <section class="deck">
    <div class="topline"><span>Field Notes</span><span id="page-mark">vi</span></div>

    <div class="panel active" id="panel-metrics">
      <div class="metrics-grid">
        <article class="hero">
          <em>of new accounts open the third email, up from 41% last quarter.</em>
          <div class="pct" data-count="68">0%</div>
        </article>
        <article class="card pink">
          <div class="label">Long-form interviews</div>
          <div class="num" data-count="28">0</div>
        </article>
        <article class="card peach">
          <div class="label">Teams shadowed</div>
          <div class="num" data-count="9">0</div>
        </article>
      </div>
    </div>

    <div class="panel" id="panel-insights">
      <div class="insight-grid">
        <article class="insight">
          <strong>Insight #1</strong>
          <h3>Trust is the onboarding</h3>
          <p>Customers do not churn on day one because the product is hard. They churn when the early messages feel generic.</p>
        </article>
        <article class="insight">
          <strong>Insight #2</strong>
          <h3>Power users dread upgrades</h3>
          <p>The most engaged users value predictability. Keep upgrade narratives explicit and avoid surprise resets.</p>
        </article>
        <article class="insight">
          <strong>Insight #3</strong>
          <h3>Support is product</h3>
          <p>Half of feature requests are discoverability issues. Documentation and UI clarity lower roadmap noise.</p>
        </article>
      </div>
    </div>

    <div class="panel" id="panel-retention">
      <div class="retention">
        <div>
          <h2>The curve bends around day three.</h2>
          <p>Cohorts with a written welcome plus a human follow-up retain roughly 2x better than template-only cohorts by day 90.</p>
          <div class="legend">
            <div class="row"><i style="background:var(--line-pink)"></i><span>Templated welcome</span></div>
            <div class="row"><i style="background:var(--line-yellow)"></i><span>Written welcome</span></div>
            <div class="row"><i style="background:var(--line-ink)"></i><span>Written + human reply</span></div>
          </div>
        </div>
        <div class="chart-wrap">
          <svg viewBox="0 0 560 280" aria-label="Retention line chart">
            <g stroke="rgba(24,23,21,.1)">
              <line x1="56" y1="40" x2="530" y2="40"></line>
              <line x1="56" y1="90" x2="530" y2="90"></line>
              <line x1="56" y1="140" x2="530" y2="140"></line>
              <line x1="56" y1="190" x2="530" y2="190"></line>
              <line x1="56" y1="240" x2="530" y2="240"></line>
            </g>
            <text class="axis" x="24" y="44">100</text>
            <text class="axis" x="34" y="244">0</text>
            <text class="axis" x="56" y="264">D0</text>
            <text class="axis" x="286" y="264">D30</text>
            <text class="axis" x="506" y="264">D90</text>
            <path class="line" id="line1" stroke="var(--line-pink)" d="M56,52 C146,84 220,140 300,176 C372,205 450,224 530,236"></path>
            <path class="line" id="line2" stroke="var(--line-yellow)" d="M56,52 C150,66 226,104 304,132 C390,156 460,172 530,180"></path>
            <path class="line" id="line3" stroke="var(--line-ink)" d="M56,52 C150,60 230,84 306,100 C392,114 462,126 530,134"></path>
          </svg>
        </div>
      </div>
    </div>

    <div class="bottom">
      <span>April 29, 2026</span>
      <button id="pager" class="pager">◀ <span id="pager-text">6 / 12</span> ▶</button>
      <span>Field Notes · Vol. III</span>
    </div>
  </section>

  <script>
    const panels = ["metrics", "insights", "retention"];
    const marks = { metrics: "vi", insights: "iv", retention: "x" };
    const pagerText = { metrics: "6 / 12", insights: "4 / 12", retention: "10 / 12" };
    let idx = 0;

    function showPanel(next) {
      idx = next % panels.length;
      const key = panels[idx];
      document.querySelectorAll(".panel").forEach((el) => el.classList.remove("active"));
      document.getElementById("panel-" + key).classList.add("active");
      document.getElementById("page-mark").textContent = marks[key];
      document.getElementById("pager-text").textContent = pagerText[key];
    }

    document.getElementById("pager").addEventListener("click", () => {
      showPanel(idx + 1);
    });

    document.querySelectorAll("[data-count]").forEach((el) => {
      const target = Number(el.getAttribute("data-count") || "0");
      let start = null;
      const unit = el.textContent.includes("%") ? "%" : "";
      function tick(ts) {
        if (!start) start = ts;
        const p = Math.min((ts - start) / 900, 1);
        const v = Math.round(target * p);
        el.textContent = String(v) + unit;
        if (p < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    });

    ["line1", "line2", "line3"].forEach((id, i) => {
      const path = document.getElementById(id);
      const len = path.getTotalLength();
      path.style.strokeDasharray = String(len);
      path.style.strokeDashoffset = String(len);
      setTimeout(() => {
        path.style.transition = "stroke-dashoffset 1s ease";
        path.style.strokeDashoffset = "0";
      }, 300 + i * 120);
    });
  </script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Field Notes Editorial Report Example</title>
  <style>
    :root {
      --paper: #f4f0e8;
      --ink: #181715;
      --ink-soft: rgba(24, 23, 21, 0.72);
      --lime: #c9d57a;
      --pink: #e4b8cc;
      --peach: #e9cbaf;
      --line-pink: #e6a2bc;
      --line-yellow: #ddd06a;
      --line-ink: #1d1d1d;
      --radius: 28px;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; height: 100%; }
    body {
      font-family: "Avenir Next", "Segoe UI", Inter, sans-serif;
      background: radial-gradient(circle at 50% 40%, #f8f5ee 0%, var(--paper) 65%);
      color: var(--ink);
    }
    .deck { width: min(1280px, 96vw); margin: 22px auto; border-radius: 22px; padding: 30px 30px 84px; position: relative; overflow: hidden; box-shadow: 0 18px 60px rgba(24,23,21,.12); background: var(--paper); }
    .topline { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
    .panel { display: none; min-height: 560px; }
    .panel.active { display: block; }
    .metrics-grid { display: grid; grid-template-columns: 1.8fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; min-height: 520px; }
    .hero, .card { border-radius: var(--radius); padding: 28px; }
    .hero { grid-row: 1 / -1; background: var(--lime); display: flex; flex-direction: column; justify-content: space-between; }
    .hero em { display: block; font-family: Georgia, serif; font-size: 32px; line-height: 1.2; font-style: italic; max-width: 560px; }
    .hero .pct { font-family: Georgia, serif; font-size: 122px; line-height: .9; }
    .card { background: #fff5; display: flex; flex-direction: column; justify-content: flex-end; }
    .card.pink { background: var(--pink); } .card.peach { background: var(--peach); }
    .card .label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
    .card .num { font-family: Georgia, serif; font-size: 78px; line-height: 1; }
    .insight-grid { min-height: 520px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .insight { border-radius: var(--radius); padding: 30px; transition: transform .25s ease, box-shadow .25s ease; }
    .insight:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(24,23,21,.1); }
    .insight h3 { margin: 10px 0 12px; font-size: 28px; font-family: Georgia, serif; }
    .insight p { margin: 0; line-height: 1.6; color: var(--ink-soft); }
    .insight:nth-child(1) { background: var(--pink); } .insight:nth-child(2) { background: var(--lime); } .insight:nth-child(3) { background: var(--peach); }
    .retention { min-height: 520px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: center; }
    .retention h2 { margin: 0 0 16px; font-size: 64px; line-height: 1.06; font-family: Georgia, serif; }
    .retention p { color: var(--ink-soft); line-height: 1.7; }
    .legend { margin-top: 22px; display: grid; gap: 10px; }
    .legend .row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
    .legend i { width: 24px; height: 4px; border-radius: 2px; display: inline-block; }
    .chart-wrap { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: 0 14px 44px rgba(24,23,21,.1); }
    .chart-wrap svg { width: 100%; height: auto; display: block; }
    .axis { font-size: 11px; fill: var(--ink-soft); }
    .line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
    .bottom { position: absolute; left: 30px; right: 30px; bottom: 20px; display: flex; justify-content: space-between; align-items: center; color: var(--ink-soft); font-size: 12px; letter-spacing: .08em; }
    .pager { display: inline-flex; align-items: center; gap: 12px; background: #111; color: #f5f1ea; border-radius: 999px; padding: 8px 14px; border: 0; cursor: pointer; }
    .pager:hover { background: #222; }
    @media (max-width: 1100px) { .metrics-grid, .insight-grid, .retention { grid-template-columns: 1fr; } .hero { min-height: 300px; } .hero .pct { font-size: 84px; } .retention h2 { font-size: 44px; } }
  </style>
</head>
<body>
  <section class="deck">
    <div class="topline"><span>Field Notes</span><span id="page-mark">vi</span></div>
    <div class="panel active" id="panel-metrics">
      <div class="metrics-grid">
        <article class="hero"><em>of new accounts open the third email, up from 41% last quarter.</em><div class="pct" data-count="68">0%</div></article>
        <article class="card pink"><div class="label">Long-form interviews</div><div class="num" data-count="28">0</div></article>
        <article class="card peach"><div class="label">Teams shadowed</div><div class="num" data-count="9">0</div></article>
      </div>
    </div>
    <div class="panel" id="panel-insights">
      <div class="insight-grid">
        <article class="insight"><strong>Insight #1</strong><h3>Trust is the onboarding</h3><p>Customers do not churn on day one because the product is hard. They churn when the early messages feel generic.</p></article>
        <article class="insight"><strong>Insight #2</strong><h3>Power users dread upgrades</h3><p>The most engaged users value predictability. Keep upgrade narratives explicit and avoid surprise resets.</p></article>
        <article class="insight"><strong>Insight #3</strong><h3>Support is product</h3><p>Half of feature requests are discoverability issues. Documentation and UI clarity lower roadmap noise.</p></article>
      </div>
    </div>
    <div class="panel" id="panel-retention">
      <div class="retention">
        <div>
          <h2>The curve bends around day three.</h2>
          <p>Cohorts with a written welcome plus a human follow-up retain roughly 2x better than template-only cohorts by day 90.</p>
          <div class="legend">
            <div class="row"><i style="background:var(--line-pink)"></i><span>Templated welcome</span></div>
            <div class="row"><i style="background:var(--line-yellow)"></i><span>Written welcome</span></div>
            <div class="row"><i style="background:var(--line-ink)"></i><span>Written + human reply</span></div>
          </div>
        </div>
        <div class="chart-wrap">
          <svg viewBox="0 0 560 280" aria-label="Retention line chart">
            <g stroke="rgba(24,23,21,.1)"><line x1="56" y1="40" x2="530" y2="40"></line><line x1="56" y1="90" x2="530" y2="90"></line><line x1="56" y1="140" x2="530" y2="140"></line><line x1="56" y1="190" x2="530" y2="190"></line><line x1="56" y1="240" x2="530" y2="240"></line></g>
            <text class="axis" x="24" y="44">100</text><text class="axis" x="34" y="244">0</text><text class="axis" x="56" y="264">D0</text><text class="axis" x="286" y="264">D30</text><text class="axis" x="506" y="264">D90</text>
            <path class="line" id="line1" stroke="var(--line-pink)" d="M56,52 C146,84 220,140 300,176 C372,205 450,224 530,236"></path>
            <path class="line" id="line2" stroke="var(--line-yellow)" d="M56,52 C150,66 226,104 304,132 C390,156 460,172 530,180"></path>
            <path class="line" id="line3" stroke="var(--line-ink)" d="M56,52 C150,60 230,84 306,100 C392,114 462,126 530,134"></path>
          </svg>
        </div>
      </div>
    </div>
    <div class="bottom"><span>April 29, 2026</span><button id="pager" class="pager">◀ <span id="pager-text">6 / 12</span> ▶</button><span>Field Notes · Vol. III</span></div>
  </section>
  <script>
    const panels = ["metrics", "insights", "retention"];
    const marks = { metrics: "vi", insights: "iv", retention: "x" };
    const pagerText = { metrics: "6 / 12", insights: "4 / 12", retention: "10 / 12" };
    let idx = 0;
    function showPanel(next) {
      idx = next % panels.length;
      const key = panels[idx];
      document.querySelectorAll(".panel").forEach((el) => el.classList.remove("active"));
      document.getElementById("panel-" + key).classList.add("active");
      document.getElementById("page-mark").textContent = marks[key];
      document.getElementById("pager-text").textContent = pagerText[key];
    }
    document.getElementById("pager").addEventListener("click", () => showPanel(idx + 1));
    document.querySelectorAll("[data-count]").forEach((el) => {
      const target = Number(el.getAttribute("data-count") || "0");
      let start = null;
      const unit = el.textContent.includes("%") ? "%" : "";
      function tick(ts) {
        if (!start) start = ts;
        const p = Math.min((ts - start) / 900, 1);
        el.textContent = String(Math.round(target * p)) + unit;
        if (p < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    });
    ["line1", "line2", "line3"].forEach((id, i) => {
      const path = document.getElementById(id);
      const len = path.getTotalLength();
      path.style.strokeDasharray = String(len);
      path.style.strokeDashoffset = String(len);
      setTimeout(() => { path.style.transition = "stroke-dashoffset 1s ease"; path.style.strokeDashoffset = "0"; }, 300 + i * 120);
    });
  </script>
</body>
</html>

Related skills

Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k

Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k

Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k

Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470

Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k

Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109k

How it compares

Pick field-notes-editorial-template over generic dashboard skills when the deliverable is a static editorial one-pager or board memo with magazine typography rather than an interactive app UI.

FAQ

Is the output a static or interactive report?

Static HTML with lightweight client-side interactions: page view switcher, count-up animations, chart line reveal. No backend required.

How do I customize colors and fonts?

Read active DESIGN.md and map palette/typography to root CSS variables. The template uses CSS custom properties for easy theming.

Can I add real data to the template?

Yes. Replace honest placeholders (dashes, neutral labels) with actual values. Keep the single-file HTML structure intact.

Is Field Notes Editorial Template safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Design & UI/UXuibranding

Field Notes Editorial Template

About

Field Notes Editorial Template by the numbers

field-notes-editorial-template capabilities & compatibility

What field-notes-editorial-template says it does

Add your badge

What it does

Who is it for?

When should I use this skill?

What you get

By the numbers

Files

Field Notes Editorial Template

Resource map

Workflow

Output contract

Field Notes Editorial Template Checklist

P0 (must pass before emitting `<artifact>`)

P1 (quality bar)

P2 (polish)

Related skills

How it compares

FAQ

Is the output a static or interactive report?

How do I customize colors and fonts?

Can I add real data to the template?

Is Field Notes Editorial Template safe to install?

About

Field Notes Editorial Template by the numbers

field-notes-editorial-template capabilities & compatibility

What field-notes-editorial-template says it does

Add your badge

What it does

Who is it for?

When should I use this skill?

What you get

By the numbers

Files

Field Notes Editorial Template

Resource map

Workflow

Output contract

Field Notes Editorial Template Checklist

P0 (must pass before emitting <artifact>)

P1 (quality bar)

P2 (polish)

Related skills

How it compares

FAQ

Is the output a static or interactive report?

How do I customize colors and fonts?

Can I add real data to the template?

Is Field Notes Editorial Template safe to install?

This week in AI coding

P0 (must pass before emitting `<artifact>`)