# Task 15 — Full guide

**Agent**: `page-migrator` · **Model**: **Codex** — hardest task in the plan
**Depends on**: 05, 10, 13 · **Parallel with**: 16 **Worktree**:
`.agents/scripts/worktree.sh start 15 page-full-guide`

## Goal

`/full-guide/` → Astro. 22 KB of HTML, a 50 KB script, 30 KB of CSS, twelve
render functions, bilingual throughout.

## What `app.js` actually is

Not application code — a **bilingual content database** (task 05 already moved
it) plus ~12 `render*` functions that swap `innerHTML` on tab clicks. Once
content is a collection, the remaining JS is small: tab state and a language
toggle.

## Islands

Only these hydrate. Everything else is server-rendered.

| Island                                                   | Directive        | Why                                                |
| -------------------------------------------------------- | ---------------- | -------------------------------------------------- |
| Phase tabs                                               | `client:visible` | click-driven panel swap                            |
| Tree / worker / route / model / effort / skill selectors | `client:visible` | same pattern; consider one generic selector island |
| Language toggle                                          | `client:idle`    | page-wide, not urgent                              |
| Copy-prompt buttons                                      | `client:visible` | clipboard                                          |

If you end up with 12 separate islands you have missed the pattern — they are
one selector component with different data.

## Asserted by verify.mjs — all must survive

`const phases`, `const handsOnPrompts`, `const modelGuide`,
`const skillSources`, `const skillInstallPrompts`, `render('plan')`,
`renderTree`, `renderWorker`, `renderRoute`, `renderModelProvider`,
`renderEffort`, `renderSkillFile`, `renderSkillWorkflow`, `renderCommonSkill`,
`renderHandsOn`, `copyPrompt`.

These are **implementation-detail assertions** — they look deletable and are
not. Each pins a feature. Coordinate with task 19 to replace each with an
output-level assertion of the same behaviour. **Never delete one yourself.**

Also: `data-copy-target="prompt-install-skills|prompt-basic|prompt-skills"`,
`hands-on/starter/`, `additional-reading.md`, `role="tablist"`, `<table>`.

## Watch for

- `copyPrompt` uses `navigator.clipboard` with a `document.execCommand`
  fallback. Keep both — the fallback exists for non-secure contexts.
- The hands-on prompt strings are copy-pasted by attendees into an agent. Exact
  whitespace and line breaks matter.
- `responsive.css` (30 KB) mostly serves this page. Port what is needed, prove
  the rest dead, delete it. Screenshots are the proof.

## Done when

- [ ] Snapshot diff empty
- [ ] Every interaction works: all tabs, both languages, all copy buttons
- [ ] Keyboard: arrow keys move between tabs; focus visible throughout
- [ ] JS payload **smaller** than today's 50 KB (content is now static)
- [ ] Screenshots match at four widths; checklist complete; `pnpm run gate`
      green