Codex Chief Alpine.js Scoped Custom Events for Panels
Manage local Alpine.js interaction state with small components and custom events scoped by reference key.
中文Install in Codex
Open Chief in Codex with the Alpine components, event name and local state. Livewire or PHP owns server data.
- Review `.agents/skills/alpinejs-development/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.agents/skills/alpinejs-development/` in your project and save the reviewed file as `.agents/skills/alpinejs-development/SKILL.md`.
- Start Codex from that project's root, then type `$alpinejs-development` and select the matching skill.
Example task
Plan a scoped open event for two side-by-side search panels.
{"panels":["left","right"],"event":"panel-open","target":"right","serverStateChanged":false}What to check
Send `target=right`. Set the right panel to `open=true` and keep the left panel at `open=false`. Leave server state with Livewire.
Original SKILL.md on GitHub · Updated
Frequently asked question
How should a listener handle an unfamiliar reference key?
Validate the event payload and skip the local state transition if the key belongs elsewhere.