원클릭으로 Manus에서 모든 스킬 실행

htmx

Implements HTMX interactions, configures swap behaviors, debugs hx-* requests, and builds hypermedia-driven UI components. Use when tasks involve hx-* attributes, HTMX AJAX requests, swap strategies, server-sent events, WebSockets, or hypermedia-driven UIs.

Manus에서 실행

개요

설치 명령

npx skills add https://github.com/damusix/skills --skill htmx

이 명령을 Claude Code에 복사하여 붙여넣어 스킬을 설치하세요

출처

damusix/skills

스타51

포크3

업데이트2026년 5월 24일 18:09

파일 탐색기

10 개 파일

SKILL.md

readonly

name	htmx
description	Implements HTMX interactions, configures swap behaviors, debugs hx-* requests, and builds hypermedia-driven UI components. Use when tasks involve hx-* attributes, HTMX AJAX requests, swap strategies, server-sent events, WebSockets, or hypermedia-driven UIs.

HTMX

Use this skill for HTMX implementation and integration. Covers htmx 2.x (current stable) and htmx 4.x (beta). Reference files are annotated with [htmx 4], [htmx 4 change], and [htmx 4 removed] admonitions. Read only the reference file(s) needed for the task.

Quick Start

Identify the domain of the task (attributes, requests, swapping, events, patterns).
Open the matching file from references/.
Implement using HTML-first, hypermedia-driven patterns.
Validate that server responses return HTML fragments, not JSON.

Minimal example — a button that loads content via GET:

<button hx-get="/contacts" hx-target="#results" hx-swap="innerHTML">
    Load Contacts
</button>
<div id="results"></div>

The server endpoint (/contacts) must return an HTML fragment, not JSON:

<!-- Server response (HTML fragment, no <html>/<body> wrappers) -->
<ul>
    <li>Alice</li>
    <li>Bob</li>
</ul>

The default swap is innerHTML — the response replaces the target's children. Use hx-swap="outerHTML" to replace the target element itself.

Critical Rules

HTML responses - HTMX expects HTML responses from the server, not JSON
Attribute inheritance - (v2) Most attributes inherit to children; use hx-disinherit or unset to stop. (v4) Inheritance is explicit — use :inherited suffix to opt in. Not inherited in either version: hx-trigger, hx-on*, hx-swap-oob, hx-preserve, hx-history-elt, hx-validate
Default swap is innerHTML - Always confirm the intended swap method
Form values auto-included - Non-GET requests automatically include the closest enclosing form's values
Progressive enhancement - Use hx-boost="true" — pages must work without JS
Escape user content - Escape all user-supplied content server-side to prevent XSS. Wrap areas rendering user-generated content with hx-disable to prevent HTMX processing of injected attributes
CSS lifecycle classes - HTMX adds/removes CSS classes during requests — use for transitions and indicators
data-prefix supported - All hx-* attributes can also be written as data-hx-* for HTML validation compliance
Stop polling with HTTP 286 - Server returns status 286 to stop every or load delay polling. Always use 286 for poll termination, not conditional client-side logic
Error swaps - (v2) Non-2xx responses are not swapped by default — add an htmx:beforeSwap listener to enable. (v4) All responses swap by default except 204/304 — use hx-status for per-code control
Decouple with HX-Trigger headers - Use HX-Trigger response headers to fire client-side events instead of hardcoding DOM element IDs in server responses
Detect HTMX requests server-side - Check the HX-Request header to serve HTML fragments for HTMX requests and full pages for direct browser requests. Set Vary: HX-Request for caching

Reference Map

All hx-* attributes, values, and modifiers: references/attributes.md
Triggers, headers, parameters, CSRF, caching, CORS: references/requests.md
Swap methods, targets, OOB swaps, morphing, view transitions: references/swapping.md
Events, JS API, configuration, extensions, debugging: references/events-api.md
Common UI patterns and examples: references/patterns.md
Official extensions (WS, SSE, Idiomorph, response-targets, head-support, preload): references/extensions.md
Gotchas, pitfalls, and practical guidance: references/gotchas.md
Cross-file index and routing: references/REFERENCE.md

