# Social media matrix tracker template Human Guide

## What This Is For
Ship a premium, cinematic social-media analytics template with high data density and production-grade micro-interactions. It gives the agent a clearer input/output frame for social content: what context to ask for, what decisions to make, and what usable artifact to return.

Use this as a human-readable version of the Social media matrix tracker template agent skill. It is meant for marketers, operators, founders, and other non-coders who want the workflow without reading agent-specific implementation instructions.

## When To Use This
- Use this when you need a repeatable process for social media matrix tracker template.
- Use this when the task needs judgment, examples, constraints, or a clear output format rather than a one-off prompt.
- Use this when you want to hand an AI assistant enough context to produce a usable marketing artifact.

## When Not To Use This
- Do not use this when you only need a quick factual answer.
- Do not use this when the work depends on private data you cannot share with the assistant.
- Do not use this as a replacement for legal, compliance, financial, or medical review.

## What You Need Before Starting
- The goal or business outcome you want.
- The audience, customer segment, or market context.
- Any source material the assistant should respect, such as notes, briefs, examples, URLs, or brand guidance.
- Constraints such as tone, length, channel, deadline, region, or approval requirements.
- A clear definition of what a good final answer should look like.

## Step-By-Step Workflow
1. State the job clearly: "Use the Social media matrix tracker template guide to help me with..."
2. Add context: audience, goal, offer, channel, source material, and constraints.
3. Ask the assistant to identify missing inputs before producing the final output.
4. Have the assistant follow the skill-specific guidance below.
5. Review the result against the final checklist and ask for revisions where needed.

## Skill-Specific Guidance
- Read active `DESIGN.md` first, map tokens to CSS variables, then adapt `assets/template.html`.
- Keep the structural information architecture intact: hero + platform matrix + KPI strip + multi-chart deep sections.
- Preserve interaction fidelity:
- hover tooltip on charts (auto-clamps inside viewport)
- 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)
- Ensure template remains self-contained (single HTML with inline CSS/JS, no framework dependency).
- Keep default sample data realistic and internally consistent across cards/charts.
- Validate with `references/checklist.md` before emitting the artifact.
- Replace **whole arrays at once**, not individual indices — line charts assume `values[]` and `xLabels[]` are the same length and aligned by index.
- Keep all four line series the **same length** (default 7 points). Different lengths leak into the A/B compare which expects shared indices.

## Decision Points And Nuance
The original skill emphasizes: Resource map, Workflow, Adapting the sample data safely, Output contract, Supporting file: references/checklist.md, P0, P1, P2.

Use these questions to steer the work:
- What is the intended audience or buyer?
- What source material must be preserved?
- What should the assistant optimize for: clarity, persuasion, accuracy, speed, creativity, or conversion?
- What examples represent the desired quality bar?
- What should the assistant avoid?

## Common Mistakes
- For `mixChart`, every `bars[i].stack` must remain a 3-element array (`[Video, Thread, Carousel]`). For `sentimentChart`, `arcs[]` percentages should sum to 100.
- 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.
- 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.
- Data narratives are consistent (platform cards, KPI row, and charts do not conflict).
- Tooltip avoids edge clipping in common viewport sizes.
- 3D/parallax and glow effects are subtle enough to avoid motion fatigue.

## Copy-And-Paste Prompt
```text
Use the Social media matrix tracker template human guide.

My goal:
[Describe the business outcome]

Audience:
[Describe who this is for]

Context and source material:
[Paste notes, examples, links, or existing copy]

Constraints:
[Tone, length, channel, timeline, must-include items, must-avoid items]

Before producing the final output, ask me for any missing information that would materially improve the result.
```

## Final Checklist
- [ ] The output matches the original goal.
- [ ] The audience and context are reflected in the answer.
- [ ] Important constraints and source material were preserved.
- [ ] The assistant made the relevant decisions explicit.
- [ ] The final artifact is ready to use, review, or hand to the next person.

## Source
This guide was generated from the nexu-io/open-design skill entry for `social-media-matrix-tracker-template`.

## Source Skill Notes
These notes preserve the nuance from the original skill. Use them as supporting reference when the workflow above feels too generic.

# 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
```

---

## Supporting file: references/checklist.md

# 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.