--- name: writing-web description: Simple web development with HTML, CSS, JS, and HTMX. Use when writing or reviewing web templates, stylesheets, or scripts. user-invocable: false context: fork agent: web-engineer allowed-tools: - Read - Bash - Grep - Glob --- # Web Development (Simple, Modern) ## Philosophy 1. **HTML first** - Semantic markup does the work 2. **CSS second** - Styling and layout 3. **HTMX third** - Server-driven interactivity 4. **JS last** - Only when nothing else works ## Patterns ### Semantic HTML ```html

Title

Content
``` **Use native elements:** - ` ``` ### Minimal JS ```javascript // Only when HTML/CSS/HTMX can't do it document.body.addEventListener("click", (e) => { if (e.target.matches("[data-copy]")) { navigator.clipboard.writeText(e.target.dataset.copy); } }); ``` ## Avoid - JS for things HTML can do (accordions, modals) - CSS for things HTML can do (form validation) - Fetch when HTMX works - Deep selector nesting - Wrapper div soup