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 中使用
這個 Skill 的原始碼在哪？
https://github.com/brettatoms/agent-skills
詳情
- 分類
- </>開發工具
- 來源
- skills.sh
- 收錄時間
- 2026-02-02