Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

AngelDann/htmx-patterns

Name: htmx-patterns
Author: AngelDann

.cursor/skills/htmx-patterns/SKILL.md

npx skillsauth add AngelDann/app-comisions-dist htmx-patterns

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

HTMX Patterns for Django

Core Philosophy

Server renders HTML, not JSON - HTMX requests return HTML fragments, not data
Partial templates for dynamic updates - separate _partial.html files for HTMX responses
Progressive enhancement - pages work without JavaScript, HTMX enhances UX
Minimal client-side complexity - let the server do the heavy lifting

Critical Hints & Reminders

UX Best Practices

Always include loading indicators

Use hx-indicator to show loading states during requests
Users should never wonder if their action worked
Example: <button hx-get="/data/" hx-indicator="#spinner">Load</button>

Always provide user feedback

Use Django messages framework for success/error feedback
Return error messages in HTMX responses, not silent failures
Show what happened after an action completes

Handle errors gracefully

Return proper HTTP status codes (400 for validation errors, 500 for server errors)
Render form errors in partial templates
Don't swallow exceptions - log and show user-friendly messages

Django-Specific Patterns

Always detect HTMX requests

Check request.headers.get("HX-Request") to detect HTMX requests
Return partial templates for HTMX, full page templates otherwise
Pattern: if request.headers.get("HX-Request"): return render(request, "_partial.html", context)

Always return partials for HTMX

HTMX requests should return _partial.html templates, not full pages with base.html
Full page responses to HTMX requests break the UX and send duplicate HTML
Partials should be self-contained HTML fragments

Always validate request.method

Check request.method == "POST" before processing form data
Return proper status codes (405 Method Not Allowed for wrong methods)

CSRF is already configured globally

The base template has hx-headers on <body> - no need to add CSRF tokens to individual forms
All HTMX requests automatically include the CSRF token

Template Organization

Naming convention

Partials: _partial.html (underscore prefix)
Full pages: page.html (no prefix)
Example: posts/list.html (full page) includes posts/_list.html (partial)

Structure

Full page template extends base.html and includes partial
Partial contains only the dynamic HTML fragment
HTMX targets the partial's container div

Keep partials focused

Each partial should represent one logical UI component
Avoid partials that are too large or do too much
Compose larger UIs from multiple smaller partials

Django View Patterns

HTMX Detection

Check the HX-Request header to detect HTMX requests:

def my_view(request):
    context = {...}

    if request.headers.get("HX-Request"):
        return render(request, "app/_partial.html", context)

    return render(request, "app/full_page.html", context)

Form Handling Pattern

Key points:

Validate form normally
On success: return partial with new data OR trigger client-side event
On error: return partial with form errors
Always handle both HTMX and non-HTMX cases

def create_view(request):
    if request.method == "POST":
        form = MyForm(request.POST)
        if form.is_valid():
            obj = form.save()
            if request.headers.get("HX-Request"):
                return render(request, "app/_item.html", {"item": obj})
            return redirect("app:list")

        # Return form with errors
        if request.headers.get("HX-Request"):
            return render(request, "app/_form.html", {"form": form})
    else:
        form = MyForm()

    return render(request, "app/create.html", {"form": form})

Response Headers Reference

HTMX respects special response headers for client-side behavior:

HX-Trigger

Trigger client-side events after response

Use case: Update other parts of page after action
Example: response["HX-Trigger"] = "itemCreated"
Template listens: <div hx-get="/count/" hx-trigger="itemCreated from:body">

HX-Redirect

Client-side redirect

Use case: Redirect after successful action
Example: response["HX-Redirect"] = reverse("app:detail", args=[obj.pk])

HX-Retarget / HX-Reswap

Override hx-target and hx-swap from server

Use case: Different targets for success vs error
Success: response["HX-Retarget"] = "#main"
Error: Return partial without changing target (targets the form)

HX-Refresh

Force full page refresh

Use case: Major state change that affects whole page
Example: response["HX-Refresh"] = "true"

Common Pitfalls

Missing loading indicators: Always use hx-indicator - users click multiple times without feedback
Full pages in HTMX responses: Return _partial.html, not full pages with base.html - check HX-Request header
Not handling form errors: Always return the form with errors on validation failure, not just the success case
Not disabling buttons: Use hx-disabled-elt="this" to prevent duplicate submissions
N+1 queries: HTMX views need select_related()/prefetch_related() just like regular views

Integration with Other Skills

django-templates: Partial template organization and inheritance patterns
django-forms: HTMX form submission and validation
django-extensions: Use show_urls to verify HTMX endpoints
pytest-django-patterns: Testing HTMX endpoints and headers
systematic-debugging: Debug HTMX request/response issues

Source

Adapted from claude-code-django (.claude/skills/htmx-patterns).

AngelDann/htmx-patterns

.cursor/skills/htmx-patterns/SKILL.md

HTMX patterns for Django including partial templates, hx-* attributes, and dynamic UI without JavaScript. Use when building interactive UI, handling AJAX requests, or creating dynamic components.

development

Updated Apr 16, 2026

$ install --global

skillsauth

npx skillsauth add AngelDann/app-comisions-dist htmx-patterns

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 16, 2026, 11:47 PM239.9s1 file scanned

SKILL.md

name:: htmx-patterns
description:: HTMX patterns for Django including partial templates, hx-* attributes, and dynamic UI without JavaScript. Use when building interactive UI, handling AJAX requests, or creating dynamic components.

HTMX Patterns for Django

Core Philosophy

Server renders HTML, not JSON - HTMX requests return HTML fragments, not data
Partial templates for dynamic updates - separate _partial.html files for HTMX responses
Progressive enhancement - pages work without JavaScript, HTMX enhances UX
Minimal client-side complexity - let the server do the heavy lifting

