Communityコーディング&開発github.com

mindrally/htmx

HTMX開発ガイドライン。最小限のJavaScriptでHTML属性を使って動的なWebアプリケーションを構築します。

htmx とは?

このスキルは、HTMXを活用して動的なWebアプリケーションを構築するための開発ガイドラインを提供します。HTMXは、HTML属性を通じて非同期リクエストや動的なコンテンツ更新を実現し、JavaScriptの記述量を大幅に削減できます。このスキルは、Claude Code、Cursor、CodexなどのAIエージェント向けに設計されており、開発者がHTMXのベストプラクティスに従って効率的にアプリケーションを開発するのを支援します。具体的には、hx-getやhx-postなどの属性の使い方、イベント処理、サーバーサイドとの連携方法などが含まれます。開発者はこのガイドラインを参照することで、保守性が高くパフォーマンスに優れたアプリケーションを構築できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mindrally/skills/tree/main/skills/htmx

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

htmx は何をしますか?

HTMX開発ガイドライン。最小限のJavaScriptでHTML属性を使って動的なWebアプリケーションを構築します。

目的

このガイドラインは、開発者がHTMXを使用して、以下のような利点を享受しながらアプリケーションを構築できるようにすることを目的としています。

  • JavaScriptの記述量を最小限に抑える
  • サーバーサイドのロジックを活用した動的なUI更新
  • HTML中心のシンプルなコード構造

主な機能

  • hx-get: 要素をクリックしたときに指定されたURLにGETリクエストを送信
  • hx-post: フォーム送信などでPOSTリクエストを使用
  • hx-trigger: トリガー条件をカスタマイズ
  • hx-target: レスポンスの描画先を指定
  • hx-swap: レスポンスの挿入方法を制御

使用例

<button hx-get="/api/data" hx-target="#result">
  データを取得
</button>
<div id="result"></div>

注意点

  • サーバーサイドは適切なレスポンスを返す必要があります(HTMLフラグメント)
  • イベントの重複や予期しない動作を避けるため、トリガー条件は明確に設定してください
  • 大量のリクエストが発生しないよう、レート制限やデバウンスを考慮してください

参考

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

mindrally/accessibility-a11y

Implement web accessibility (a11y) best practices following WCAG guidelines to create inclusive, accessible user interfaces.

mindrally/chrome-extension-development

Expert guidelines for Chrome extension development with Manifest V3, covering security, performance, and best practices. Use when building browser extensions, creating popup UIs, implementing content scripts, working with Chrome APIs, managing extension permissions, or publishing to Chrome Web Store.

mindrally/computer-vision-opencv

Expert guidance for computer vision development using OpenCV, PyTorch, and modern deep learning techniques for image and video processing.

mindrally/data-analysis-jupyter

Expert guidance for data analysis, visualization, and Jupyter Notebook development with pandas, matplotlib, seaborn, and numpy.

mindrally/deep-learning-pytorch

Expert guidance for deep learning, transformers, diffusion models, and LLM development with PyTorch, Transformers, Diffusers, and Gradio.

mindrally/expo-react-native-typescript

Expert in Expo React Native TypeScript mobile development with best practices

mindrally/fastapi-python

Expert in FastAPI Python development with best practices for APIs and async operations

mindrally/framer-motion

Expert guidelines for building performant animations with Framer Motion/Motion library in React applications

mindrally/jwt-security

Guidelines for implementing JWT authentication with security best practices for token creation, validation, and storage

mindrally/machine-learning

Machine learning development with JAX, functional programming patterns, and high-performance computing.

mindrally/mysql-best-practices

MySQL development best practices for schema design, query optimization, and database administration

mindrally/nextjs-react-typescript

Expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind

mindrally/nextjs-typescript-tailwindcss-supabase

Full-stack Next.js 14 development with TypeScript, TailwindCSS, and Supabase for building production-ready web applications.

mindrally/odoo-development

Expert guidance for Odoo ERP development including Python ORM, XML views, and module architecture

mindrally/puppeteer-automation

Expert guidance for browser automation using Puppeteer with best practices for web scraping, testing, screenshot capture, and JavaScript execution in headless Chrome.

mindrally/redis-best-practices

Redis development best practices for caching, data structures, and high-performance key-value operations

mindrally/scrapy-web-scraping

Expert guidance for building web scrapers and crawlers using the Scrapy Python framework with best practices for spider development, data extraction, and pipeline management.

mindrally/scss-best-practices

SCSS/Sassy CSS best practices and coding guidelines for maintainable, scalable stylesheets

mindrally/typeorm

Guidelines for developing with TypeORM, a full-featured ORM for TypeScript and JavaScript supporting multiple databases

mindrally/web-scraping

Expert in web scraping and data extraction with Python tools

関連スキル