Task Routing

Adding HTMX behavior to elements -> references/attributes.md
Configuring how/when requests fire -> references/requests.md
Controlling where/how responses render -> references/swapping.md
Handling events, JS interop, or config -> references/events-api.md
Building common UI patterns (search, infinite scroll, modals, etc.) -> references/patterns.md
Using WebSockets, SSE, morphing, preloading, response targeting, or head merging -> references/extensions.md
Avoiding common pitfalls, accessibility, error handling, architecture decisions -> references/gotchas.md
Cross-cutting concerns or architecture -> references/REFERENCE.md then domain-specific files

이 저장소의 다른 Skills

같은 저장소

ast-grep

damusix/skills

AST-based code search, lint, and rewrite using ast-grep. Use when finding code patterns structurally (not textually), writing lint rules, building codemods, or migrating API usage across a codebase. Prefer over regex grep when the match target is a syntactic construct (function call, import, class field, assignment).

2026-05-2651

joi

damusix/skills

Use when building joi schemas, validating input data, defining custom types, conditional validation with .when(), cross-field references, custom error messages, or writing joi extensions. Standalone package that integrates with the hapijs ecosystem.

2026-05-2351

hapi

damusix/skills

Creates, configures, and debugs `@hapi/hapi` servers — implements routes, plugins, auth schemes, validation, caching, and request lifecycle hooks. Use when building HTTP APIs, setting up stale-while-revalidate caching, registering server methods, configuring views, managing startup sequences, or troubleshooting response marshalling.

2026-05-2351

mssql-writing-guidelines

damusix/skills

Use when writing or reviewing MSSQL/T-SQL, creating stored procedures, designing table schemas, writing views, building migrations, defining custom types, or architecting a SQL Server application database. Also use when writing RAISERROR patterns, CHECK constraints with scalar functions, base/subtype table hierarchies, composite key designs, role-scoped views with row-level security, or idempotent DDL scripts. If you are touching MSSQL for an application database, use this skill. Not for PostgreSQL, MySQL, Oracle, or SQLite — patterns are SQL Server-specific.

2026-05-1551

postgres

damusix/skills

Comprehensive PostgreSQL reference for developers and DBAs covering versions 14–18. Use whenever the user asks about PostgreSQL syntax, DDL/DML/DQL, joins, LATERAL, CTEs, window functions, GROUPING SETS, DISTINCT ON, RETURNING, ON CONFLICT, PL/pgSQL, functions, procedures, triggers, views, materialized views, indexes (B-tree/GIN/GiST/BRIN/Hash/Bloom), MVCC, VACUUM, autovacuum, WAL, TOAST, partitioning, replication (streaming/logical), backup, PITR, HA (Patroni/repmgr), pgBouncer, EXPLAIN ANALYZE, RLS, roles, extensions (pgvector, PostGIS, TimescaleDB, Citus, pg_trgm, pg_cron), JSON/JSONB, full-text search, UUID, timestamptz, COPY, system catalogs, collations, large objects, cursors, GUC, or any Postgres administration, performance, security, replication, backup, or recovery topic.

2026-05-1551

postgres-writing-guidelines

damusix/skills

Use when writing or reviewing PostgreSQL/PL-pgSQL, designing table schemas, writing functions and procedures, building migrations, defining domains, or architecting a Postgres application database. Also use when writing RAISE EXCEPTION patterns, BEFORE/AFTER triggers for cross-table constraints, base/subtype hierarchies, composite key designs, row-level security policies, or idempotent DDL scripts. If you are touching Postgres for an application database, use this skill. PostgreSQL-specific — examples will not run on other engines.

2026-05-1551

출처

damusix

damusix/skills

GitHub 저장소 열기 Creator 저장소 보기

