Worksheet view

Worksheet View — render the Navigator as web pages

Produce a one-way, read-only visual of the team's Market Opportunity Navigator in the exact visual language of the Where-to-Play web app — using the real app's HTML, CSS, fonts and images. This is presentation, not editing: it shows what the team has already written in their worksheets — it never changes the worksheets, scores anything, or invents content. Human-in-the-loop is preserved: the .md files stay the single source of truth.

The output is a small folder (where-to-play/navigator/) of four cross-linked pages plus a shared css/ fonts/ assets/. The pages open by double-click — no server, no network. (They are relative-path linked, so keep the folder together.)

Two stages (this is the whole design)

where-to-play/*.md  ──①──▶  wtp-data.json  ──②──▶  navigator/ (overview, ws1, ws2, ws3)
                    YOU, with judgment        render.py, deterministic

• ① Compaction is YOUR job (needs reading + judgment): read the worksheets and emit a compact wtp-data.json that fits the fixed slots.
• ② Rendering is render.py's job (deterministic): it maps that JSON to the real app's markup — text into slots, scores into the exact CSS classes. You never hand-write HTML.

What it reads

From the project's where-to-play/ folder (tolerate missing files — that tab renders empty):

• 01_opportunity-set.md — Worksheet 1 (abilities + the screened opportunity set)
• 02_attractiveness-map/*.md — Worksheet 2, one file per opportunity (the 6-factor scoring)
• 02_map-overview.md — Worksheet 2 placements (each opportunity's zone/bands on the map)
• 03_agile-focus.md — Worksheet 3 (Primary, candidates, relatedness, investment, dartboard)

Procedure

1. Read the worksheets. Load every file above that exists. Read them in full; do not guess at content that is not written down.

2. Compact faithfully into wtp-data.json. Build one JSON object that matches renderer/schema.md exactly — every field and only the allowed enum values. The worksheet layout has fixed slots (≤8 ability columns, ≤50-char customer segments, 4-segment factor scales, the dartboard rings, etc.), so shorten the team's prose to fit using their own words and meaning — never rewrite intent, never add claims. Map qualitative scores to the enums (Low/Mid/High/Super High, band names, pursueNow/keepOpen/placeInStorage, …). If a field is blank in the .md, omit it — the slot renders empty. Write the object to where-to-play/wtp-data.json.

3. Render. Run the deterministic renderer (this system uses uv):

   uv run --with jinja2 python <skill-dir>/renderer/render.py where-to-play/wtp-data.json where-to-play/navigator
   

   This writes where-to-play/navigator/{overview,ws1,ws2,ws3}.html and copies in the shared css/ fonts/ assets/. Change nothing in renderer/ — the templates already carry the real app's exact markup, classes, and the band/score→class logic.

4. Tell the user to open where-to-play/navigator/overview.html (double-click) and that the nav tabs switch between Overview / Worksheet 1 / Worksheet 2 / Worksheet 3.

What this view deliberately is not

The web app also lets you log in, edit fields, autosave, share, comment, download a PDF, and chat with a GPT bubble. None of that is built here — this is a static mirror of the .md files. The header chrome and GPT bubble are intentionally removed; the only interactivity is the tab nav (and a small WS2 dropdown to switch between scored opportunities). Inline editing + write-back is a plausible v2, intentionally not part of this skill — keeping the worksheets editable keeps the team in the loop.

Boundaries

• Never fabricate. Render only what the worksheets contain — no invented scores, zones, abilities, or opportunities.
• Empty stays empty. Unfilled fields are omitted from the JSON and render as the app's faint placeholders, not as guesses or "TBD".
• Compaction ≠ authorship. Shorten to fit the layout; preserve the team's wording and meaning.
• Enums only. Use exactly the values in renderer/schema.md. For a half-step (e.g. "Low–Mid"), snap the factor to the nearer segment; the overall* bands have finer steps (lowmid, midhigh).
• No write-back. This skill writes only where-to-play/wtp-data.json and the where-to-play/navigator/ folder. It never edits the worksheet .md files.

Additional resources

• renderer/schema.md — the precise wtp-data.json schema (every field, all enum values) and the stage-② enum→markup mapping.
• renderer/wtp-data.example.json — a complete worked example (the wireless-PdM venture) to copy the shape from.
• renderer/render.py + renderer/templates/ + renderer/static/ — the deterministic renderer (real app HTML/CSS/fonts/images). Do not modify when running the skill.
• A complete filled navigator to model the compaction on: ../where-to-play/references/examples/inergio-full-navigator.md.