Skills

Liveview Patterns

Build LiveView: async data (assign_async), PubSub (check connected?), phx-change...

Install

npx skills add oliver-kriska/claude-elixir-phoenix --skill liveview-patterns -g -a claude-code -y
Category
Testing
Updated
5d ago
License
MIT
Context cost
Lightabout 1,232 tokens
Runs scripts
No, instructions only

What it does

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.

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 schema MUST have a hidden_input if not directly editable
  9. NEVER USE assign_new FOR LIFECYCLE VALUES, assign_new skips the function if key exists. Use assign/3 for locale, current user, or any value refreshed every mount
  10. MATCH {:error, %Ecto.Changeset{}} EXPLICITLY, Bare {:error, _} merges changeset and non-changeset errors; the form silently never re-renders validation errors. Handle other errors separately

Memory Impact

Pattern3K items10K users × 10K items
Regular assigns~5.1 MB~10+ GB
Streams~1.1 MBMinimal (O(1))

Decision: Lists with >100 items → Use streams, not assigns

Quick Patterns

Async Assigns (CRITICAL)

Read the whole SKILL.md on GitHub

More in Testing