alpinejs
✓AlpineJS のベスト プラクティスとパターン。 Alpine.js ディレクティブを使用して HTML を作成するときに使用して、長いインライン JavaScript 文字列などのよくある間違いを回避します。
SKILL.md
Never put complex logic in HTML attributes. If your x-data, x-init, or any directive exceeds 50 characters, extract it.
| x-data | Declare reactive component state | x-data="{ open: false }" | | x-init | Run code on component init | x-init="fetchData()" | | x-show | Toggle visibility (CSS display) | x-show="open" | | x-if | Conditional rendering (must wrap ) | | | x-for | Loop (must wrap ) | | | x-bind: / : | Bind attribute to expression | :class="{ active: isActive }" |
| x-on: / @ | Listen to events | @click="open = !open" | | x-model | Two-way bind form inputs | x-model="email" | | x-text | Set text content | x-text="message" | | x-html | Set inner HTML | x-html="htmlContent" | | x-ref | Reference element via $refs | x-ref="input" |
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/brettatoms/agent-skills --skill alpinejs- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-02
- 更新日
- 2026-02-18
クイックアンサー
alpinejs とは？
AlpineJS のベスト プラクティスとパターン。 Alpine.js ディレクティブを使用して HTML を作成するときに使用して、長いインライン JavaScript 文字列などのよくある間違いを回避します。 ソース: brettatoms/agent-skills。
alpinejs のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/brettatoms/agent-skills --skill alpinejs インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/brettatoms/agent-skills
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-02