re-frame-pair

VérifiéPrudence

Programmez en binôme avec une application re-frame en direct via shadow-cljs nREPL. Inspectez app-db, dispatchez des événements, échangez des handlers, tracez les dispatches et effectuez des post-mortems.

Spar Skills Guide Bot
DeveloppementAvancé
27/07/2026
Claude Code
#re-frame#clojurescript#debugging#repl#shadow-cljs

Recommandé pour

Synthèse automatique

Ce skill permet de pair-programmer avec une application re-frame en cours d'exécution via le nREPL de shadow-cljs, pour inspecter app-db, dispatcher des événements, tracer les epochs et remplacer des handlers à chaud.

Points forts

  • Boucle empirique observe → inspecte l'epoch → hypothèse → sonde → compare, plutôt que de lire le code et deviner
  • L'epoch capture l'événement, la chaîne d'intercepteurs, les effets, les abonnements exécutés ou servis par le cache, les rendus et le diff app-db avant/après
  • Permet de tester un handler, un sub ou un fx par hot-swap ou stub d'effet avant de modifier la source
  • Le post-mortem s'appuie sur la trace des epochs récentes au lieu de demander à l'utilisateur de reconstituer les étapes de reproduction

Limites

  • Ne fonctionne qu'avec shadow-cljs : Figwheel-main, lein-cljsbuild et les builds cljs vanilla ne sont pas pris en charge
  • Suppose que l'application tourne déjà dans un onglet de navigateur derrière shadow-cljs watch
  • Sans objet pour du code qui ne passe pas par re-frame, et le script de découverte doit être relancé à chaque session (ambiguïté possible en cas de builds multiples)
Quand l'utiliser

À utiliser dès qu'un bug concerne une application re-frame en cours d'exécution : UI qui ne se met pas à jour, app-db dans un mauvais état, ou besoin de retrouver la source derrière un contrôle visible.

Quand l'éviter

À éviter si l'application n'est pas encore lancée, si le code ne transite pas par re-frame, ou s'il s'agit d'un simple refactor de source sans vérification comportementale.

Analyse de sécurité

Prudence
Score qualité82/100

No 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.

Points d'attention
  • •`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.
Comment cette analyse est faite

Exemples

Why the UI didn't update
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?
Post-mortem on bad app-db
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.
Test a handler fix before editing
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. If discover-app.sh returns :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:

  1. Observe the current runtime state.
  2. Inspect the relevant epoch.
  3. Form a hypothesis.
  4. Probe with a dispatch, app-db read, hot-swap, side-effect stub, or REPL eval.
  5. Compare the new epoch with the baseline.
  6. Only then edit source.

Reach for the loop especially when:

  • A UI didn't update, or its visible result is wrong.
  • app-db ended 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, or app-summary first; 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, or reset! 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 :reason to plain English using docs/skill/troubleshooting.md. :reinjected? true is 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:84 grounds the conversation.
  • Prefer dedicated shims over raw eval-cljs. Shims handle namespacing, quoting, and flag combinations.
  • Time-travel rewinds app-db only — side effects already fired aren't reversed. Before any undo/* op, check whether the cascade contained :http-xhrio / navigation / etc., and warn the user.
  • Requires re-frame.trace.trace-enabled? true. If discover-app.sh reports :trace-enabled-false, almost every workflow degrades — fall back to app-db/snapshot and dispatch only, and tell the user how to enable tracing (10x's install guide covers the :closure-defines flag).
  • Offer the source-meta swap when relevant. When you read source files and notice the host uses plain re-frame.core (or re-frame.alpha), and a trace shows :no-source-meta while the user is asking a "where did this come from?" question, offer to swap their :require to re-frame.core-instrumented. See docs/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 with eval-cljs.sh '(re-frame-pair.runtime.wire/fetch-path "<cursor>" [<path>])'. The bash response also surfaces top-level :rfp.wire/cursor and :rfp.wire/elisions when an elision happened, and :rfp.wire/value-fits? false flags it. Read the elision's :summary first ({:type :map :count 84 :sample-keys [...]}) — usually that answers the question without needing to drill at all.

Du fichier au premier essai

Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.

Consulter la source et ses fichiers annexes

Ce téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.

1. Télécharger le fichier

Télécharger SKILL.md

Depuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/re-frame-pair-ms2s7bia/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.

Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.

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. Vérifier les prérequis

Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.

Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.

Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.

3. Charger la skill

Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.

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 doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.

Installation officielle d’OpenSkills
openskills install './.skill-downloads/re-frame-pair-ms2s7bia'

openskills read 're-frame-pair-ms2s7bia'

La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.

Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.

openskills sync

Mode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.

4. Faire un premier essai

Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :

Lis .skill-downloads/re-frame-pair-ms2s7bia/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.

Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.

Skills similaires