설치 명령

다운로드

Manus에서 실행

유용한 대상SOC

소프트웨어 개발자컴퓨터 및 수학직15-1252L4

name	htmx
description	Implements HTMX interactions, configures swap behaviors, debugs hx-* requests, and builds hypermedia-driven UI components. Use when tasks involve hx-* attributes, HTMX AJAX requests, swap strategies, server-sent events, WebSockets, or hypermedia-driven UIs.

HTMX

Quick Start

Identify the domain of the task (attributes, requests, swapping, events, patterns).
Open the matching file from references/.
Implement using HTML-first, hypermedia-driven patterns.
Validate that server responses return HTML fragments, not JSON.

Minimal example — a button that loads content via GET:

<button hx-get="/contacts" hx-target="#results" hx-swap="innerHTML">
    Load Contacts
</button>
<div id="results"></div>

The server endpoint (/contacts) must return an HTML fragment, not JSON:

<!-- Server response (HTML fragment, no <html>/<body> wrappers) -->
<ul>
    <li>Alice</li>
    <li>Bob</li>
</ul>

The default swap is innerHTML — the response replaces the target's children. Use hx-swap="outerHTML" to replace the target element itself.

Critical Rules

HTML responses - HTMX expects HTML responses from the server, not JSON
Attribute inheritance - (v2) Most attributes inherit to children; use hx-disinherit or unset to stop. (v4) Inheritance is explicit — use :inherited suffix to opt in. Not inherited in either version: hx-trigger, hx-on*, hx-swap-oob, hx-preserve, hx-history-elt, hx-validate
Default swap is innerHTML - Always confirm the intended swap method
Form values auto-included - Non-GET requests automatically include the closest enclosing form's values
Progressive enhancement - Use hx-boost="true" — pages must work without JS
Escape user content - Escape all user-supplied content server-side to prevent XSS. Wrap areas rendering user-generated content with hx-disable to prevent HTMX processing of injected attributes
CSS lifecycle classes - HTMX adds/removes CSS classes during requests — use for transitions and indicators
data-prefix supported - All hx-* attributes can also be written as data-hx-* for HTML validation compliance
Stop polling with HTTP 286 - Server returns status 286 to stop every or load delay polling. Always use 286 for poll termination, not conditional client-side logic
Error swaps - (v2) Non-2xx responses are not swapped by default — add an htmx:beforeSwap listener to enable. (v4) All responses swap by default except 204/304 — use hx-status for per-code control
Decouple with HX-Trigger headers - Use HX-Trigger response headers to fire client-side events instead of hardcoding DOM element IDs in server responses
Detect HTMX requests server-side - Check the HX-Request header to serve HTML fragments for HTMX requests and full pages for direct browser requests. Set Vary: HX-Request for caching

Reference Map

All hx-* attributes, values, and modifiers: references/attributes.md
Triggers, headers, parameters, CSRF, caching, CORS: references/requests.md
Swap methods, targets, OOB swaps, morphing, view transitions: references/swapping.md
Events, JS API, configuration, extensions, debugging: references/events-api.md
Common UI patterns and examples: references/patterns.md
Official extensions (WS, SSE, Idiomorph, response-targets, head-support, preload): references/extensions.md
Gotchas, pitfalls, and practical guidance: references/gotchas.md
Cross-file index and routing: references/REFERENCE.md

Task Routing

Adding HTMX behavior to elements -> references/attributes.md
Configuring how/when requests fire -> references/requests.md
Controlling where/how responses render -> references/swapping.md
Handling events, JS interop, or config -> references/events-api.md
Building common UI patterns (search, infinite scroll, modals, etc.) -> references/patterns.md
Using WebSockets, SSE, morphing, preloading, response targeting, or head merging -> references/extensions.md
Avoiding common pitfalls, accessibility, error handling, architecture decisions -> references/gotchas.md
Cross-cutting concerns or architecture -> references/REFERENCE.md then domain-specific files