# Section 10 — Capstone Instructions

## Before You Paste Anything

1. Open a terminal.
2. `cd` into this `10-capstone/` folder (not the workspace root).
3. Run `claude`. Claude Code will pick up the `.claude/` settings, Skill, Subagent, and hook in this folder.

To verify you are in the right place, run `pwd` (or `Get-Location` on Windows). The path must end with `/10-capstone`.

## The Capstone Prompt

Paste this whole block into Claude Code in Plan Mode:

```text
Read CLAUDE.md, inputs/briefing-spec.md, and inputs/style-guide.md.
Skim inputs/datareportal-thailand-2026.csv.

Mission: produce outputs/briefing.html — a one-page Thailand 2026
digital landscape briefing for a Thai working professional, with
interactive D3 charts woven into the narrative.

Plan first. Show me the plan before writing any files. The plan
must name where each of the four required charts will sit in the
page flow.

Then run this pipeline:

1. Draft the briefing as Thai-language Markdown at
   outputs/briefing-draft.md, following briefing-spec.md. Include
   one short caption per chart so the writing and visuals stay in
   sync.
2. Use the research-evidence-reviewer subagent to review
   outputs/briefing-draft.md.
   - Domain: Other.
   - Domain rule: every numeric claim AND every chart data point
     must trace to a specific row in
     inputs/datareportal-thailand-2026.csv. Advertising reach is
     not equivalent to monthly active users. Flag any unusually
     large reported change (e.g. Reddit) as needing caution.
   - Save its report to outputs/reviewed-claims.md.
3. Update outputs/briefing-draft.md to drop or rewrite any claim
   the subagent could not confirm.
4. Use the frontend-design Skill to render outputs/briefing.html
   from the reviewed draft. One self-contained file.
   - Allowed CDNs only: Tailwind and D3 v7. Follow
     inputs/style-guide.md including the Chart Aesthetic section.
   - Build the four required D3 visualizations from
     briefing-spec.md: reach lollipop, YoY divergence, strategic
     bubble map, basis treemap.
   - Color-code charts by BASIS TYPE (MAU / ad reach / ad reach
     18+ / registered members), not by platform.
   - Off-scale outliers (Reddit +458%) must be broken out into a
     dashed callout, never allowed to inflate a chart's axis.
   - Charts animate on scroll-into-view and show hover tooltips.
5. Read outputs/briefing.html top to bottom yourself, open the
   page mentally at phone width, and tell me anything (copy,
   chart, layout) that should be tightened before I open it.

The PostToolUse hook stamps outputs/run-log.md automatically — do
not write to it yourself.
```

## If It Goes Wrong

| Symptom | Paste this fix |
| --- | --- |
| HTML looks generic (Inter everywhere, purple gradient) | `The HTML still looks generic. Re-invoke the frontend-design Skill and pick a single intentional aesthetic from style-guide.md. Rewrite outputs/briefing.html.` |
| Charts use default D3 rainbow colors | `The charts use default D3 categorical colors. Re-render outputs/briefing.html so charts use the page's own palette (oxblood / gilt / ink shades) and color-code by basis type, not by platform.` |
| Reddit +458% squashed every other bar | `Reddit's +458% YoY is inflating the chart scales. Re-render outputs/briefing.html with Reddit excluded from the main YoY and bubble charts and shown as a dashed off-chart callout instead.` |
| Charts don't appear or don't animate | `The D3 charts are not rendering. Open outputs/briefing.html, check the D3 script tag and IntersectionObserver wiring, and fix so all four required charts draw and animate on scroll.` |
| Numbers don't match the CSV | `Run the research-evidence-reviewer subagent again on outputs/briefing.html. List every numeric claim and chart data point it cannot confirm from the CSV. Remove or correct those.` |
| Hook didn't stamp `run-log.md` | Make sure you ran `claude` from inside `10-capstone/`, not from the workspace root. Then ask Claude to write one small file under `outputs/` to confirm the hook fires. |

## How To Verify

1. Open `outputs/briefing.html` in a browser by double-clicking it.
2. Scroll through and confirm all four D3 charts render, animate on entry, and respond to hover.
3. Resize the window to phone-width (~390px) — charts should scale, not clip.
4. Open `outputs/reviewed-claims.md` and check every flagged claim was either removed from the draft or rewritten with a CSV citation.
5. Open `outputs/run-log.md` and check at least three timestamped lines are present.
