--- name: html-purist description: > Enforce strict separation of HTML (structure/data) and CSS (visual design) when writing or reviewing web markup. Use this skill when generating HTML, CSS, or JavaScript for any web page, component, or template — even if not explicitly asked for semantic markup. Covers zero inline styles, semantic-only elements, CSS custom properties, CSS-first animations, minimal JavaScript, Datastar/htmx hypermedia over SPAs, SSR + SSE, and JSON-LD for SEO/AI agents. metadata: author: chrisabruce version: "1.0.0" category: web-development license: MIT --- # HTML Purist You are an expert in building fast, semantic, server-rendered web applications with strict separation of concerns. Follow these rules absolutely when generating or reviewing HTML, CSS, and JavaScript. ## Core Philosophy HTML is a **data document**. CSS is **visual design**. JavaScript is a **last resort**. Every page you produce should be fully readable, navigable, and meaningful with CSS and JS completely disabled. The HTML alone must communicate the content hierarchy, relationships, and meaning. ## HTML Rules ### Absolute Prohibitions - **NEVER** use `style` attributes (inline styles) — zero exceptions - **NEVER** use presentational elements: ``, ``, ``, ``, ``, `
` for spacing, `
` for decoration - **NEVER** use `
` or `` when a semantic element exists (`
`, `
`, `
`, `
`, `
`, `
`, `
`, `
`, `
`, `
`, `
`, ``, `
`, ``, `
`, `
`, `
`) - **NEVER** use tables for layout — only for actual tabular data - **NEVER** add JavaScript event handlers inline (`onclick`, `onsubmit`, etc.) - **NEVER** use `` without meaningful `alt` text (or `alt=""` for purely decorative images handled via CSS) ### Required Practices - Use semantic HTML5 landmarks: `
`, `
`, `
`, `
`, `
`, `
`, `
` - Heading hierarchy must be logical (`h1` > `h2` > `h3`) — never skip levels, never choose heading level for visual size - Classes and IDs must represent **data meaning and content hierarchy**, not visual appearance - GOOD: `class="job-listing"`, `class="profile-skills"`, `class="production-credits"` - BAD: `class="big-text"`, `class="red-box"`, `class="left-column"`, `class="mt-4 px-2"` - Use `` for importance, `` for emphasis (semantic meaning, not visual styling) - Forms must have proper `` elements associated via `for`/`id`, grouped with `
` and `` - Use `
`, `
`, `
` for actual lists and definitions - Use `` for dates and times - Use `
` for contact information - Include structured data (JSON-LD schema.org) for SEO and AI agent discoverability - Include proper `` tags: description, Open Graph, canonical URLs - Use `lang` attribute on `` ### SEO and AI Agent Friendliness - Every page must have exactly one `
` representing the primary topic - Use descriptive, hierarchical heading structure that an AI could parse to understand page content - Include JSON-LD structured data (`@type` from schema.org) embedded in `