feat(blocks): extract six full-guide block components

PhasePanel, FleetDiagram, HandoffTable, WorktreeMap, RouteTable,
SkillPackage as static shells. Each takes typed props and renders
server-side markup with the data-* hooks verified by scripts/verify.mjs
(data-phase, data-tree, data-worker, data-route, data-skill-file). No
client:* directives; interactive islands wire up in task 15.

Tokens only. No raw hex or px font sizes (check-tokens passes). The
parent-background seam colour for the gap:1px grid trick in
FleetDiagram is a documented token gap; see component header comment
and the task final report.

src/components/blocks/SkillPackage.astro

@@ -0,0 +1,90 @@
+---
+// SkillPackage — the four-file skill-package picker (SKILL.md, references/,
+// scripts/, assets/). Buttons carry the `data-skill-file` hook asserted by
+// `scripts/verify.mjs`.
+//
+// Static shell: the initial file is marked active and selected. The block is
+// paired with a `<article>` detail panel by the parent page; this component
+// renders only the picker.
+
+interface PackageFile {
+  id: 'skill' | 'references' | 'scripts' | 'assets' | string;
+  /** Path rendered inside `<code>`, e.g. "SKILL.md". */
+  path: string;
+  /** Helper copy under the path. */
+  small: string;
+}
+
+interface Props {
+  files: PackageFile[];
+  initial?: string;
+}
+
+const { files, initial = files[0]?.id ?? 'skill' } = Astro.props;
+---
+
+<div class="skill-package" role="tree" aria-label="Skill package files">
+  <span class="skill-package-label">SKILL PACKAGE</span>
+  {
+    files.map((file) => (
+      <button
+        class:list={['skill-package-row', { active: file.id === initial }]}
+        data-skill-file={file.id}
+        role="treeitem"
+        aria-selected={file.id === initial}
+      >
+        <code>{file.path}</code>
+        <small>{file.small}</small>
+      </button>
+    ))
+  }
+</div>
+
+<style>
+  .skill-package {
+    display: grid;
+    align-content: start;
+    color: var(--paper);
+    background: var(--blue);
+  }
+
+  .skill-package-label {
+    padding: 20px;
+    color: var(--gold);
+    border-bottom: 1px solid var(--line);
+    font:
+      500 var(--step-0) 'DM Mono',
+      monospace;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  .skill-package-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+    padding: 17px 20px;
+    border: 0;
+    border-bottom: 1px solid var(--line);
+    color: var(--paper);
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+  }
+  .skill-package-row code {
+    font:
+      500 12px 'DM Mono',
+      monospace;
+  }
+  .skill-package-row small {
+    opacity: 0.7;
+  }
+  .skill-package-row.active {
+    /* House style: left bar via inset box-shadow, not a border. */
+    box-shadow: inset 4px 0 0 var(--gold);
+  }
+  .skill-package-row:focus-visible {
+    outline: 3px solid var(--gold);
+    outline-offset: -3px;
+  }
+</style>