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