---
name: "alpinejs-declarative-html"
description: "Sprinkle reactivity and dynamic behavior directly into server-rendered HTML with Alpine.js."
metadata:
  author: "Caleb Porzio"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "use alpinejs x-data"
  - "x-transition alpinejs"
  - "alpinejs dropdown component"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Alpine.js Declarative Reactive HTML Components

Builds lightweight frontend interactions with Alpine.js: x-data components, x-bind attributes, x-on event handlers, x-model two-way binding, x-transition animation directives, and global stores with Alpine.store.

## When to Invoke
Invoke this skill whenever you need to:
- use alpinejs x-data
- x-transition alpinejs
- alpinejs dropdown component

## Execution SOP & Rules
1. Declare component scope: <div x-data='{ open: false }'>.
2. Toggle state on click: <button @click='open = !open'>Toggle</button>.
3. Conditionally display: <div x-show='open' x-transition.duration.300ms>Content</div>.
4. Initialize global state in JavaScript: Alpine.store('cart', { items: [], add(item) { ... } }).

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.