Present proposed code changes visually before implementing: before/after diffs, ASCII diagrams, comparison tables. Use when: "show me options for this change", "compare approaches", or a multi-file change needs a before/after comparison before editing. Not for planning questions with no concrete code change on the table.
79
100%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
When proposing non-trivial changes, make your reasoning visible before acting. The user should see what will change, why, and what alternatives were considered, before a single file is edited.
Follow writing-voice for prose sections.
Show what specific code will change. Use fenced diff blocks with file paths.
--- a/workspace.ts
+++ b/workspace.svelte.ts
@@ createWorkspaceState()
- let client = buildWorkspaceClient();
+ let client = $state(buildWorkspaceClient());
return {
get current() { return client; },
- async reset() {
- await client.wipe();
- client = buildWorkspaceClient();
+ async reset(options?: { key?: Uint8Array }) {
+ await client.dispose();
+ client = buildWorkspaceClient(options);
},
};Rules:
Show how components relate before and after the change. Use these characters: ┌ ┐ └ ┘ ─ │ ├ ┤ ┬ ┴ ┼ ▼ ▲ ──→ ←──
Before:
auth ──signOut()──→ workspace.reset() ──→ internally rebuilds
│ (self-manages lifecycle)
├── dispose()
├── wipe()
└── client = build()After:
auth ──signOut()──→ workspace.current.dispose()
setWorkspaceClient(build())
│
workspace is a reactive slot ← auth owns lifecycleDefault to an ownership diagram: who controls what, with arrows showing control flow. Reach for stacked layers, a data-flow shape, or an attempt A → B → C journey only when ownership is not the question being decided.
When multiple approaches exist, present them as a table with clear trade-off dimensions.
A: Self-managed B: Slot + builder C: Auth owns state
─────────────── ───────────────── ──────────────────
Who holds $state? workspace workspace auth
Who decides wipe? workspace auth (explicit) auth (explicit)
Circular deps? same as today same as today WORSE
God module risk? workspace neither authRules:
For non-trivial changes, present in this order:
| Change scope | What to show |
|---|---|
| 1 file | Just the diff, no diagram |
| 2-5 files | Diff of the hardest file + one diagram showing relationships |
| 5+ files | Full proposal: comparison table, diagrams, diffs for hardest 2-3 files |
| Architecture decision | Comparison table mandatory, even if only 2 options |
| Competing approaches | All three tools: diagram per approach, diff per approach, comparison table |
workspace.tscurrently self-manages its lifecycle. I'd split it: workspace becomes a reactive slot + builder, auth owns the lifecycle decisions.writes reads auth ──────────────────► workspace.svelte.ts ◄──── consumers builds, sets let client = $state() .current decides wipe set(newClient) via $effect--- a/workspace.ts (createWorkspaceState) +++ b/workspace.svelte.ts - let client = buildWorkspaceClient(); + let client = $state(buildWorkspaceClient());Trade-off: auth gains 10 lines of explicit lifecycle code, workspace loses its god-object methods. Net simpler because lifecycle decisions are visible at the call site.
Should I proceed with this, or keep workspace self-managed?
I'll refactor workspace.ts to use a slot pattern and move lifecycle management to auth.svelte.ts. This involves changing how the client is created and disposed, updating the state management to use $state, and modifying the reset function to accept an optional key parameter. The consumers will use $effect to automatically rebind when the workspace changes.
The bad version describes changes in prose. The good version shows them.
cb12bcc
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.