Can I use HTMX headers to trigger client-side events?

Yes, the skill includes documentation and implementation patterns for using HX-Trigger, HX-Redirect, and HX-Refresh headers to control the browser from your Django views.

How does it handle form validation errors?

It provides logic to catch validation failures and return only the form partial with error messages, allowing for seamless inline feedback without a page refresh.

How are templates organized using these patterns?

The skill promotes a clean architecture where full pages extend a base layout and include underscore-prefixed partials (_partial.html) which can be returned independently during HTMX requests.

Does this skill support the django-htmx library?

Yes, it specifically includes patterns for detecting HTMX requests using the request.htmx attribute provided by the django-htmx middleware.

What is the primary benefit of using this HTMX skill?

It helps developers move logic back to the server by using Django to render HTML fragments, significantly reducing the need for complex client-side JavaScript frameworks.

Django HTMX Patterns

Name: Django HTMX Patterns
Author: Travis-Gilbert

byTravis-Gilbert

0•

デザインツール

Implements best-practice HTMX integration for Django applications, focusing on partial templates and progressive enhancement.

This skill provides Claude with specialized knowledge to build interactive Django web applications using HTMX patterns. It focuses on the server-side rendering of HTML fragments rather than JSON, enabling developers to create dynamic user interfaces with minimal JavaScript complexity. By standardizing template organization with the underscore-prefix partial convention, formalizing validation workflows, and utilizing HTMX-specific response headers like HX-Trigger, this skill ensures consistent, accessible, and performant web interactions that maintain full progressive enhancement.

主な機能

01Robust form handling with asynchronous validation and error rendering

02Advanced client-side control via HTMX response headers

030 GitHub stars

04UX best practices including loading indicators and double-submission prevention

05Partial template organization using underscore-prefixed HTML fragments

06Request detection logic using django-htmx middleware patterns

ユースケース

01Creating dynamic dashboards that update specific page segments via server-sent HTML

02Implementing seamless form submissions without full page reloads

03Building reactive UI components like live search or infinite scroll within Django

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add travis-gilbert/apply.thelandbank.org htmx-patterns

For use in Claude.ai and ChatGPT

主な機能

01Robust form handling with asynchronous validation and error rendering

02Advanced client-side control via HTMX response headers

030 GitHub stars

04UX best practices including loading indicators and double-submission prevention

05Partial template organization using underscore-prefixed HTML fragments

06Request detection logic using django-htmx middleware patterns

ユースケース

01Creating dynamic dashboards that update specific page segments via server-sent HTML

02Implementing seamless form submissions without full page reloads

03Building reactive UI components like live search or infinite scroll within Django

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add travis-gilbert/apply.thelandbank.org htmx-patterns

For use in Claude.ai and ChatGPT