skills.rest
asarchami
asarchamiCOMMUNITY
Explore all skills by this author →
GitHub

htmx-spa-conventions

Enforces server-driven HTMX and Alpine.js conventions for HTML-over-the-wire web interfaces.

1|2|Updated Nov 25, 2017
Search Tags:#tailwind css#htmx#progressive enhancement#server-side rendering#alpine.js#html-over-the-wire#partial fragments
One-click install
npx skills add https://github.com/asarchami/dotfiles --skill htmx-spa-conventions-asarchami
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: htmx-spa-conventions
Source: https://github.com/asarchami/dotfiles/tree/main/dot_config/opencode/skills/ui_skills/htmx-spa-conventions
Command: npx skills add https://github.com/asarchami/dotfiles --skill htmx-spa-conventions-asarchami

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Teams building dynamic web UIs often drift into SPA-style patterns—JSON APIs, client-side DOM rebuilding, and heavy JavaScript—that undermine the simplicity of HTMX. This Skill enforces consistent server-driven rendering, correct hx-swap usage, and secure request handling across all frontend work. ## Core Features & Use Cases - Architecture Enforcement: Mandates HTML fragments for HTMX requests, HX-Request header detection, and full layouts for direct browser visits. - Styling & Accessibility Standards: Requires Tailwind CSS utility classes, semantic HTML tags, mobile-first responsive layouts, and visible focus states. - Security & Correctness Rules: Enforces CSRF protection on mutating requests, correct HTTP status codes, hx-push-url history handling, and OOB swaps for multi-target updates. - Use Case: When adding a new settings page to an HTMX app, the Skill ensures the server returns a partial fragment for hx-get navigation, uses hx-push-url for history, and avoids any client-side DOM reconstruction. ## Quick Start Ask the AI to build a new HTMX page fragment with Tailwind styling and proper hx-swap behavior following the project conventions.

Frequently Asked Questions about htmx-spa-conventions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I return partial HTML fragments for HTMX requests?▼

Detect the HX-Request header on the server and return only the partial HTML fragment instead of the full page layout. Direct browser visits without the header receive the complete layout, keeping one endpoint for both cases.

What is the correct hx-swap strategy for HTMX updates?▼

Choose hx-swap based on the update type: innerHTML for replacing content, outerHTML for replacing the element itself, and beforeend for appending items. Use hx-swap-oob for updating multiple targets from a single response.

Should HTMX endpoints return JSON or HTML?▼

HTMX endpoints should return HTML fragments, never JSON. The server drives all rendering; returning JSON and rebuilding the DOM with client-side JavaScript is an anti-pattern that mimics SPA architecture.

How do I preserve browser history with HTMX navigation?▼

Use hx-push-url to add new history entries when swapping main content, and hx-replace-url when the URL should update without a new entry. This keeps back-button behavior and deep linking working correctly.

When should I avoid polling in HTMX applications?▼

Avoid unnecessary polling for real-time updates; prefer Server-Sent Events or WebSockets instead. Polling creates redundant server load and latency compared to push-based mechanisms for live data.

Related Skills

Explore More Software Engineering Skills→
organvm-i-theoriaorganvm-i-theoria

htmx-interaction-patterns

Build dynamic web interfaces with htmx using server-rendered HTML fragments and attribute-driven requests.

Official
Intermediate
ChwistopheChwistophe

rails-37-style-backend-caching

Implement HTTP and fragment caching patterns in Rails applications.

Community
Intermediate
chriswesttchriswestt

browse

Navigate and interact with web pages using a headless browser to verify UI state and behavior.

Community
Advanced
cofincofin
15

inertia

Bridge server-side routing with client-side rendering using Inertia.js.

Community
Intermediate