Automated summary
This skill pair-programs with a running re-frame application over shadow-cljs nREPL to inspect app-db, dispatch events, trace epochs, and hot-swap handlers live.
Strengths
- An empirical observe → inspect epoch → hypothesize → probe → compare loop instead of reading source and guessing
- Each epoch records the event, interceptor chain, effects, subscriptions that ran or hit cache, renders, and the app-db before/after diff
- Lets you test a handler, sub, or fx change via hot-swap or effect stub before committing the source edit
- Post-mortems search the recent epoch trail rather than asking the user to reconstruct repro steps
Limitations
- shadow-cljs only — Figwheel-main, lein-cljsbuild, and vanilla cljs builds are unsupported
- Assumes the app is already running in a browser tab under shadow-cljs watch
- Not useful for code paths outside re-frame, and discovery must be rerun each session (multiple builds require asking the user which to attach to)
Use it whenever a bug involves a live re-frame app: a UI that didn't update, app-db in a bad state, or needing to find the source behind a visible control.
Avoid it when the app isn't running yet, when the code under debug isn't routed through re-frame, or when the task is a source-only refactor with no behavioural verification.
Security analysis
CautionNo destructive commands, obfuscation, credential exfiltration, or safety-disabling instructions are present. The skill legitimately relies on powerful tooling (nREPL eval, runtime injection, app-db mutation, source edits) to debug a live application, which warrants caution rather than a risky rating; risk is bounded by the unimplemented script bodies, which a reviewer should inspect before listing.
- •`eval-cljs.sh` and `inject-runtime.sh` execute arbitrary CLJS inside the user's running application via nREPL — powerful, though it is the stated purpose of the skill.
- •`dispatch.sh` can fire arbitrary re-frame events at a live app, potentially triggering real side effects (HTTP calls, persistence) in the user's running system.
- •Includes `Write`/`Edit` with permission to modify the project's source files; combined with hot-swap guidance this could silently change app code.
- •All behavior is delegated to `scripts/*.sh` whose contents are not included in the manifest, so their actual implementations cannot be verified from this file alone.
- •Advises `reset!` on app-db and hot-swapping handlers as normal workflow — state-mutating operations on a developer's live app.
Examples
My cart total isn't updating after I apply a coupon. Attach to the running app, dispatch [:cart/apply-coupon "SPRING25"] with tracing, and show me the epoch — what changed in app-db and which subs actually re-ran vs hit cache?app-db has an empty :user/orders but I never cleared it. Search the recent epochs on my shadow-cljs build for the transition that emptied it and show me the handler source behind it.Before I touch source, hot-swap my :cart/apply-coupon handler with this version and dispatch it — does the :app-db/diff look right?name: re-frame-pair description: > Pair-program with a live re-frame application via shadow-cljs nREPL. Inspect app-db, dispatch events, hot-swap handlers, trace dispatches, read epoch data, time-travel, and perform post-mortems without source edits when probing. Use whenever the user asks about their running re-frame app or mentions: re-frame, app-db, dispatch, subscribe, reg-event, reg-sub, reg-fx, epoch, interceptor, re-frame-10x, re-com, shadow-cljs. allowed-tools:
- Bash(scripts/discover-app.sh *)
- Bash(scripts/app-summary.sh *)
- Bash(scripts/eval-cljs.sh *)
- Bash(scripts/console-tail.sh *)
- Bash(scripts/handler-source.sh *)
- Bash(scripts/inject-runtime.sh *)
- Bash(scripts/dispatch.sh *)
- Bash(scripts/trace-recent.sh *)
- Bash(scripts/watch-epochs.sh *)
- Bash(scripts/tail-build.sh *)
- Read
- Edit
- Write
- Grep
- Glob
re-frame-pair
You are pair-programming with a developer on a live, running re-frame application in a browser tab behind shadow-cljs watch.
Build tool: shadow-cljs only. re-frame-pair drives the runtime via
(shadow.cljs.devtools.api/cljs-eval ...)over nREPL. Figwheel-main, lein-cljsbuild, and vanilla cljs builds aren't supported. Ifdiscover-app.shreturns:reason :unsupported-build-tool, surface it verbatim — multi-build-tool support is tracked at #14.
The point isn't just reading app-db — it's closing the debug loop against the live runtime. Ask the running app which event fired, what changed in app-db, which effects fired, which subs re-ran or were served from cache, which views rendered, and where the source lives.
The Empirical Loop
Prefer this loop over reading source and guessing:
- Observe the current runtime state.
- Inspect the relevant epoch.
- Form a hypothesis.
- Probe with a dispatch, app-db read, hot-swap, side-effect stub, or REPL eval.
- Compare the new epoch with the baseline.
- Only then edit source.
Reach for the loop especially when:
- A UI didn't update, or its visible result is wrong.
app-dbended up in a bad state.- The user can't remember the path that caused a bug — search the recent epoch trail.
- You need to find the source behind a visible control.
- You want to test a handler / sub / fx change before committing it.
What is an epoch?
An epoch is the record of everything that happened in response to one dispatch — the event, interceptor chain, handler result, effects fired, subscriptions that ran or hit cache, components that rendered, and app-db before/after diff. The full field list lives in docs/skill/operations.md. Use compact :app-db/diff first; request full snapshots only when the diff isn't enough.
When Not To Use
- The app isn't running yet, so there's no live runtime to attach to.
- The code being debugged isn't routed through re-frame.
- The user wants pure source-only refactor work with no behavioural verification.
Quick Start
scripts/discover-app.sh
scripts/app-summary.sh
scripts/dispatch.sh --trace '[:cart/apply-coupon "SPRING25"]'
discover-app.sh is mandatory at the start of each session. It finds the nREPL port, switches to CLJS mode, injects the runtime namespace, and returns the app-db's top-level keys plus dispatch-ids of the most recent events. If it reports :warning :multiple-builds, ask the user which build to attach to before continuing.
Most sessions need only three ops — app-summary, dispatch, and last-epoch (via eval-cljs). For the full reference see docs/skill/operations.md.
Detail On Demand
| Question / task | Read |
|---|---|
| Operation names, command forms, epoch fields, console tags | docs/skill/operations.md |
| Post-mortem — how did app-db get here? Don't ask the user to reconstruct repro steps; search recent epochs for the bad transition, follow :parent-dispatch-id to walk the chain | docs/skill/post-mortems.md |
| UI didn't update; rendered output wrong; resolve a visible control to :src | docs/skill/ui-debugging.md |
| Runtime probing, hot-swap, time-travel, side-effect stubs (--stub flag) | docs/skill/probing-and-hot-swap.md |
| Source metadata; :no-source-meta / nil :event/source; offering the swap to re-frame.core-instrumented | docs/skill/source-meta.md |
| Form-by-form trace inside a handler / sub / fx (re-frame-debux — an optional source-printing instrumentation library) | docs/skill/debux.md |
| Errors, setup failures, :reason keyword translations, health checks | docs/skill/troubleshooting.md |
Operating Principles
- Read live state before guessing.
app-db/snapshot,trace/last-epoch, orapp-summaryfirst; hypothesis after. - Compare epochs, don't rely on intent. Capture the epoch, run the smallest change, compare.
- REPL access is your second mode. Hot-swap a handler / sub / fx, redefine a
defn, orreset!app-db. REPL changes are ephemeral; source edits stick. After a successful hot-swap, ask the user before transferring the patch to source. - After any source edit, wait for hot reload. Run
scripts/tail-build.sh --probe '<form>'before dispatching, or your next call may run against the pre-reload code. - Surface failures verbatim. Every script returns structured EDN. Translate
:reasonto plain English usingdocs/skill/troubleshooting.md.:reinjected? trueis informational, not an error — the runtime was re-shipped after a browser refresh. - Narrow detail as you go. Summaries first; drill in on request.
- Resolve UI references to
:src—re-com/button at app/cart/view.cljs:84grounds the conversation. - Prefer dedicated shims over raw
eval-cljs. Shims handle namespacing, quoting, and flag combinations. - Time-travel rewinds
app-dbonly — side effects already fired aren't reversed. Before anyundo/*op, check whether the cascade contained:http-xhrio/ navigation / etc., and warn the user. - Requires
re-frame.trace.trace-enabled? true. Ifdiscover-app.shreports:trace-enabled-false, almost every workflow degrades — fall back toapp-db/snapshotand dispatch only, and tell the user how to enable tracing (10x's install guide covers the:closure-definesflag). - Offer the source-meta swap when relevant. When you read source files and notice the host uses plain
re-frame.core(orre-frame.alpha), and a trace shows:no-source-metawhile the user is asking a "where did this come from?" question, offer to swap their:requiretore-frame.core-instrumented. Seedocs/skill/source-meta.md. - Drill into elision markers; don't treat them as data loss. Every cljs-eval response is wire-bounded — values that would exceed shadow-cljs's ~1MB printer cap are replaced in place with
{:rfp.wire/elided true :path [...] :cursor "<id>" :type ... :count ... :summary {...}}markers. The runtime keeps the full value buffered; fetch a slice witheval-cljs.sh '(re-frame-pair.runtime.wire/fetch-path "<cursor>" [<path>])'. The bash response also surfaces top-level:rfp.wire/cursorand:rfp.wire/elisionswhen an elision happened, and:rfp.wire/value-fits? falseflags it. Read the elision's:summaryfirst ({:type :map :count 84 :sample-keys [...]}) — usually that answers the question without needing to drill at all.
From the file to a first result
The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.
View the source and supporting filesThis download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.
1. Download the file
Download SKILL.mdFrom the root of a test project, save the file as .skill-downloads/re-frame-pair-ms2s7bia/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.
Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.
mkdir -p '.skill-downloads/re-frame-pair-ms2s7bia' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/re-frame-pair-ms2s7bia/download' --output '.skill-downloads/re-frame-pair-ms2s7bia/SKILL.md.part' && mv '.skill-downloads/re-frame-pair-ms2s7bia/SKILL.md.part' '.skill-downloads/re-frame-pair-ms2s7bia/SKILL.md'2. Check prerequisites
Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.
No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.
The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.
3. Load the skill
After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.
Claude Code
test -f '.skill-downloads/re-frame-pair-ms2s7bia/SKILL.md' && test -s '.skill-downloads/re-frame-pair-ms2s7bia/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/re-frame-pair' && cp -R '.skill-downloads/re-frame-pair-ms2s7bia' '.claude/skills/re-frame-pair'OpenSkills
OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.
Official OpenSkills installationopenskills install './.skill-downloads/re-frame-pair-ms2s7bia'openskills read 're-frame-pair-ms2s7bia'Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.
For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.
openskills syncManual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.
4. Try a first task
Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:
Read .skill-downloads/re-frame-pair-ms2s7bia/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.
React Hook Form Best Practices
Development
Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.
Emotion to Mantine Migration
Development
Migrate Emotion styled-components to Mantine components with style props and CSS modules. Use when converting .styled.tsx files or removing @emotion imports.
Scope Creep Detector
Development
Analyzes git diffs against a stated intent to detect scope creep, unrelated files, broad PRs, and oversized changes, then suggests keep, split, or justify actions.