debug-ui

Diagnose LiveView UI instability by inspecting socket assigns and render activity via Loopyard RPC.

21|2|Updated Mar 15, 2026
One-click install
npx skills add https://github.com/loopyard/loopyard --skill debug-ui-loopyard
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: debug-ui
Source: https://github.com/loopyard/loopyard/tree/main/.claude/skills/debug-ui
Command: npx skills add https://github.com/loopyard/loopyard --skill debug-ui-loopyard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses why LiveView UI flashes by inspecting the running app via RPC, helping engineers identify whether the issue is data, rendering, or CSS.

Core Features & Use Cases

  • RPC-based LiveView introspection: inspect assigns, renders, and live state from a running Loopyard session.
  • Guided debugging recipes: follow structured steps to determine whether data changes, render triggers, or layout/CSS factors are the cause.
  • Operational context for teams: enables co-working by sharing reproducible inspection commands and results.

Quick Start

Run the RPC diagnostic on the running Loopyard server to observe socket assigns and render activity in real time.

Frequently Asked Questions about debug-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug Phoenix LiveView UI flashing and flickering issues?

Debug LiveView UI flashing by streaming live state and render activity through RPC. This diagnoses whether data changes, render triggers, or CSS layout factors cause the unexpected updates by inspecting socket assigns in real time.

Why does my Phoenix LiveView keep rendering unexpectedly when assigns appear overwritten?

LiveView renders unexpectedly when assigns are overwritten or misenriched. RPC-based introspection inspects the running app to observe socket assigns and render counts, pinpointing whether data changes or render triggers drive the flickering.

Do I need a running Loopyard instance to diagnose LiveView render counts via RPC?

You need a running Loopyard instance, Phoenix LiveView, and access to the Loopyard RPC endpoint to diagnose render counts. These prerequisites enable the inspection of socket assigns and related events for UI instability.

What is the best way to inspect LiveView socket assigns in a running Phoenix app?

The best way to inspect LiveView socket assigns is using RPC-based introspection. It streams live state and render activity from a running Loopyard session to identify if data, rendering, or CSS factors cause UI flashes.

Can I share Phoenix LiveView debugging results with my team for operational context?

You can share debugging results with your team for operational context. The RPC inspection provides reproducible commands and results that enable co-working and collaborative diagnosis of LiveView UI instability.