add split asteroids

CLAUDE.md

@@ -133,13 +133,26 @@ cat tasks/{type}/temp/{docId}.diff.json           # see what changed
 # Read screenshot PNGs from tasks/{type}/temp/{docId}-page-{N}.png to verify visually
 ```
 
-## Index Page
+## Preview Pages Structure
 
-`tasks/index.html` — Claude updates manually when creating new documents. Each document has View and Edit links. Different task types can have different card styles.
+Three-level navigation hierarchy, maintained manually by Claude:
+
+```
+tasks/index.html                    — main index (all categories)
+  → tasks/{type}/index.html         — category page (all documents of this type)
+    → tasks/{type}/docs/{docId}.*   — individual document files
+```
+
+**Main index** (`tasks/index.html`) — lists all task types as cards. Each card links to the category page (`/tasks/{type}/`).
+
+**Category page** (`tasks/{type}/index.html`) — lists all documents within this type. Contains View/PDF/Editor links per document. Back link to main index. Has "editor mode" toggle for dev-only features.
+
+**When creating a new task type:** create both the main index card AND the category `index.html`.
+**When creating a new document:** add a doc-card to the category `index.html`.
 
 **Preview:** `http://localhost:3300/tasks/index.html`
 
-The `frontend-design` skill is installed but applies **only to `tasks/index.html`** and other UI/navigation pages. Worksheet documents (`*.template.html`) are print/PDF layouts, not web pages — web design principles do not apply to them.
+The `frontend-design` skill is installed but applies **only to `tasks/index.html`**, category pages, and other UI/navigation pages. Worksheet documents (`*.template.html`) are print/PDF layouts, not web pages — web design principles do not apply to them.
 
 ## Script Principles (Orchestrator Pattern)
 
@@ -187,6 +200,7 @@ Use `chrome-devtools-mcp` tools (`navigate_page`, `take_screenshot`) to check pa
 - Checking editor functionality (drag, keyboard, save)
 - Verifying hover/click states
 - Inspecting specific elements
+- **Verifying all links and navigation** after creating new task types or documents
 
 ### When to verify
 
@@ -196,6 +210,36 @@ Use `chrome-devtools-mcp` tools (`navigate_page`, `take_screenshot`) to check pa
 - **After modifying asset paths or server config** — check all types
 - **Do not ask the user to verify** what you can check yourself via screenshots
 
+### Post-creation link verification (MANDATORY)
+
+After creating a new task type or new document, use chrome-devtools MCP to verify the full navigation chain:
+
+1. Navigate to the main index (`/tasks/index.html`) — verify the new card renders and its link works
+2. Click through to the category page (`/tasks/{type}/`) — verify it loads and lists all documents
+3. Click through to each document link — verify View/Editor links work
+4. If any link is broken or page fails to load — fix the issue immediately and re-verify in Chrome that the fix works
+
+**Do not consider the task complete until all links are verified in the live browser.**
+
+### Editor end-to-end verification (MANDATORY)
+
+**After creating or modifying any editor**, verify the FULL save cycle in Chrome DevTools before telling the user it works:
+
+1. Open the editor in the browser (`editor.html?file=...`)
+2. Make a real change (click element, press keyboard shortcut)
+3. Click Save (or call save programmatically)
+4. **Wait for save to complete** (check server response)
+5. **Read the saved `data.json` file** — verify it contains the changed values (NOT defaults)
+6. **Run `generate.mjs`** and verify transforms appear in `output.html`
+7. **Reload the editor page** — verify saved state is restored from `data.json`
+
+If ANY step fails, the editor is broken — fix it before presenting to the user. Never tell the user "editor works" based on visual-only checks without verifying the saved data file.
+
+**Common editor pitfalls:**
+- Live-reload can reset editor state after save (fix: load data.json on init to restore)
+- ES module imports may not work with `window`-exported globals (fix: use `<script src>` not `import`)
+- Serializer must read actual modified state, not initial defaults
+
 ## HTML Generation Guidelines
 
 - **OUTPUT MUST BE STATIC HTML.** Template files must contain only static markup — no embedded `<script>` that computes, generates, or modifies content at runtime. Tailwind CDN `<script>` tag is the only exception.