④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A） - 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。 - ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐： · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。 · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。 · 保留旧版有价值的要求：每项功能补齐做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；横向流程图每步写清页面／功能／操作／完成判据。 · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。 · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。 · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。 - 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图＋用户路径）。二、open-design 移到技能根（用户选候选 A） - `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。 - `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。 - 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与同根技能（`<技能根>/<技能名>/`）两类分开写。 - open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。 - 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md 当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。三、验收 - check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝通过 225 / 失败 0 / 提示 27。 - 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,106 @@
+---
+name: social-media-matrix-tracker-template
+description: |
+  社媒矩阵数据追踪面板模板（Social Media Matrix Tracker）。
+  Use when users ask for a cinematic, data-dense social media analytics dashboard
+  with multi-platform metrics, interactive charts, hover insights, range compare,
+  and dark/light theme switching in a single HTML artifact.
+triggers:
+  - "social media matrix tracker"
+  - "social media dashboard template"
+  - "creator analytics template"
+  - "live social dashboard"
+  - "social analytics"
+  - "content performance"
+  - "TikTok analytics dashboard"
+  - "Instagram analytics dashboard"
+  - "YouTube analytics dashboard"
+  - "multi-platform creator dashboard"
+  - "社媒矩阵数据追踪面板"
+  - "社媒矩阵看板模板"
+  - "社交媒体数据追踪模板"
+  - "新媒体数据看板"
+  - "新媒体矩阵分析"
+  - "内容运营数据看板"
+  - "抖音数据看板"
+  - "小红书数据看板"
+od:
+  mode: template
+  platform: desktop
+  scenario: live-artifacts
+  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 a social media matrix tracker dashboard template using my DESIGN.md. Keep the cinematic glassmorphism style, multi-chart analytics sections, hover tooltips, pin/drag range analysis, and light/dark switching."
+  capabilities_required:
+    - file_write
+---
+
+# Social Media Matrix Tracker Template
+
+Ship a premium, cinematic social-media analytics template with high data density and production-grade micro-interactions.
+
+## Resource map
+
+```text
+social-media-matrix-tracker-template/
+├── SKILL.md
+├── assets/
+│   └── template.html
+├── references/
+│   └── checklist.md
+└── example.html
+```
+
+## Workflow
+
+1. Read active `DESIGN.md` first, map tokens to CSS variables, then adapt `assets/template.html`.
+2. Keep the structural information architecture intact: hero + platform matrix + KPI strip + multi-chart deep sections.
+3. Preserve interaction fidelity:
+   - dark/light theme toggle
+   - hover tooltip on charts (auto-clamps inside viewport)
+   - click-to-pin chart point
+   - drag interval analysis
+   - Shift+drag multi-range compare
+   - insights panel live updates on every chart (line / stack / donut / geo)
+   - touch + keyboard arrow-key support for line charts (a11y)
+4. Ensure template remains self-contained (single HTML with inline CSS/JS, no framework dependency).
+5. Keep default sample data realistic and internally consistent across cards/charts.
+6. Validate with `references/checklist.md` before emitting the artifact.
+
+### Adapting the sample data safely
+
+`assets/template.html` ships with hand-tuned sample arrays. When swapping in real data, follow this contract so charts and insights stay coherent:
+
+- Replace **whole arrays at once**, not individual indices — line charts assume `values[]` and `xLabels[]` are the same length and aligned by index.
+- Match the existing **unit + decimals**: `hourChart` (engagements / `decimals: 0`), `slaChart` (minutes / `decimals: 0`), `roiChart` (multiplier x / `decimals: 1`), `cohortChart` (% / `decimals: 0`). Mismatched units break tooltip + A/B insight copy.
+- Keep all four line series the **same length** (default 7 points). Different lengths leak into the A/B compare which expects shared indices.
+- For `mixChart`, every `bars[i].stack` must remain a 3-element array (`[Video, Thread, Carousel]`). For `sentimentChart`, `arcs[]` percentages should sum to 100.
+- Update KPI strip + platform card metrics in lock-step — the artifact's "Live overview" insight derives from the same numbers.
+- Single-data-point datasets are guarded (drawn as a labelled dot) but degrade UX; prefer ≥ 3 points per chart when adapting.
+
+## Output contract
+
+Emit one short sentence before the artifact (e.g. *"Cinematic social media matrix tracker — dark theme by default, all interactions live."*) and then a single self-contained HTML artifact.
+
+- The artifact **must** use the `<artifact>` wrapper exactly as shown below — the daemon parser keys on the wrapper element.
+- `identifier="social-media-matrix-tracker"` is the canonical id (don't suffix with project name).
+- `type="text/html"` and `title` are required.
+- Inline CSS + JS only. No external framework / CDN. No external font imports beyond what `template.html` already declares.
+- The final document is the **adapted** `template.html` (with DESIGN.md tokens applied), not a verbatim copy and not a separate `index.html`. Do not emit both.
+
+```xml
+<artifact identifier="social-media-matrix-tracker" type="text/html" title="Social Media Matrix Tracker">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
@@ -0,0 +1,25 @@
+# Checklist
+
+## P0
+
+- `assets/template.html` exists and opens directly from disk.
+- `example.html` is complete, hand-built, and uses realistic social analytics labels/values.
+- Skill frontmatter uses `od.mode: template` and `od.scenario: live-artifacts`.
+- Template supports dark/light switching without broken contrast.
+- Core charts expose hover tooltip with explicit dimension + value.
+- Line charts support pin point + drag range statistics.
+- Shift+drag saves multiple ranges and updates A/B comparison insight.
+- Insights panel updates on hover, pin, and range interactions.
+
+## P1
+
+- Mobile fallback stacks grids under 1260px.
+- All sections render without external JS/CSS frameworks.
+- Data narratives are consistent (platform cards, KPI row, and charts do not conflict).
+- Visual style remains cinematic and glassmorphic while keeping readability.
+
+## P2
+
+- Tooltip avoids edge clipping in common viewport sizes.
+- 3D/parallax and glow effects are subtle enough to avoid motion fatigue.
+- Chart redraw after theme switch keeps interactions functional.