Does this skill help with accessibility?

Yes, it includes specific patterns for focus management, ARIA live regions, and keyboard navigation to ensure that dynamic content updates are accessible to screen reader users.

Can I use these patterns with any backend?

While the skill highlights patterns for Rust (Axum + Askama), the core principles of returning HTML fragments and managing client state are applicable to any backend language including Go, Python, or Node.js.

Why avoid raw JavaScript fetch() calls?

HTMX handles edge cases, loading states, and DOM swapping automatically through declarative attributes, reducing the boilerplate and potential bugs associated with manual fetch() and DOM manipulation.

When should I use HTMX versus Alpine.js?

Use HTMX for any operation that needs server data, such as form submissions or updating page sections. Use Alpine.js for UI state that doesn't need to persist on the server, like toggling dropdowns or managing character counts.

HTMX + Alpine.js Patterns

Name: HTMX + Alpine.js Patterns
Author: neoeinstein

byneoeinstein

•

API開発

Guides the development of server-driven web applications by coordinating HTMX for server communication and Alpine.js for client-side state.

This skill provides specialized guidance for building hypermedia-driven applications using the powerful combination of HTMX and Alpine.js. It helps developers adhere to the 'Server as Source of Truth' principle, offering patterns for partial page updates via HTMX while managing ephemeral UI states like modals and dropdowns with Alpine.js. By providing a clear decision matrix on when to use each tool versus raw JavaScript, it ensures cleaner codebases, improved accessibility, and efficient server-side rendering workflows, particularly for stack-specific implementations like Rust with Axum.

主な機能

01Client-side state management guidance for ephemeral UI elements

02Decision matrix for choosing between HTMX, Alpine.js, and raw JavaScript

03Integration support for backend frameworks like Rust's Axum and Askama

041 GitHub stars

05Implementation patterns for server-driven UI updates and hypermedia fragments

06Accessibility best practices including ARIA live regions and focus management

ユースケース

01Implementing interactive forms and partial updates without writing manual Fetch or XHR logic

02Refactoring complex Single Page Applications (SPAs) into simpler hypermedia-driven architectures

03Coordinating real-time updates via WebSockets or SSE using standardized HTMX extensions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add neoeinstein/claude-plugins htmx-alpine

For use in Claude.ai and ChatGPT

主な機能

01Client-side state management guidance for ephemeral UI elements

02Decision matrix for choosing between HTMX, Alpine.js, and raw JavaScript

03Integration support for backend frameworks like Rust's Axum and Askama

041 GitHub stars

05Implementation patterns for server-driven UI updates and hypermedia fragments

06Accessibility best practices including ARIA live regions and focus management

ユースケース

01Implementing interactive forms and partial updates without writing manual Fetch or XHR logic

02Refactoring complex Single Page Applications (SPAs) into simpler hypermedia-driven architectures

03Coordinating real-time updates via WebSockets or SSE using standardized HTMX extensions