[domain name]

# Implement Subagent Instructions (Opus) You will receive a domain and site directory from the orchestrator. Implement ONLY that site. --- ## Your Task Create complete HTML/CSS/JS for the given domain based on its DESIGN.md in the given site directory. --- ## Rules (MUST FOLLOW) 1. **NO cat/HEREDOC** - Use ONLY Write tool for files 2. **Direct Execution** - Run `tools/script.sh`, NOT `bash tools/script.sh` (scripts have shebangs) 3. **NO mkdir** - Directory already exists 4. **NO ad-hoc scripts** - Do NOT write or execute custom shell/Python scripts. Use ONLY existing scripts in `tools/` 5. **NO placeholders** - Write complete, working code 6. **NO reports** - Just do the work, don't summarize 7. **Relative paths only** - Use `tools/...`, `sites/...`. **NEVER use `cd` or absolute paths.** 8. **NO console errors** - Code must run without errors 9. **NO /tmp** - Use `${TMP}` from `.wdmaker/config.toml` for temp files 10. **Preserve reports** - Do NOT delete files in `.smbatcher/`, `${TMP}/` 11. **Ignore accessibility/performance** - Skip ARIA, focus styles, lazy loading, minification 12. **Maximum effort** - Ignore token budget, prioritize quality over efficiency --- ## Steps ### Step 1: Mark Implement Start ```bash tools/implement/start.sh --root . ``` **Execute only this script in this step. Never try other method to mark.** ### Step 2: Read Design ```bash tools/design/read-design.sh /DESIGN.md --summary ``` **Execute only this script in this step. Never try other method to read.** Use `--summary` for overview, or no flag for full content. Extract: - Color palette (hex values) - Typography (font names) - Layout structure - Imagery/motifs - Implementation prompts - Uniqueness notes ### Step 3: Write index.html At first, read `/index.html` with **Read tool**. Next, use only **Write tool** or filesystem MCP to create `/index.html`: ```html [domain name] ``` Requirements: - Match DESIGN.md layout structure - Use consistent IDs/classes (will reference in CSS/JS) - Include all sections from design - Reference fonts via Google Fonts or local - Link to styles.css and script.js ### Step 4: Write styles.css At first, read `/styles.css` with **Read tool**. Next, use only **Write tool** or filesystem MCP to create `/styles.css`: Requirements: - Use EXACT hex colors from DESIGN.md - Use EXACT fonts from DESIGN.md - **Exception:** If a font is NOT available on Google Fonts (e.g., Mija, Relative), SUBSTITUTE it with a similar Google Font (e.g., Inter, Roboto, Lora, Poppins) without asking. - Implement layout motifs - Add animations/transitions as specified - Match IDs/classes from index.html - Full-screen/immersive layouts preferred - NO accessibility styles (skip focus, ARIA styling) ### Step 5: Write script.js At first, read `/script.js` with **Read tool**. Next, use only **Write tool** or filesystem MCP to create `/script.js`: Requirements: - Implement interactions from DESIGN.md prompts - Smooth animations (requestAnimationFrame, CSS transitions) - Match IDs/classes from index.html - NO console.log statements in production code - NO errors - test all selectors exist - Event listeners for specified interactions ### Step 6: Create Assets (if needed) If design requires SVG icons, images, or other assets: - Create `/assets/` files only via Write tool or filesystem MCP - Use inline SVG when possible - Reference from index.html ### Step 7: Verify Outputs ```bash tools/implement/check-outputs.sh ``` **Execute only this script in this step. Never try other method to verify.** Must show all files present. ### Step 8: Verify Site Structure ```bash tools/check/verify-site.sh ``` **Execute only this script in this step. Never try other method to verify.** Must pass HTML and JS checks. ### Step 9: Check Design Compliance ```bash tools/check/design-compliance.sh ``` **Execute only this script in this step. Never try other method to verify.** Colors and fonts should match DESIGN.md. ### Step 10: Mark Complete ```bash tools/implement/complete.sh --root . ``` **Execute only this script in this step. Never try other method to mark.** --- ## Output Files | File | Description | |------|-------------| | `/index.html` | Main HTML page | | `/styles.css` | All CSS styles | | `/script.js` | All JavaScript | | `/assets/*` | Images, SVGs (optional) | --- ## Quality Checklist Before marking complete: - [ ] All sections from DESIGN.md implemented - [ ] Colors match DESIGN.md hex values - [ ] Fonts match DESIGN.md specifications - [ ] No console errors - [ ] check-outputs.sh passes - [ ] verify-site.sh passes - [ ] design-compliance.sh shows no failures --- ## DO NOT - Implement multiple sites - Create directories (except `assets/` in Step 6) - Use HEREDOC/cat for files - Leave placeholder content - Skip any required file - Report results back (just complete the work) - Add accessibility features (ARIA, focus styles) - Add performance optimizations (lazy loading, minification) --- ## Scripts Reference | Script | Purpose | |--------|---------| | `tools/implement/start.sh --root .` | Mark implement start (→i status) | | `tools/implement/complete.sh --root .` | Mark implement complete (→I status) | | `tools/implement/check-outputs.sh ` | Verify HTML/CSS/JS files exist | | `tools/check/verify-site.sh ` | Comprehensive site verification | | `tools/check/design-compliance.sh ` | Check colors/fonts match DESIGN.md | | `tools/check/html-check.sh ` | Validate HTML structure | | `tools/check/js-syntax.sh ` | Check JavaScript syntax | | `tools/design/read-design.sh ` | Read design specifications |