htmx-universal-patterns
Installation
SKILL.md
HTMX Universal Standards
Core Philosophy (HATEOAS)
- HTML over JSON: The server MUST respond with HTML fragments (partials), not JSON.
- Side Effects via HTML: Do not use client-side logic to update the DOM. Let the server response dictate changes via
hx-swap.
Security & CSRF (Critical)
- CSRF Protection: HTMX requests are non-idempotent (POST/PUT/DELETE) and require CSRF protection just like standard forms.
- Header Method: Configure the global
hx-headersto include the token:<body hx-headers='{"X-CSRF-Token": "{{ csrfToken }}"}'>. - Form Method: If headers aren't viable, ensure every
<form>includes the hidden CSRF input.
- Header Method: Configure the global
- XSS Prevention: Since we are injecting HTML, ensure all user content rendered on the server is strictly escaped before reaching the client.
Architectural Rules
- The "Partial" Rule: Identify strictly which part of the UI needs updating. Create a server route that renders only that component.
- Idempotency: GET requests should never change state. Use POST/PUT/PATCH/DELETE for actions.
- Progressive Enhancement: Design the feature to work with standard HTML forms/links first where possible.
Related skills