Critical Hints & Reminders

UX Best Practices

Always include loading indicators

Use hx-indicator to show loading states during requests
Users should never wonder if their action worked
Example: <button hx-get="/data/" hx-indicator="#spinner">Load</button>

Always provide user feedback

Use Django messages framework for success/error feedback
Return error messages in HTMX responses, not silent failures
Show what happened after an action completes

Handle errors gracefully

Return proper HTTP status codes (400 for validation errors, 500 for server errors)
Render form errors in partial templates
Don't swallow exceptions - log and show user-friendly messages

Django-Specific Patterns

Always detect HTMX requests

Check request.headers.get("HX-Request") to detect HTMX requests
Return partial templates for HTMX, full page templates otherwise
Pattern: if request.headers.get("HX-Request"): return render(request, "_partial.html", context)

Always return partials for HTMX

HTMX requests should return _partial.html templates, not full pages with base.html
Full page responses to HTMX requests break the UX and send duplicate HTML
Partials should be self-contained HTML fragments

Always validate request.method

Check request.method == "POST" before processing form data
Return proper status codes (405 Method Not Allowed for wrong methods)

CSRF is already configured globally

The base template has hx-headers on <body> - no need to add CSRF tokens to individual forms
All HTMX requests automatically include the CSRF token

Template Organization

Naming convention

Partials: _partial.html (underscore prefix)
Full pages: page.html (no prefix)
Example: posts/list.html (full page) includes posts/_list.html (partial)

Structure

Full page template extends base.html and includes partial
Partial contains only the dynamic HTML fragment
HTMX targets the partial's container div

Keep partials focused

Each partial should represent one logical UI component
Avoid partials that are too large or do too much
Compose larger UIs from multiple smaller partials

Django View Patterns

HTMX Detection

Check the HX-Request header to detect HTMX requests:

def my_view(request):
    context = {...}

    if request.headers.get("HX-Request"):
        return render(request, "app/_partial.html", context)

    return render(request, "app/full_page.html", context)

Form Handling Pattern

Key points:

Validate form normally
On success: return partial with new data OR trigger client-side event
On error: return partial with form errors
Always handle both HTMX and non-HTMX cases

def create_view(request):
    if request.method == "POST":
        form = MyForm(request.POST)
        if form.is_valid():
            obj = form.save()
            if request.headers.get("HX-Request"):
                return render(request, "app/_item.html", {"item": obj})
            return redirect("app:list")

        # Return form with errors
        if request.headers.get("HX-Request"):
            return render(request, "app/_form.html", {"form": form})
    else:
        form = MyForm()

    return render(request, "app/create.html", {"form": form})

Response Headers Reference

HTMX respects special response headers for client-side behavior:

HX-Trigger

Trigger client-side events after response

Use case: Update other parts of page after action
Example: response["HX-Trigger"] = "itemCreated"
Template listens: <div hx-get="/count/" hx-trigger="itemCreated from:body">

HX-Redirect

Client-side redirect

Use case: Redirect after successful action
Example: response["HX-Redirect"] = reverse("app:detail", args=[obj.pk])

HX-Retarget / HX-Reswap

Override hx-target and hx-swap from server

Use case: Different targets for success vs error
Success: response["HX-Retarget"] = "#main"
Error: Return partial without changing target (targets the form)

HX-Refresh

Force full page refresh

Use case: Major state change that affects whole page
Example: response["HX-Refresh"] = "true"

Common Pitfalls

Missing loading indicators: Always use hx-indicator - users click multiple times without feedback
Full pages in HTMX responses: Return _partial.html, not full pages with base.html - check HX-Request header
Not handling form errors: Always return the form with errors on validation failure, not just the success case
Not disabling buttons: Use hx-disabled-elt="this" to prevent duplicate submissions
N+1 queries: HTMX views need select_related()/prefetch_related() just like regular views

Integration with Other Skills

django-templates: Partial template organization and inheritance patterns
django-forms: HTMX form submission and validation
django-extensions: Use show_urls to verify HTMX endpoints
pytest-django-patterns: Testing HTMX endpoints and headers
systematic-debugging: Debug HTMX request/response issues

Source

Adapted from claude-code-django (.claude/skills/htmx-patterns).

Related Skills

AngelDann/pytest-django-patterns

development

VerifiedTrustedCommunity

pytest-django testing patterns, Factory Boy, fixtures, and TDD workflow. Use when writing tests, creating test factories, or following TDD red-green-refactor cycle.

SKILL.mdUpdated Apr 16, 2026

AngelDann/pytest-django-patterns

AngelDann/frontend-design

development

VerifiedTrustedCommunity

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

SKILL.mdUpdated Apr 16, 2026

AngelDann/frontend-design

AngelDann/docs-sync

development

VerifiedTrustedCommunity

Check if documentation is in sync with code. Use when the user wants to verify that documentation matches current code, find outdated docs, or audit documentation accuracy. Triggers on requests like "check docs", "sync documentation", "are the docs up to date", "/docs-sync".

SKILL.mdUpdated Apr 16, 2026

AngelDann/django-templates

development

VerifiedTrustedCommunity

Django template patterns including inheritance, partials, tags, and filters. Use when working with templates, creating reusable components, or organizing template structure.

SKILL.mdUpdated Apr 16, 2026

AngelDann/django-templates

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/AngelDann/app-comisions-dist.git

# Copy into Claude Code skills folder (global)
cp -r app-comisions-dist/.cursor/skills/htmx-patterns ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

AngelDann/app-comisions-dist

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT