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)
À 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.
À é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é
PrudenceNo 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.
Exemples
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.
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 annexesCe 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.mdDepuis 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’OpenSkillsopenskills 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 syncMode 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.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.