实时视图评审

liveview-code-review

by anderskev

Reviews Phoenix LiveView code for lifecycle patterns, assigns/streams usage, components, and security. Use when reviewing LiveView modules, .heex templates, or LiveComponents.

3.7k编码与调试未扫描2026年3月23日

安装

claude skill add --url github.com/openclaw/skills/tree/main/skills/anderskev/liveview-code-review

文档

LiveView Code Review

Quick Reference

Issue TypeReference
mount, handle_params, handle_event, handle_asyncreferences/lifecycle.md
When to use assigns vs streams, AsyncResultreferences/assigns-streams.md
Function vs LiveComponent, slots, attrsreferences/components.md
Authorization per event, phx-value trustreferences/security.md

Review Checklist

Critical Issues

  • No socket copying into async functions (extract values first)
  • Every handle_event validates authorization
  • No sensitive data in assigns (visible in DOM)
  • phx-value data is validated (user-modifiable)

Lifecycle

  • Subscriptions wrapped in connected?(socket)
  • handle_params used for URL-based state
  • handle_async handles :loading and :error states

Data Management

  • Streams used for large collections (100+ items)
  • temporary_assigns for data not needed after render
  • AsyncResult patterns for loading states

Components

  • Function components preferred over LiveComponents
  • LiveComponents preserve :inner_block in update/2
  • Slots use proper attr declarations
  • phx-debounce on text inputs

Valid Patterns (Do NOT Flag)

  • Empty mount returning {:ok, socket} - Valid for simple LiveViews
  • Using assigns for small lists - Streams only needed for 100+ items
  • LiveComponent without update/2 - Default update/2 assigns all
  • phx-click without phx-value - Event may not need data
  • Inline function in heex - Valid for simple transforms

Context-Sensitive Rules

IssueFlag ONLY IF
Missing debounceInput is text/textarea AND triggers server event
Use streamsCollection has 100+ items OR is paginated
Missing auth checkEvent modifies data AND no auth in mount

Critical Anti-Patterns

Socket Copying (MOST IMPORTANT)

elixir
# BAD - socket copied into async function
def handle_event("load", _, socket) do
  Task.async(fn ->
    user = socket.assigns.user  # Socket copied!
    fetch_data(user.id)
  end)
  {:noreply, socket}
end

# GOOD - extract values first
def handle_event("load", _, socket) do
  user_id = socket.assigns.user.id
  Task.async(fn ->
    fetch_data(user_id)  # Only primitive copied
  end)
  {:noreply, socket}
end

Missing Authorization

elixir
# BAD - trusts phx-value without auth
def handle_event("delete", %{"id" => id}, socket) do
  Posts.delete_post!(id)  # Anyone can delete any post!
  {:noreply, socket}
end

# GOOD - verify authorization
def handle_event("delete", %{"id" => id}, socket) do
  post = Posts.get_post!(id)

  if post.user_id == socket.assigns.current_user.id do
    Posts.delete_post!(post)
    {:noreply, stream_delete(socket, :posts, post)}
  else
    {:noreply, put_flash(socket, :error, "Unauthorized")}
  end
end

Before Submitting Findings

Use the issue format: [FILE:LINE] ISSUE_TITLE for each finding.

Load and follow review-verification-protocol before reporting any issue.

相关 Skills

前端设计

by anthropics

Universal
热门

面向组件、页面、海报和 Web 应用开发,按鲜明视觉方向生成可直接落地的前端代码与高质感 UI,适合做 landing page、Dashboard 或美化现有界面,避开千篇一律的 AI 审美。

想把页面做得既能上线又有设计感,就用前端设计:组件到整站都能产出,难得的是能避开千篇一律的 AI 味。

编码与调试
未扫描109.6k

网页构建器

by anthropics

Universal
热门

面向复杂 claude.ai HTML artifact 开发,快速初始化 React + Tailwind CSS + shadcn/ui 项目并打包为单文件 HTML,适合需要状态管理、路由或多组件交互的页面。

在 claude.ai 里做复杂网页 Artifact 很省心,多组件、状态和路由都能顺手搭起来,React、Tailwind 与 shadcn/ui 组合效率高、成品也更精致。

编码与调试
未扫描109.6k

网页应用测试

by anthropics

Universal
热门

用 Playwright 为本地 Web 应用编写自动化测试,支持启动开发服务器、校验前端交互、排查 UI 异常、抓取截图与浏览器日志,适合调试动态页面和回归验证。

借助 Playwright 一站式验证本地 Web 应用前端功能,调 UI 时还能同步查看日志和截图,定位问题更快。

编码与调试
未扫描109.6k

相关 MCP 服务

GitHub

编辑精选

by GitHub

热门

GitHub 是 MCP 官方参考服务器,让 Claude 直接读写你的代码仓库和 Issues。

这个参考服务器解决了开发者想让 AI 安全访问 GitHub 数据的问题,适合需要自动化代码审查或 Issue 管理的团队。但注意它只是参考实现,生产环境得自己加固安全。

编码与调试
82.9k

by Context7

热门

Context7 是实时拉取最新文档和代码示例的智能助手,让你告别过时资料。

它能解决开发者查找文档时信息滞后的问题,特别适合快速上手新库或跟进更新。不过,依赖外部源可能导致偶尔的数据延迟,建议结合官方文档使用。

编码与调试
51.5k

by tldraw

热门

tldraw 是让 AI 助手直接在无限画布上绘图和协作的 MCP 服务器。

这解决了 AI 只能输出文本、无法视觉化协作的痛点——想象让 Claude 帮你画流程图或白板讨论。最适合需要快速原型设计或头脑风暴的开发者。不过,目前它只是个基础连接器,你得自己搭建画布应用才能发挥全部潜力。

编码与调试
46.2k

评论