--- agent: web-engineer allowed-tools: - Read - Bash - Grep - Glob context: fork description: Simple web development with HTML, CSS, JS, and HTMX. Auto-activates when working with .html, .css, or .htmx files, web templates, stylesheets, or vanilla JS scripts. NOT for React/Vue/Angular (use writing-typescript) or Node.js backends. name: writing-web user-invocable: false --- # Web Development (Simple, Modern) ## Critical Output Rules - Use semantic HTML elements before reaching for CSS or JS: ` ``` ### 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 ## Verify Generated Code After generating code, validate HTML and check behavior: ```bash npx html-validate . 2>&1 || true # or, with Bun: # bunx html-validate . 2>&1 || true ``` Verification plan must include: 1. Manual/browser check for the changed page or component. 2. Responsive check at mobile and desktop widths. 3. Playwright or equivalent browser test when behavior changed. 4. Screenshot or concise pass/fail notes for visual changes. ## Failure Cases - **html-validate reports errors**: fix semantic/attribute issues before considering the task done; do not suppress with `|| true` in CI. - **HTMX request not firing**: check `hx-trigger`, `hx-target` selector, and CSRF header presence before adding JS fallback.