What version of Drupal is required for this skill?

This skill is specifically optimized for Drupal 11.3 and later, as these versions include native HTMX support and the Htmx class in core.

Is HTMX better for SEO than traditional AJAX in Drupal?

HTMX encourages progressive enhancement and better URL history management (via pushUrl), which generally leads to better search engine visibility and user experience compared to opaque AJAX calls.

Can I use HTMX and AJAX together in the same Drupal project?

Yes, both systems can coexist. This skill helps you manage a hybrid environment while providing a path for incremental migration of legacy AJAX code to HTMX.

Does this skill help with Drupal Form API (FAPI) validation?

Absolutely. It provides specific patterns for real-time validation and dependent dropdowns using buildForm logic and HTMX triggers.

How does this skill handle multiple page updates in one request?

It provides guidance on using Out-of-Band (OOB) swaps, allowing you to update multiple separate DOM elements within a single HTMX response.

Drupal HTMX Development

Name: Drupal HTMX Development
Author: camoa

bycamoa

•

コンテンツ管理

Implements modern HTMX interactions and migrates legacy AJAX workflows within Drupal 11.3+ environments.

This skill provides expert guidance for integrating HTMX into Drupal 11.3 and later, offering a declarative alternative to traditional AJAX for building dynamic user interfaces. It assists developers in implementing common patterns like dependent dropdowns, infinite scrolling, real-time validation, and multi-step wizards using the native Drupal Htmx class API. By streamlining the transition from AJAX responses to render arrays and providing robust pattern selection, it ensures high-performance, progressively enhanced web applications that remain maintainable and accessible.

主な機能

0117 GitHub stars

02Automated migration paths from Drupal AJAX to HTMX patterns

03Best practices for progressive enhancement and ARIA accessibility in dynamic UI components

04Guidance on using the Drupal Core Htmx class and request detection traits

05Specialized support for Drupal Form API (FAPI) with HTMX integration

06Implementation of complex behaviors like Out-of-Band (OOB) swaps and URL history management

ユースケース

01Implementing infinite scroll or 'load more' functionality for Drupal listings and views

02Migrating a legacy Drupal module's AJAX callbacks to modern HTMX patterns

03Building a real-time, multi-step form wizard with bookmarkable states and URL history

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add camoa/claude-skills htmx-development

For use in Claude.ai and ChatGPT

Download Skill