skills.rest
day8
day8OFFICIAL
Explore all skills by this author →
GitHub

re-frame2-xray

Routes debugging questions to the correct Xray devtools panel, launch mode, and chrome control.

49|Updated May 7, 2026
Search Tags:#debugging#devtools#clojurescript#xray#claude-code-skill#re-frame2#tab routing
One-click install
npx skills add https://github.com/day8/re-frame2 --skill re-frame2-xray-day8
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: re-frame2-xray
Source: https://github.com/day8/re-frame2/tree/main/skills/re-frame2-xray
Command: npx skills add https://github.com/day8/re-frame2 --skill re-frame2-xray-day8

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developers using Xray, the re-frame2 in-app devtools panel, often don't know which of its 10 Dynamic tabs or 5 Static tabs answers a given debugging question, or how to launch and navigate the panel. This Skill maps a concrete debugging question to the one surface to open first, with the reason and the first interaction. ## Core Features & Use Cases - Question-first tab routing: A route card maps the evidence sought (one dispatch's cascade, changed app-db state, render causes, machine transitions, server state, dependency graphs) to the correct Dynamic or Static tab. - Launch guidance: Covers the true-inline preload panel, the open-overlay! fallback for hosts without a layout column, the pop-out window, programmatic init!, wired hotkeys, and the Dynamic ↔ Static mode toggle. - Chrome reference: Explains the L1 frame picker, LIVE/RETRO spine, passive inspect vs explicit Reset rewind, filter pills, command palette, and Settings popup. - Use Case: A developer asks "which Xray panel shows when [:cart :items] last changed?" and gets routed directly to the Dynamic app-db tab with the inline diff interaction, instead of a full inventory dump. ## Quick Start Ask which Xray panel shows why a component re-rendered, and receive the Dynamic Views tab as the first surface with its render-cause chips.

Frequently Asked Questions about re-frame2-xray

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

FAQPage Schema
How do I open Xray in a re-frame2 dev build?▼

Add the Xray preload to shadow-cljs :devtools/preloads and a [data-rf-xray-host] column in the app layout; Xray auto-opens on page load. The open-overlay! fallback exists only for hosts that cannot provide a layout column.

Which Xray tab shows what a single dispatch did?▼

The Dynamic Epoch tab is the default landing tab and shows the full cascade of one dispatch, including where it failed and what effects fired. Pick the frame, then click the event row in the L2 list; the Trace tab is the natural next step for raw op ordering.

What is the difference between Xray Dynamic and Static mode?▼

Dynamic mode is the event-spine shell with 10 tabs focused on what happened in a dispatch, while Static mode holds 5 registry-browse catalogues (Machines, Routes, Schemas, Flows, Interceptors). Toggle between them with the L1 mode pill or Cmd/Ctrl+Shift+M.

How do I rewind to an earlier epoch in Xray?▼

Picking an epoch in the L2 list is passive inspection that rebases panels without moving the live frame. Live rewind is the explicit Reset button on the L3 ribbon, which reinstalls the focused epoch's whole frame-state via restore-epoch!.

When should I use re-frame2-pair instead of Xray?▼

Use re-frame2-pair whenever an AI agent should inspect or change the running app, including read-only operations like reading a subscription or snapshotting state. Xray is the human-facing panel; Pair is the agent-facing runtime companion.

Why did the Xray panel not appear on page load?▼

The most common cause is a missing layout host: nothing matched [data-rf-xray-host] when the adapter became ready. Check the console error or call window.day8.re_frame2_xray.status(), whose diagnostic reason names the failure and recovery options.

Related Skills

Explore More Software Engineering Skills→
open-haxopen-hax
6

shadow-cljs-debug

Diagnose shadow-cljs compilation and interop errors in ClojureScript projects.

Official
Intermediate
duwenjiduwenji

agent-tracing

Inspect JSON execution snapshots and step-level traces from .agent-tracing.

Community
Advanced
TanStackTanStack
28.3k

vue/compose-with-tanstack-devtools

Register Vue TanStack Table instances with TanStack Devtools for live state inspection.

Official
Intermediate
Kobayashi2003Kobayashi2003
1

chrome-devtools-automation

Automates the Chrome DevTools front end over CDP to switch panels, click UI elements, and capture screenshots.

Community
Advanced