elixir-vibe/pi-elixir/elixir-web

Elixir Web Development

Use this as the primary skill for UI/frontend work in an existing Phoenix project. Use elixir instead for general backend/OTP work and elixir-new-project for creation/bootstrap. Do not load both general and web skills by default.

Keep the BEAM as the first feedback loop: use elixir_eval for runtime/render/log evidence, AST tools for Elixir structure, LSP for editor semantics, and browser tooling only when behavior requires a real browser. Inspect existing test support before adding helpers or a second browser abstraction.

Before the final answer, verify the claim with a concrete witness such as a runtime error, recording event, rendered fragment, icon lookup, Tailwind candidate, compile result, browser trace, or screenshot.

Lazy references

Do not preload all references. Read only the reference matching the task:

• references/feedback-loops.md — choosing between BEAM logs, browser console forwarding, replay data, or render-without-browser checks.
• references/replay-debugging.md — inspecting PhoenixReplay recordings, assign changes, timelines, or replay-based rerenders.
• references/ui-verification.md — icons, Tailwind extraction, rendered HTML, real-browser acceptance tests, or Vue SFC compilation.
• references/volt.md — Volt is installed and the task involves HMR, frontend builds, JS checks, Tailwind, or its dev server.

Check package availability with Code.ensure_loaded?/1 before using package-specific recipes. Verify current package docs/metadata instead of assuming versions.