Skip to content
Backend
Skill

/phoenix

Build and debug Phoenix web interfaces and HTTP endpoints. Use for LiveView lifecycle and data loading, components, forms, routes, controllers, Plug, channels, and PubSub. Use ecto for changesets, queries, and persistence behind those interfaces.

From plugin
elixir-agent-tools
1715 skills
Install
$ npx -y skills add georgeguimaraes/claude-code-elixir --skill phoenix --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/phoenix

Context preview

The summary Claude sees to decide when to auto-load this skill.

Build and debug Phoenix web interfaces and HTTP endpoints. Use for LiveView lifecycle and data loading, components, forms, routes, controllers, Plug, channels, and PubSub. Use ecto for changesets, queries, and persistence behind those interfaces.

SKILL.md

phoenix.SKILL.md
name: phoenix
description: Build and debug Phoenix web interfaces and HTTP endpoints. Use for LiveView lifecycle and data loading, components, forms, routes, controllers, Plug, channels, and PubSub. Use ecto for changesets, queries, and persistence behind those interfaces.

Phoenix

Structure Phoenix interfaces, load LiveView data, and scope real-time updates.

Where to Load Data: mount vs handle_params

Default: load data in `mount/3`.

def mount(_params, _session, socket) do
  posts = Blog.list_posts(socket.assigns.current_scope)
  {:ok, assign(socket, posts: posts)}
end

Yes, mount runs twice on initial load (HTTP dead render + WebSocket connect). So does `handle_params/3`. That's the LiveView lifecycle, not a bug to route around. Moving queries from mount to handle_params does not dedupe them.

Use `handle_params/3` for data that changes on live navigation (`push_patch` / `<.link patch={...}>`). mount does not re-run on patches, handle_params does.

def handle_params(%{"filter" => filter}, _uri, socket) do
  posts = Blog.list_posts(socket.assigns.current_scope, filter)
  {:noreply, assign(socket, posts: posts, filter: filter)}
end

When the initial double-load actually matters, the real tools are:

  • `connected?(socket)` to gate work to the connected render (loses SEO / no-JS rendering)
  • `assign_async/3` to load after mount returns, in a separate process
  • `assign_new/3` to reuse values already set on `conn.assigns` by upstream Plugs (e.g. `:current_user`), or shared from a parent LiveView. It does not dedupe arbitrary work across the dead/connected boundary: the function still runs on connected mount.
def mount(_params, _session, socket) do
  posts = if connected?(socket), do: Blog.list_posts(socket.assigns.current_scope), else: []
  {:ok, assign(socket, posts: posts)}
end

Scopes: Security-First Pattern (Phoenix 1.8+)

Scopes address OWASP #1 vulnerability: Broken Access Control. Authorization context is threaded automatically—no more forgetting to scope queries.

def list_posts(%Scope{user: user}) do
  Post |> where(user_id: ^user.id) |> Repo.all()
end

PubSub Topics Must Be Scoped

def subscribe(%Scope{organization: org}) do
  Phoenix.PubSub.subscribe(@pubsub, "posts:org:#{org.id}")
end

Unscoped topics = data leaks between tenants.

External Polling: GenServer, Not LiveView

**Bad:** Every connected user makes API calls (multiplied by users). **Good:** Single GenServer polls, broadcasts to all via PubSub.

Components Receive Data, LiveViews Own Data

  • **Functional components:** Display-only, no internal state
  • **LiveComponents:** Own state, handle own events
  • **LiveViews:** Full page, owns URL, top-level state

Async Data Loading

Use `assign_async/3` for data that can load after mount:

def mount(_params, _session, socket) do
  {:ok, assign_async(socket, :user, fn -> {:ok, %{user: fetch_user()}} end)}
end

Gotchas from Core Team

LiveView terminate/2 Requires trap_exit

`terminate/2` only fires if you're trapping exits—which you shouldn't do in LiveView.

**Fix:** Use a separate GenServer that monitors the LiveView process via `Process.monitor/1`, then handle `:DOWN` messages to run cleanup.

start_async Duplicate Names: Later Wins

Calling `start_async` with the same name while a task is in-flight: the **later one wins**, the previous task's result is ignored.

**Fix:** Call `cancel_async/3` first if you want to abort the previous task.

Channel Intercept Socket State is Stale

The socket in `handle_out` intercept is a snapshot from subscription time, not current state.

**Why:** Socket is copied into fastlane lookup at subscription time for performance.

**Fix:** Use separate topics per role, or fetch current state explicitly.

CSS Class Precedence is Stylesheet Order

When merging classes on components, precedence is determined by **stylesheet order**, not HTML order. If `btn-primary` appears later in the compiled CSS than `bg-red-500`, it wins regardless of HTML order.

**Fix:** Use variant props instead of class merging.

Upload Content-Type Can't Be Trusted

The `:content_type` in `%Plug.Upload{}` is user-provided. Always validate actual file contents (magic bytes) and rewrite filename/extension.

Read Body Before Plug.Parsers for Webhooks

To verify webhook signatures, you need the raw body. But Plug.Parsers consumes it.

{:ok, body, conn} = Plug.Conn.read_body(conn)
verify_signature!(conn, body)
%{conn | body_params: JSON.decode!(body)}

Don't use `preserve_req_body: true`—it keeps the entire body in memory for ALL requests.

Red Flags - STOP and Reconsider

  • Loading patch-mutable data in mount/3 instead of handle_params/3
  • Unscoped PubSub topics in multi-tenant app
  • LiveView polling external APIs directly
  • Using terminate/2 for cleanup (won't fire without trap_exit)
  • Calling start_async with same name without cancel_async first
  • Relying on socket.assigns in Channel intercepts (stale!)
  • CSS class merging for component customization (use variants)
  • Trusting `%Plug.Upload{}.content_type` for security

**Any of these? Re-read the Gotchas section.**

Read more
Ships withelixir-agent-tools

Elixir development guidance for coding agents, with optional Mix checks and Expert language server integration. Install the elixir-dev plugin for five skills covering language idioms, Phoenix interfaces, Ecto persistence, OTP processes, and Oban jobs.

Get the whole plugin
Stats
171
Stars
15
Forks
Active
Maintenance
Python
Language
Apache-2.0
License
19h ago
Last commit
8mo ago
Created

Repo: georgeguimaraes/claude-code-elixir

Other skills on elixir-agent-tools.