{"id":"57c5cac3-f9fd-4b47-b9af-40b37f1ce763","shortId":"8NQjZf","kind":"skill","title":"htmx","tagline":"Use when editing hx-* attributes, building HTMX hypermedia flows, returning partial HTML responses, setting HTMX response headers, or rendering server-side .html templates.","description":"# HTMX Skill\n\n<workflow>\n\n## Quick Reference\n\n### Core Attributes\n\n<example>\n\n```html\n<!-- Basic request types -->\n<button hx-get=\"/items\">Load Items</button>\n<button hx-post=\"/items\" hx-vals='{\"name\": \"New Item\"}'>Create</button>\n<button hx-put=\"/items/1\">Update</button>\n<button hx-delete=\"/items/1\">Delete</button>\n\n<!-- Specify target -->\n<button hx-get=\"/items\" hx-target=\"#item-list\">Load</button>\n\n<!-- Swap strategies -->\n<div hx-get=\"/items\" hx-swap=\"innerHTML\">Replace content</div>\n<div hx-get=\"/items\" hx-swap=\"outerHTML\">Replace element</div>\n<div hx-get=\"/items\" hx-swap=\"beforeend\">Append</div>\n<div hx-get=\"/items\" hx-swap=\"afterbegin\">Prepend</div>\n<div hx-get=\"/items\" hx-swap=\"delete\">Delete element</div>\n\n<!-- Triggers -->\n<input hx-get=\"/search\" hx-trigger=\"keyup changed delay:500ms\">\n<div hx-get=\"/updates\" hx-trigger=\"every 5s\">Polling</div>\n<button hx-get=\"/modal\" hx-trigger=\"click once\">Open once</button>\n```\n\n</example>\n\n### OOB (Out of Band) Swaps\n\n<example>\n\n```html\n<!-- Server response with multiple updates -->\n<div id=\"main-content\">\n  Main content here\n</div>\n<div id=\"notification\" hx-swap-oob=\"true\">\n  New notification!\n</div>\n<div id=\"counter\" hx-swap-oob=\"innerHTML\">42</div>\n```\n\n</example>\n\n### Forms\n\n<example>\n\n```html\n<form hx-post=\"/users\" hx-target=\"#result\" hx-swap=\"outerHTML\">\n  <input name=\"name\" required>\n  <input name=\"email\" type=\"email\" required>\n  <button type=\"submit\">\n    <span class=\"htmx-indicator\">Saving...</span>\n    <span>Save</span>\n  </button>\n</form>\n\n<!-- With validation -->\n<form hx-post=\"/users\" hx-target=\"#result\">\n  <input name=\"email\" hx-get=\"/validate/email\" hx-trigger=\"blur\">\n  <span id=\"email-error\"></span>\n</form>\n```\n\n</example>\n\n### Indicators\n\n<example>\n\n```html\n<button hx-get=\"/slow\" hx-indicator=\"#spinner\">\n  Load Data\n  <img id=\"spinner\" class=\"htmx-indicator\" src=\"/spinner.svg\">\n</button>\n\n<style>\n  .htmx-indicator { display: none; }\n  .htmx-request .htmx-indicator { display: inline; }\n  .htmx-request.htmx-indicator { display: inline; }\n</style>\n```\n\n</example>\n\n### Boosted Links\n\n<example>\n\n```html\n<!-- Boost all links in a section -->\n<div hx-boost=\"true\">\n  <a href=\"/page1\">Page 1</a>\n  <a href=\"/page2\">Page 2</a>\n</div>\n\n<!-- Push URL to history -->\n<a hx-get=\"/page\" hx-push-url=\"true\">Navigate</a>\n```\n\n</example>\n\n### Events\n\n<example>\n\n```html\n<!-- Trigger on custom event -->\n<div hx-get=\"/data\" hx-trigger=\"myEvent from:body\">\n  Waiting for event...\n</div>\n\n<script>\n  document.body.dispatchEvent(new Event('myEvent'));\n</script>\n\n<!-- Listen to htmx events -->\n<script>\n  document.body.addEventListener('htmx:afterSwap', (e) => {\n    console.log('Swapped:', e.detail.target);\n  });\n</script>\n```\n\n</example>\n\n### Extensions\n\n<example>\n\n```html\n<!-- JSON encoding extension -->\n<script src=\"https://unpkg.com/htmx.org/dist/ext/json-enc.js\"></script>\n\n<form hx-post=\"/api/users\" hx-ext=\"json-enc\">\n  <input name=\"email\" type=\"email\">\n  <button>Submit as JSON</button>\n</form>\n\n<!-- SSE extension -->\n<div hx-ext=\"sse\" sse-connect=\"/events\" sse-swap=\"message\">\n  Live updates here\n</div>\n\n<!-- WebSocket extension -->\n<div hx-ext=\"ws\" ws-connect=\"/chat\">\n  <form ws-send>\n    <input name=\"message\">\n  </form>\n</div>\n```\n\n</example>\n\n### Headers & CSRF\n\n<example>\n\n```html\n<!-- Include CSRF token -->\n<meta name=\"csrf-token\" content=\"{{ csrf_token }}\">\n\n<script>\n  document.body.addEventListener('htmx:configRequest', (e) => {\n    e.detail.headers['X-CSRF-Token'] =\n      document.querySelector('meta[name=\"csrf-token\"]').content;\n  });\n</script>\n```\n\n</example>\n\n### Confirm & Prompt\n\n<example>\n\n```html\n<button hx-delete=\"/items/1\" hx-confirm=\"Are you sure?\">\n  Delete\n</button>\n\n<button hx-post=\"/action\" hx-prompt=\"Enter reason:\">\n  Action with reason\n</button>\n```\n\n</example>\n\n## Server Response Headers\n\n<example>\n\n```python\n# Python example\nresponse.headers[\"HX-Redirect\"] = \"/new-page\"\nresponse.headers[\"HX-Refresh\"] = \"true\"\nresponse.headers[\"HX-Trigger\"] = \"itemCreated\"\nresponse.headers[\"HX-Trigger-After-Swap\"] = \"formReset\"\nresponse.headers[\"HX-Reswap\"] = \"outerHTML\"\nresponse.headers[\"HX-Retarget\"] = \"#new-target\"\n```\n\n</example>\n\n## Best Practices\n\n- Return partial HTML, not full pages\n- Use `hx-swap-oob` for updating multiple elements\n- Add loading indicators for slow operations\n- Use `hx-boost` for progressive enhancement\n- Include CSRF tokens in headers\n- Use semantic HTML for accessibility\n\n</workflow>\n\n## References Index\n\n- **[Litestar-Vite Integration](references/litestar_vite.md)** — Backend integration with Litestar-Vite plugin.\n\n## Deployment\n\n### Hypermedia Strategy\n\nHTMX applications are deployed bundled with their backend engine (e.g., Litestar). Deployment involves standard backend containerization or server hosting.\n\n### Static Assets\n\nEnsure `htmx.min.js` and desired 2.x extensions are bundle-copied to the backend static directory.\n\n---\n\n## CI/CD Actions\n\nExample GitHub Actions workflow targeting Backend Tests ensuring partial content returns:\n\n```yaml\nname: Backend CI\non: [push, pull_request]\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - name: Setup Python\n        uses: actions/setup-python@v5\n      - run: pip install -r requirements.txt\n      - run: pytest tests/ # Verify handlers return partial html correctly\n```\n\n## Official References\n\n- <https://htmx.org/docs/>\n- <https://htmx.org/reference/>\n- <https://htmx.org/migration-guide-htmx-1/>\n- <https://extensions.htmx.org/>\n- <https://htmx.org/extensions/ws/>\n- <https://github.com/bigskysoftware/htmx/releases>\n\n## Shared Styleguide Baseline\n\n- Use shared styleguides for generic language/framework rules to reduce duplication in this skill.\n- [General Principles](https://github.com/cofin/flow/blob/main/templates/styleguides/general.md)\n- [HTMX](https://github.com/cofin/flow/blob/main/templates/styleguides/frameworks/htmx.md)\n- Keep this skill focused on tool-specific workflows, edge cases, and integration details.\n\n<guardrails>\n## Guardrails\n\nAdd guardrails instructions here.\n</guardrails>\n\n<validation>\n## Validation\n\nAdd validation instructions here.\n</validation>","tags":["htmx","flow","cofin","agent-skills","ai-agents","beads","claude-code","codex","cursor","developer-tools","gemini-cli","opencode"],"capabilities":["skill","source-cofin","skill-htmx","topic-agent-skills","topic-ai-agents","topic-beads","topic-claude-code","topic-codex","topic-cursor","topic-developer-tools","topic-gemini-cli","topic-opencode","topic-plugin","topic-slash-commands","topic-spec-driven-development"],"categories":["flow"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cofin/flow/htmx","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cofin/flow","source_repo":"https://github.com/cofin/flow","install_from":"skills.sh"}},"qualityScore":"0.455","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 11 github stars · SKILL.md body (6,142 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:07:37.461Z","embedding":null,"createdAt":"2026-04-23T13:03:59.601Z","updatedAt":"2026-05-18T19:07:37.461Z","lastSeenAt":"2026-05-18T19:07:37.461Z","tsv":"'/bigskysoftware/htmx/releases':305 '/cofin/flow/blob/main/templates/styleguides/frameworks/htmx.md)':330 '/cofin/flow/blob/main/templates/styleguides/general.md)':326 '/docs/':292 '/extensions/ws/':302 '/migration-guide-htmx-1/':298 '/new-page':111 '/reference/':295 '1':74 '2':76,223 '42':61 'access':180 'action':98,236,239 'actions/checkout':266 'actions/setup-python':272 'add':158,346,351 'append':43 'applic':199 'asset':218 'attribut':6,31 'backend':188,205,212,232,242,250 'band':53 'baselin':308 'best':141 'boost':70,167 'build':7 'bundl':202,228 'bundle-copi':227 'case':341 'ci':251 'ci/cd':235 'confirm':94 'container':213 'content':40,57,246 'copi':229 'core':30 'correct':287 'creat':35 'csrf':92,172 'data':69 'delet':37,45,97 'deploy':195,201,209 'desir':222 'detail':344 'directori':234 'duplic':318 'e.g':207 'edg':340 'edit':4 'element':42,46,157 'engin':206 'enhanc':170 'ensur':219,244 'event':78,82 'exampl':106,237 'extens':83,225 'extensions.htmx.org':299 'flow':10 'focus':334 'form':62 'formreset':128 'full':147 'general':322 'generic':313 'github':238 'github.com':304,325,329 'github.com/bigskysoftware/htmx/releases':303 'github.com/cofin/flow/blob/main/templates/styleguides/frameworks/htmx.md)':328 'github.com/cofin/flow/blob/main/templates/styleguides/general.md)':324 'guardrail':345,347 'handler':283 'header':18,91,103,175 'host':216 'html':13,24,32,55,63,67,72,79,84,93,96,145,178,286 'htmx':1,8,16,26,198,327 'htmx.min.js':220 'htmx.org':291,294,297,301 'htmx.org/docs/':290 'htmx.org/extensions/ws/':300 'htmx.org/migration-guide-htmx-1/':296 'htmx.org/reference/':293 'hx':5,109,114,119,124,131,136,151,166 'hx-boost':165 'hx-redirect':108 'hx-refresh':113 'hx-reswap':130 'hx-retarget':135 'hx-swap-oob':150 'hx-trigger':118 'hx-trigger-after-swap':123 'hypermedia':9,196 'includ':171 'index':182 'indic':66,160 'instal':276 'instruct':348,353 'integr':186,189,343 'involv':210 'item':34 'itemcr':121 'job':256 'json':87 'keep':331 'language/framework':314 'latest':263 'link':71 'litestar':184,192,208 'litestar-vit':183,191 'live':88 'load':33,38,68,159 'main':56 'multipl':156 'name':249,268 'navig':77 'new':59,139 'new-target':138 'notif':60 'offici':288 'oob':50,153 'open':48 'oper':163 'outerhtml':133 'page':73,75,148 'partial':12,144,245,285 'pip':275 'plugin':194 'poll':47 'practic':142 'prepend':44 'principl':323 'progress':169 'prompt':95 'pull':254 'push':253 'pytest':280 'python':104,105,270 'quick':28 'r':277 'reason':100 'redirect':110 'reduc':317 'refer':29,181,289 'references/litestar_vite.md':187 'refresh':115 'render':20 'replac':39,41 'request':255 'requirements.txt':278 'respons':14,17,102 'response.headers':107,112,117,122,129,134 'reswap':132 'retarget':137 'return':11,143,247,284 'rule':315 'run':259,274,279 'runs-on':258 'save':64,65 'semant':177 'server':22,101,215 'server-sid':21 'set':15 'setup':269 'share':306,310 'side':23 'skill':27,321,333 'skill-htmx' 'slow':162 'source-cofin' 'specif':338 'standard':211 'static':217,233 'step':264 'strategi':197 'styleguid':307,311 'submit':85 'swap':54,127,152 'target':140,241 'templat':25 'test':243,257,281 'token':173 'tool':337 'tool-specif':336 'topic-agent-skills' 'topic-ai-agents' 'topic-beads' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-developer-tools' 'topic-gemini-cli' 'topic-opencode' 'topic-plugin' 'topic-slash-commands' 'topic-spec-driven-development' 'trigger':120,125 'true':116 'ubuntu':262 'ubuntu-latest':261 'updat':36,89,155 'use':2,149,164,176,265,271,309 'v4':267 'v5':273 'valid':350,352 'verifi':282 'vite':185,193 'wait':80 'workflow':240,339 'x':224 'yaml':248","prices":[{"id":"5a0e4564-7849-4211-b773-81cc7c4f5669","listingId":"57c5cac3-f9fd-4b47-b9af-40b37f1ce763","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cofin","category":"flow","install_from":"skills.sh"},"createdAt":"2026-04-23T13:03:59.601Z"}],"sources":[{"listingId":"57c5cac3-f9fd-4b47-b9af-40b37f1ce763","source":"github","sourceId":"cofin/flow/htmx","sourceUrl":"https://github.com/cofin/flow/tree/main/skills/htmx","isPrimary":false,"firstSeenAt":"2026-04-23T13:03:59.601Z","lastSeenAt":"2026-05-18T19:07:37.461Z"}],"details":{"listingId":"57c5cac3-f9fd-4b47-b9af-40b37f1ce763","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cofin","slug":"htmx","github":{"repo":"cofin/flow","stars":11,"topics":["agent-skills","ai-agents","beads","claude-code","codex","context-driven-development","cursor","developer-tools","gemini-cli","opencode","plugin","slash-commands","spec-driven-development","subagents","tdd","workflow"],"license":"apache-2.0","html_url":"https://github.com/cofin/flow","pushed_at":"2026-04-27T19:07:26Z","description":"Context-Driven Development toolkit for AI agents — spec-first planning, TDD workflow, and Beads integration.","skill_md_sha":"f02d8d1a204991d02a8a02942a417ce06c6c4fd6","skill_md_path":"skills/htmx/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cofin/flow/tree/main/skills/htmx"},"layout":"multi","source":"github","category":"flow","frontmatter":{"name":"htmx","description":"Use when editing hx-* attributes, building HTMX hypermedia flows, returning partial HTML responses, setting HTMX response headers, or rendering server-side .html templates."},"skills_sh_url":"https://skills.sh/cofin/flow/htmx"},"updatedAt":"2026-05-18T19:07:37.461Z"}}