liveview-patterns
Build LiveView: async data (assign_async), PubSub (check connected?), phx-change events, form components/modals/uploads, streams for lists, live_patch. Use when handling interactions, debugging events, or tracking Presence.'
npx skills add oliver-kriska/claude-elixir-phoenix --skill liveview-patterns --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# LiveView Patterns Reference > **Ash projects**: Use `ash-framework` skill for `AshPhoenix.Form`. Lifecycle: `AshPhoenix.Form.validate/3` on `phx-change`, `AshPhoenix.Form.submit/2` on submit, `to_form/1` for HEEx. Do not use `Ecto.Changeset.cast/3`. Reference for building with Phoenix LiveView 1.0/1.1. ## Iron Laws — Never Violate These 1. **NO UNCONDITIONAL DB QUERIES IN MOUNT** — Mount runs TWICE. Default: `assign_async`. SEO routes: `connected?` guard + cache-backed disconnected branch (crawlers read that HTML) 2. **ALWAYS USE STREAMS FOR LISTS** — Regular assigns = O(n) memory per user. Streams = O(1) 3. **CHECK connected?/1 BEFORE SUBSCRIPTIONS** — Prevents double subscriptions 4. **EXTRACT VARIABLES BEFORE assign_async CLOSURE** — Closures copy entire referenced variables 5. **LOAD PRIMARY DATA IN mount/3, PAGINATION IN handle_params/3** — handle_params runs on EVERY URL change 6. **NEVER PASS SOCKET TO BUSINESS LOGIC** — Extract data before calling contexts 7. **CHECK CHANGESET ERRORS BEFORE UI DEBUGGING** — Silent form save = check `{:error, changeset}` first, not viewport/JS 8. **HIDDEN INPUTS FOR ALL REQUIRED EMBEDDED FIELDS** — Every required field in an embedded schem
- Iron Laws — Never Violate These
- Memory Impact
- Quick Patterns
- Async Assigns (CRITICAL)
- Streams for Lists
- SEO Dead-Render (cache-backed disconnected branch)
- PubSub with connected? check
- Navigation Decision Tree
- Component Decision Tree
- Common Anti-patterns
- References
What does the liveview-patterns skill do?
Build LiveView: async data (assign_async), PubSub (check connected?), phx-change events, form components/modals/uploads, streams for lists, live_patch. Use when handling interactions, debugging events, or tracking Presence.'
How do I install it?
Run `npx skills add oliver-kriska/claude-elixir-phoenix --skill liveview-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From oliver-kriska/claude-elixir-phoenix, a repository with 515 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.