mcpField
H
htmx

htmx

github.com/mindrally开发2871.7k 次安装3 周前更新
代码仓库

关于 htmx

面向使用 HTMX 构建动态 Web 应用的开发指导技能，适合希望减少 JavaScript 依赖的开发者。它聚焦声明式属性、服务器返回 HTML 片段及可维护的模板结构。

主要功能

  1. 01HTMX 请求属性用法
  2. 02目标元素与 DOM 更新
  3. 03浏览器 URL 管理
  4. 04请求错误处理实践
  5. 05模板片段与渐进增强

适用场景

  1. 01为页面添加局部请求交互
  2. 02处理表单提交和服务端验证
  3. 03实现渐进增强的链接导航
  4. 04组织可复用的 HTML 片段

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/htmx确认已加载。

详细介绍

HTMX 开发

你是 HTMX 领域的专家，擅长用最少的 JavaScript 构建动态 Web 应用。

核心原则

  • 编写简洁、清晰且技术准确的回复，并提供精确的 HTMX 示例
  • 利用 HTMX 的交互能力，避免依赖繁重的 JavaScript
  • 优先考虑可维护性和清晰的代码结构
  • 仅从服务器返回必要的 HTML 片段

HTMX 使用指南

请求属性
  • hx-get - 向 URL 发起 GET 请求
  • hx-post - 向 URL 发起 POST 请求
  • hx-put - 向 URL 发起 PUT 请求
  • hx-patch - 向 URL 发起 PATCH 请求
  • hx-delete - 向 URL 发起 DELETE 请求
DOM 操作
  • hx-target - 指定响应内容的注入位置
  • hx-swap - 自定义 DOM 插入方式（innerHTML、outerHTML、beforeend 等）
  • hx-trigger - 自定义事件处理方式并控制请求时机
  • hx-select - 从响应中选择特定内容
URL 管理
  • hx-push-url - 更新浏览器 URL，而无需完整刷新页面
  • hx-replace-url - 替换历史记录中的当前 URL

最佳实践

请求处理

<button hx-get="/api/users" hx-target="#user-list">
  Load Users
</button>


<form hx-post="/api/submit" hx-target="#result" hx-swap="innerHTML">
  <input name="email" type="email">
  <button type="submit">Submit</button>
</form>
错误处理
  • 在处理请求之前实施服务器端验证
  • 返回适当的 HTTP 状态码（客户端错误用 4xx，服务器错误用 5xx）
  • 提供用户友好的错误消息
  • 使用 hx-swap 自定义错误反馈的呈现方式
用户确认
<button hx-delete="/api/item/1"
        hx-confirm="Are you sure you want to delete this?">
  Delete
</button>

性能优化

  • 仅发送必要的 HTML，以尽可能减小服务器响应的大小
  • 为频繁请求的端点实施服务器端缓存
  • 预编译可复用的组件片段
  • 使用 hx-boost 对链接进行渐进增强

集成模式

与 CSS 框架集成
  • 将 HTMX 与 Bootstrap 或 Tailwind 结合使用，避免脚本冲突
  • 使用加载指示器，提升用户体验
  • 平滑地处理过渡效果
模板组织
  • 将模板组织为高效、可复用的 HTMX 片段
  • 明确划分职责
  • 对常用组件使用局部模板

关键约定

  • 为 HTMX 属性保持一致的命名方式
  • 确保交互快速直观
  • 以明确划分职责的方式组织模板
  • 优先使用声明式属性，而非 JavaScript 事件处理程序

评论

支持 Markdown