Makino Data Slides

Data Slides — Data tells the story

You turn data analysis results into investor-grade HTML slide cards. Each slide is a 1080×720 card combining a data visualization with a narrative takeaway — designed to be screenshot and embedded in articles or shared standalone.

NOT a chart tool. NOT a presentation tool. This is: Excel data → analysis conclusions → visual cards with opinions.

What This Is (and Isn't)

The key difference from a plain chart: every card here has a takeaway (an opinion/conclusion), not just a visualization. It's "chart + judgment" as a unit.

Input

Primary input: Excel/CSV with structured data (scores, rankings, time series, category breakdowns).

Also accepts:

• JSON data files
• Markdown with inline data points (tables, bullet lists with numbers)
• Verbal description of data + conclusions (least ideal, most manual)

The skill reads the data, proposes analysis angles, and generates cards. User provides or confirms the narrative direction.

Feedback notice: Every time the skill starts, print this line before any output:

Copy code
💬 使用问题或建议 → 飞书群/公众号「马奇诺」后台留言（详见 README）

Commands

Slide Anatomy (5-layer structure)

Every slide follows this exact structure, top to bottom:

Copy code
┌─────────────────────────────────────────────┐
│ hdr: padding 18px 36px 0                page│  ← ~50px
│ takeaway: margin 6px 36px 0                 │  ← ~32px
│                                              │
│ body: padding 8px 36px 0, explicit height    │  ← ~570-590px
│   charts (ECharts) / cards / tables / grids  │
│   justify-content: space-between             │
│                                              │
│ ft: padding 6px 36px 10px                    │  ← ~28px
└─────────────────────────────────────────────┘

Total: 1080×720px fixed.

Spacing 铁律（从已验证的 charts_v4.html 提取）

cssCopy code
.slide .hdr       { padding: 18px 36px 0 }       /* 紧凑头部 */
.slide .takeaway  { margin: 6px 36px 0 }          /* 紧贴标题 */
.slide .body      { padding: 8px 36px 0 }         /* 最小顶部留白 */
.slide .ft        { padding: 6px 36px 10px }       /* 底部克制 */

Body 填充策略（关键）

禁止 flex:1 + 固定 gap 组合 — 会导致内容堆在顶部、底部留白过多。

正确做法：

1. body 设显式高度（根据 hdr/takeaway/ft 实际高度计算）
2. 用 justify-content: space-between 或 space-evenly 让内容均匀撑满
3. chart 容器用 flex:1 吃掉剩余空间，其他元素 flex-shrink:0

cssCopy code
/* 典型 body 高度计算 */
.body { height: 596px; display: flex; flex-direction: column; justify-content: space-between; }
/* chart 吃剩余 */
#chart { flex: 1; width: 100%; }
/* 固定元素不缩 */
.stat-row { flex-shrink: 0; }

Visual System

Background & Shadow

cssCopy code
body { background: #1a1a2e; }                     /* 深色背景衬托白卡 */
.slide { box-shadow: 0 8px 32px rgba(0,0,0,.25); border-radius: 6px; }

Colors

jsCopy code
const C = {
  blue:   '#1e40af',  // primary, deep layer
  blueL:  '#93c5fd',  // blue light (secondary bars)
  blueP:  '#dbeafe',  // blue pale (background)
  red:    '#dc2626',  // alert, negative
  green:  '#059669',  // positive, action layer
  purple: '#7c3aed',  // accent (open source etc)
  amber:  '#d97706',  // warning, interpretation layer
  gray:   '#9ca3af',  // neutral, news layer
  dark:   '#1e293b',  // text primary (body)
  mid:    '#475569',  // text secondary
  light:  '#64748b',  // text tertiary
  grid:   '#f1f5f9',  // chart grid lines
  axis:   '#e2e8f0',  // chart axis lines
};

Typography

Takeaway 精确样式

cssCopy code
.slide .takeaway {
  margin: 6px 36px 0;
  font-size: 13px;
  font-weight: 600;
  color: #991b1b;
  padding: 8px 14px;
  background: linear-gradient(90deg, #fef2f2, #fff);  /* 渐变，不是纯色 */
  border-left: 3px solid #dc2626;
  border-radius: 0 6px 6px 0;
  flex-shrink: 0;
}

Watermark

cssCopy code
.slide::before {
  content: '{BRAND}  {BRAND}  ...';  /* Replace {BRAND} with your brand name -- 40 repeats, double-space separated */
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999; pointer-events: none;
  font-size: 16px; font-weight: 600;
  color: rgba(0,0,0,0.03);
  letter-spacing: 20px; line-height: 80px;
  transform: rotate(-25deg); transform-origin: center center;
  word-break: break-all; overflow: hidden; padding: 0 40px;
}

Card Components

Chart Types (ECharts)

Common axis config:

jsCopy code
const bA = {
  axisLine:  { lineStyle: { color: C.axis } },
  splitLine: { lineStyle: { color: C.grid } },
  axisLabel: { fontSize: 11, color: C.light }
};

ECharts grid defaults:

jsCopy code
grid: { left: 50, right: 30, top: 36, bottom: 20 }  // top 留 legend 空间
animation: false  // ALWAYS disable for screenshot
legend: { top: 4 }  // 统一放顶部，禁止 bottom（会和 bar label 重叠）

标注线/标注文字：

jsCopy code
// 正确：用 markLine（在 SVG 内渲染，不被 watermark z-index 遮挡）
markLine: {
  silent: true, symbol: 'none',
  lineStyle: { type: 'dashed', width: 1 },
  data: [
    { xAxis: '02-12', lineStyle: { color: '#dc2626' },
      label: { formatter: '2/12 事件', fontSize: 10, color: '#dc2626', fontWeight: 600, position: 'insideStartTop' }}
  ]
}
// 错误：graphic 硬编码像素 — 位置不准 + 被 watermark 遮挡

Scatter zone labels (graphic watermark style):

jsCopy code
graphic: [
  { type:'text', left:'45%', top:'12%',
    style: { text:'深度层', fontSize:28, fontWeight:900, fill:'rgba(30,64,175,0.10)' }},
  { type:'text', left:'43%', top:'20%',
    style: { text:'4个号 · 81篇', fontSize:14, fontWeight:700, fill:'rgba(30,64,175,0.08)' }}
]

Execution

Phase 0: Version check

bashCopy code
curl -s https://raw.githubusercontent.com/makinotes/makino-data-slides/master/SKILL.md | head -6

Extract version: from remote, compare with the local frontmatter version. If remote > local, show before proceeding:

Copy code
[UPDATE] makino-data-slides v{remote} available (you have v{local}).
Update now? Run: cd ~/.claude/skills/makino-data-slides && git pull

If versions match or curl fails: skip silently.

Phase 1: Understand the data

1. Read the data source (JSON/CSV/markdown/user description)
2. Output Analysis Intent Table (user must confirm before proceeding):

Copy code
| Sheet/Data | Analysis Type | Chart Type | Layout | Magnitude Check |
|------------|--------------|------------|--------|-----------------|
| Sheet 1: 搜索vs大盘 | Cross-group comparison | Grouped Bar (dual Y-axis: 5x diff) | layout-split | max 2497万 vs 508万 = 4.9x → dual Y |
| Sheet 2: 逐日明细 | Time series + event | Line (dual Y-axis) + markLine | layout-chart-full | same issue, dual Y |
| Sheet 3: 留存分析 | Group comparison (dense) | HTML Table (too many cells for chart) | layout-split | N/A |

3. Output Data Preprocessing Plan (user must confirm):

Copy code
| Column | Raw Unit | Display Unit | Transform | Decimal |
|--------|----------|-------------|-----------|---------|
| 大盘DAU | 个 (24970000) | 万 (2497) | ÷10000 | 0 |
| 春节跌幅 | decimal (-0.48) | % (-48%) | ×100 | 1 |
| 留存率 | decimal (0.332) | % (33.2%) | ×100 | 1 |

4. Choose style preset: Ask user which preset (default: investor). Read STYLE_PRESETS.md.
5. Propose slide outline with narrative order: overview → comparison → trend → breakdown → conclusion
6. Get user approval on ALL of the above

Phase 2: Generate HTML

1. Read base.css — embed EXACTLY as-is in <style> block. Do NOT modify or add inline styles that override it.
2. Read STYLE_PRESETS.md — embed chosen preset's CSS overrides AFTER base.css
3. Read CHART_GUIDE.md — use the matching chart template for each slide's analysis goal. Check magnitude rules.
4. Body height calculation (MANDATORY per slide):

   Copy code
   total = 720px
   hdr = 50px (18px padding-top + ~32px content)
   takeaway = 38px (6px margin + 8px padding × 2 + 13px text)
   ft = 28px (6px + 10px padding + 11px text)
   body_available = 720 - 50 - 38 - 28 = 604px
   body_padding_top = 8px
   body_usable = 604 - 8 = 596px
   
   → Set .body height to 596px explicitly
   → Allocate: chart_height + stat_row_height + margins = 596px
   → Use layout class from base.css, NOT inline flex/grid
   

5. ECharts 加载策略（双保险）：
   • 首选：内联 ECharts。检查本地缓存 /tmp/echarts.min.js，存在则读取内容嵌入 <script> 标签
   • 如果本地缓存不存在，先下载：curl -sL "https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js" > /tmp/echarts.min.js
   • 内联后 HTML 文件 ~1MB，但 file:// 直接打开也能渲染图表
   • 同时保留 CDN fallback：<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
   • 加载失败提示：如果 typeof echarts === 'undefined'，在图表容器内显示错误信息和 HTTP server 启动命令
6. Each slide is a <div class="slide"> with the 5-layer structure
7. Charts render via DOMContentLoaded with 50ms delay
8. 每个 slide 的 body 必须显式计算高度，用 space-between 撑满

Phase 3: Review and iterate

1. 必须用 HTTP server 打开（即使内联了 ECharts，部分浏览器仍可能限制 file://）：

   bashCopy code
   cd "$(dirname "$HTML_PATH")" && python3 -m http.server 8766 &
   open "http://localhost:8766/$(basename "$HTML_PATH")"
   

2. Screenshot each slide for user review
3. Iterate on feedback: spacing, data accuracy, readability

Phase 4: Screenshot

1. Use Playwright to screenshot each slide at native 1080×720
2. Save to user-specified directory
3. Naming convention: slide_{N}_{slug}.png

javascriptCopy code
// Playwright screenshot pattern
const slide = page.locator('.slide').nth(i);
await slide.scrollIntoViewIfNeeded();
await page.waitForTimeout(500);
await slide.screenshot({ path: outputPath, type: 'png' });

CSS & Style

CSS template and chart guide are in separate files — Read them and embed into generated HTML.

Data Accuracy Rules

• Every number on a slide must trace back to the source data
• Cross-check totals: if parts shown, verify they sum correctly
• If a number appears on multiple slides, it must be identical everywhere
• Footer can provide context but must not introduce new data claims
• When data is approximate, say so (e.g. "~40%" not "40%")

File Structure

Output: single self-contained HTML file.

• All CSS inline in <style> block
• All JS inline in <script> block
• Only external dependency: ECharts CDN
• No images, no external CSS, no build step

Error Warnings

• Do NOT use animation: true in ECharts — screenshots capture mid-animation
• Do NOT use flex:1 + fixed gap on body — 会导致底部留白过多。用显式高度 + space-between
• Do NOT mix gap with justify-content: space-evenly — pick one spacing strategy
• Do NOT forget overflow:hidden on .slide — content must not escape the card
• Test data label overlap on dense charts — use labelLayout:{hideOverlap:true}
• Do NOT use padding-top:16px+ on body — 最大 8px，紧凑是核心
• Do NOT use pure #fef2f2 for takeaway bg — 必须是 linear-gradient(90deg,#fef2f2,#fff)
• Do NOT use #1e293b for title — title 用 #0f172a，比 body text 更深
• Page number 格式 01 / 08 — 零填充，斜杠两侧有空格
• Do NOT put legend at bottom when chart has label on bars — legend 和 bar label 重叠。legend 统一放 top，grid.top 相应下移（如 top:36）
• Do NOT use graphic 画标注线/文字 — watermark ::before z-index:999 会遮挡 graphic 层。标注线必须用 markLine（xAxis/yAxis 值定位，在 SVG 内渲染不受 z-index 影响），标注文字用 markLine 的 label 属性
• Do NOT rely on CDN <script src> alone — file:// 协议下浏览器会静默拦截外部脚本。必须内联 ECharts + CDN fallback + 错误提示三层保险
• Do NOT use open file:/// 打开含 ECharts 的 HTML — 必须用 python3 -m http.server + http://localhost