alpinejs
AlpineJS Best Practices
Golden Rule: Keep Attributes Short
Never put complex logic in HTML attributes. If your x-data, x-init, or any directive exceeds ~50 characters, extract it.
Directive Cheatsheet
| Directive | Purpose | Example |
|---|---|---|
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 <template>) |
<template x-if="show"> |
x-for |
Loop (must wrap <template>) |
<template x-for="item in items"> |
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" |
More from brettatoms/agent-skills
janet
Write idiomatic Janet code. Use when writing, refactoring, or reviewing Janet (.janet) code. Covers functional patterns, performance tradeoffs, common gotchas, data structure idioms, PEG parsing, and Janet-specific pitfalls.
10playwright
Browser automation for web testing and interaction. Use for navigating pages, filling forms, clicking elements, taking screenshots, and inspecting page content. Maintains stateful browser session across commands.
9code-symbols
Find and edit symbols in code using ast-grep (tree-sitter based). Use when finding function definitions, class definitions, symbol usages, renaming symbols, or replacing code in JavaScript, TypeScript, Python, Go, Rust, and other languages. NOT for Clojure - use clj-symbols instead.
8browser-tools
Interactive browser automation via Chrome DevTools Protocol. Use when you need to interact with web pages, test frontends, or when user interaction with a visible browser is required.
8github
Work with GitHub using the gh CLI. Use when creating/managing pull requests, reviewing code, managing issues, viewing GitHub Actions runs, creating releases, or making API requests. Triggers on GitHub-related tasks like "create a PR", "list open issues", "check CI status", "merge this PR", or "create a release".
7lib-docs
Fetch library documentation and code examples. Use when user asks about library APIs, needs code examples, or says "use lib-docs", "lookup docs for X", "how does [library] work". Works with any language/framework.
7