htmx-patterns — htmx-patterns setup for Django developers htmx-patterns, apply.thelandbank.org, community, htmx-patterns setup for Django developers, ide skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Web Development Agents needing dynamic HTML fragment rendering and progressive enhancement with Django. htmx-patterns is a set of techniques for using HTMX with Django, emphasizing server-rendered HTML fragments, partial templates, and minimal client-side complexity.

Features

Server renders HTML fragments, not JSON, for efficient data transfer
Utilizes partial templates (_partial.html) for HTMX responses
Employs progressive enhancement for pages that work without JavaScript
Leverages django-htmx middleware for HTMX detection in views
Uses request.htmx for conditional rendering of templates

# Core Topics

htmx-patterns setup for Django developers
Travis-Gilbert Travis-Gilbert
[0]
[0]
Updated: 3/4/2026

Agent Capability Analysis

The htmx-patterns skill by Travis-Gilbert is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for htmx-patterns setup for Django developers.

Ideal Agent Persona

Perfect for Web Development Agents needing dynamic HTML fragment rendering and progressive enhancement with Django.

Core Value

Empowers agents to integrate HTMX with Django, enabling server-rendered HTML fragments and progressive enhancement using partial templates and minimal client-side complexity, leveraging `django-htmx` middleware and `request.htmx` detection.

↓ Capabilities Granted for htmx-patterns

Rendering dynamic HTML fragments for web applications
Implementing progressive enhancement for improved user experience
Detecting HTMX requests in Django views using `request.htmx`

! Prerequisites & Limits

  • Requires Django framework
  • Needs `django-htmx` middleware installation
  • Limited to server-side rendering with HTMX
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

htmx-patterns

Install htmx-patterns, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

HTMX Patterns for Django

Core Philosophy

  • Server renders HTML fragments, not JSON
  • Partial templates (_partial.html) for HTMX responses
  • Progressive enhancement — pages work without JS, HTMX enhances UX
  • Minimal client-side complexity — let the server do the heavy lifting

HTMX Detection in Views

With django-htmx middleware installed, use request.htmx:

python
1def my_view(request):
2    context = {...}
3    if request.htmx:
4        return render(request, "app/_partial.html", context)
5    return render(request, "app/full_page.html", context)

Form Handling Pattern

python
1def create_view(request):
2    if request.method == "POST":
3        form = MyForm(request.POST)
4        if form.is_valid():
5            obj = form.save()
6            if request.htmx:
7                return render(request, "app/_item.html", {"item": obj})
8            return redirect("app:list")
9        # Return form WITH errors for HTMX
10        if request.htmx:
11            return render(request, "app/_form.html", {"form": form})
12    else:
13        form = MyForm()
14    return render(request, "app/create.html", {"form": form})

Template Organization

  • Partials: _partial.html (underscore prefix) — HTML fragments only
  • Full pages: page.html — extends base.html, includes partials
  • Each partial = one logical UI component

CSRF Configuration

Add to <body> tag in base template — all HTMX requests include it automatically:

html
1<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>

Response Headers

HeaderPurposeExample
HX-TriggerTrigger client-side eventsresponse["HX-Trigger"] = "applicationCreated"
HX-RedirectClient-side redirectresponse["HX-Redirect"] = reverse("app:detail", args=[obj.pk])
HX-RetargetOverride target from serverresponse["HX-Retarget"] = "#main"
HX-RefreshForce full page refreshresponse["HX-Refresh"] = "true"

UX Requirements

  • Always use hx-indicator for loading states
  • Always use hx-disabled-elt="this" to prevent double submissions
  • Always return form errors in partial templates on validation failure
  • Always provide feedback via Django messages or response content

Common Pitfalls

  • Missing loading indicators — users click multiple times
  • Returning full pages instead of partials for HTMX requests
  • Not handling form errors — only handling the success case
  • N+1 queries — HTMX views need select_related() / prefetch_related() too

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is htmx-patterns?

Perfect for Web Development Agents needing dynamic HTML fragment rendering and progressive enhancement with Django. htmx-patterns is a set of techniques for using HTMX with Django, emphasizing server-rendered HTML fragments, partial templates, and minimal client-side complexity.

How do I install htmx-patterns?

Run the command: npx killer-skills add Travis-Gilbert/apply.thelandbank.org/htmx-patterns. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for htmx-patterns?

Key use cases include: Rendering dynamic HTML fragments for web applications, Implementing progressive enhancement for improved user experience, Detecting HTMX requests in Django views using `request.htmx`.

Which IDEs are compatible with htmx-patterns?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for htmx-patterns?

Requires Django framework. Needs `django-htmx` middleware installation. Limited to server-side rendering with HTMX.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add Travis-Gilbert/apply.thelandbank.org/htmx-patterns. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use htmx-patterns immediately in the current project.

Related Skills

Looking for an alternative to htmx-patterns or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI