@esthernandez/vibe-cartographer 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/marketplace.json +21 -0
- package/CHANGELOG.md +122 -0
- package/INSTALL.md +132 -0
- package/README.md +148 -0
- package/docs/self-evolving-plugins-framework.md +347 -0
- package/package.json +30 -0
- package/plugins/vibe-cartographer/.claude-plugin/plugin.json +6 -0
- package/plugins/vibe-cartographer/CLAUDE.md +24 -0
- package/plugins/vibe-cartographer/architecture/README.md +41 -0
- package/plugins/vibe-cartographer/architecture/default-patterns.md +87 -0
- package/plugins/vibe-cartographer/architecture/example-architecture.md +80 -0
- package/plugins/vibe-cartographer/skills/build/SKILL.md +198 -0
- package/plugins/vibe-cartographer/skills/checklist/SKILL.md +217 -0
- package/plugins/vibe-cartographer/skills/guide/SKILL.md +207 -0
- package/plugins/vibe-cartographer/skills/guide/references/eval-rubric.md +103 -0
- package/plugins/vibe-cartographer/skills/guide/references/prd-guide.md +100 -0
- package/plugins/vibe-cartographer/skills/guide/references/spec-patterns.md +133 -0
- package/plugins/vibe-cartographer/skills/guide/templates/builder-profile-template.md +36 -0
- package/plugins/vibe-cartographer/skills/guide/templates/checklist-template.md +37 -0
- package/plugins/vibe-cartographer/skills/guide/templates/prd-template.md +49 -0
- package/plugins/vibe-cartographer/skills/guide/templates/reflection-template.md +55 -0
- package/plugins/vibe-cartographer/skills/guide/templates/scope-template.md +29 -0
- package/plugins/vibe-cartographer/skills/guide/templates/spec-template.md +68 -0
- package/plugins/vibe-cartographer/skills/iterate/SKILL.md +97 -0
- package/plugins/vibe-cartographer/skills/onboard/SKILL.md +329 -0
- package/plugins/vibe-cartographer/skills/prd/SKILL.md +112 -0
- package/plugins/vibe-cartographer/skills/reflect/SKILL.md +196 -0
- package/plugins/vibe-cartographer/skills/scope/SKILL.md +122 -0
- package/plugins/vibe-cartographer/skills/session-logger/SKILL.md +109 -0
- package/plugins/vibe-cartographer/skills/spec/SKILL.md +127 -0
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
# The Self-Evolving Plugin Framework
|
|
2
|
+
|
|
3
|
+
**A thesis and playbook for building AI plugins that get better every time you use them.**
|
|
4
|
+
|
|
5
|
+
*626Labs — Estevan Hernandez*
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Part I — Thesis
|
|
10
|
+
|
|
11
|
+
### The Core Claim
|
|
12
|
+
|
|
13
|
+
**A plugin should be more useful on its tenth run than on its first — not because the user learned it, but because it learned the user.**
|
|
14
|
+
|
|
15
|
+
Static plugins are frozen artifacts. Self-evolving plugins are living tools that repair their own friction, teach themselves your context, and reshape their behavior in the background so that every invocation compounds on the last.
|
|
16
|
+
|
|
17
|
+
### Why Static Plugins Quietly Rot
|
|
18
|
+
|
|
19
|
+
Most AI tooling in 2026 is still software with a language model stapled on. You install a plugin, it asks the same onboarding questions it asked the last user, it makes the same wrong assumption about your stack the forty-seventh time you run it, and it greets you every morning like a golden retriever with amnesia.
|
|
20
|
+
|
|
21
|
+
The specific failure pattern:
|
|
22
|
+
|
|
23
|
+
- **Zero memory across runs.** Your `/scaffold` command doesn't know you always use pnpm, Zod, and tRPC. You tell it every time. A tax on your attention that compounds across every invocation.
|
|
24
|
+
- **Generic defaults forever.** The plugin was tuned for the median user on day one. You are not the median user on day ninety. The gap between what it assumes and what you need widens monotonically.
|
|
25
|
+
- **No feedback loop from failure.** When the plugin hits a dead end — a command that didn't work, a prompt that produced garbage, a workflow the user rage-quit halfway through — that signal is discarded. The next user walks into the same pit.
|
|
26
|
+
- **Knowledge frozen at ship time.** The plugin shipped in March knows nothing about the library you adopted in July. The LLM inside it might, but the plugin's scaffolding — its prompts, examples, defaults — is embalmed.
|
|
27
|
+
- **Identical onboarding forever.** Every `/onboard` feels the same because it *is* the same.
|
|
28
|
+
|
|
29
|
+
The net effect: a tool that should be getting sharper is getting duller relative to its potential. The user adapts to the plugin instead of the plugin adapting to the user — which is backwards for something that ships with a reasoning engine inside it.
|
|
30
|
+
|
|
31
|
+
### The Three Pillars
|
|
32
|
+
|
|
33
|
+
Self-evolution isn't one thing. It's three distinct capabilities that get conflated, and conflating them is why most attempts to build "smart" plugins collapse into vague "it has memory" handwaving. Rigor matters.
|
|
34
|
+
|
|
35
|
+
#### Self-Repair — Closing loops on failure
|
|
36
|
+
|
|
37
|
+
Self-repair is when the plugin **notices friction and fixes it**. When a command errors out, a generated artifact gets rejected, a user bails halfway through a flow — the plugin notices, diagnoses, and adjusts.
|
|
38
|
+
|
|
39
|
+
*Example:* `/spec` generates a technical spec and the user edits 60% of the "Non-Goals" section before accepting it. A self-repairing plugin notices the edit delta, infers that its Non-Goals template is badly calibrated for this domain, and adjusts the template for next time. No bug report filed. The friction route gets paved over.
|
|
40
|
+
|
|
41
|
+
Self-repair is reactive. It's the plugin's immune system.
|
|
42
|
+
|
|
43
|
+
#### Self-Teach — Building a private model of the user
|
|
44
|
+
|
|
45
|
+
Self-teach is about **building a rich model of the user and their world** that gets deeper over time. Not just "remember that Este uses pnpm" — that's a sticky note. Self-teach is "Este ships plugins, his plugins are usually spec-first, he values terse output, he works in bursts of 2-3 hours, and when he says 'make it sharper' he means cut word count by 30%."
|
|
46
|
+
|
|
47
|
+
*Example:* After watching the user accept, reject, and edit ten specs, the plugin builds a user-specific style profile. The 11th spec is drafted *through* that profile before the user ever sees it. They don't tell it to. It just happens.
|
|
48
|
+
|
|
49
|
+
Self-teach is proactive. It's the plugin's education.
|
|
50
|
+
|
|
51
|
+
#### Self-Evolve — Changing the plugin's own shape
|
|
52
|
+
|
|
53
|
+
Self-evolve is the deepest and most dangerous of the three. It's when the plugin **modifies its own behavior, commands, prompts, or capabilities** based on what it has repaired and learned. Self-repair fixes leaks. Self-teach builds knowledge. Self-evolve rewrites the tool itself.
|
|
54
|
+
|
|
55
|
+
*Example:* The plugin notices the user has never once run `/retrospective` but runs `/spec` daily and always follows it with manual testing. Over time, it proposes — and with consent, implements — a new `/spec-and-verify` command that fuses the two workflows they actually do. Or it silently demotes `/retrospective` from the menu. The plugin's *surface area* changes to match the user's actual usage.
|
|
56
|
+
|
|
57
|
+
Self-evolve is architectural. It's the plugin's metamorphosis.
|
|
58
|
+
|
|
59
|
+
### What "Better" Actually Means
|
|
60
|
+
|
|
61
|
+
You cannot evolve toward nothing. A plugin that mutates without a compass is just chaos with a changelog. The north star has measurable dimensions:
|
|
62
|
+
|
|
63
|
+
- **Friction delta per run.** Keystrokes, confirmations, corrections, re-runs. Trend: down.
|
|
64
|
+
- **Time-to-first-useful-output.** Invocation to "this is what I wanted." Trend: down.
|
|
65
|
+
- **Repeat question rate.** How often does the plugin ask something it could infer or remember? Trend: asymptotically toward zero for stable facts.
|
|
66
|
+
- **Personalization depth.** Does output look like something *the user* would have written? Trend: up.
|
|
67
|
+
- **Unused surface area.** Commands, flags, prompts the user never touches. Should shrink or hide.
|
|
68
|
+
- **Recovery speed.** When it gets something wrong, how fast does it correct — this run, next run, or never? Measure in runs, not months.
|
|
69
|
+
|
|
70
|
+
If a proposed self-evolution doesn't move one of these numbers, it isn't evolution. It's noise.
|
|
71
|
+
|
|
72
|
+
### The Honest Limits
|
|
73
|
+
|
|
74
|
+
- **Consent is non-negotiable for behavior drift.** Self-repair can happen silently. Self-teach can happen silently. Self-evolve — when the plugin changes *what it does* — must be surfaced. The contract: "I noticed X, I'd like to do Y from now on, yes/no/show me more."
|
|
75
|
+
- **Privacy is a cliff, not a slope.** Everything the plugin learns is a liability as much as an asset. Local-first storage, user-inspectable memory, one-command wipe, no silent exfiltration.
|
|
76
|
+
- **Taste can't be self-taught.** A plugin can learn that you prefer terse output. It cannot learn *why* a spec is bad in a way that requires product judgment. Strategic decisions — "is this the right feature to build" — stay human.
|
|
77
|
+
- **Drift without anchors is entropy.** There need to be invariants — core behaviors, safety rails, guardrails on tone — that cannot self-modify. The evolving parts orbit a stable core.
|
|
78
|
+
- **Cold starts still exist.** The tenth run can be magical. The first run is still the first run. Day-one UX is still day-one UX.
|
|
79
|
+
- **Evolution is not a substitute for good defaults.** Self-evolution is a multiplier on a solid foundation, not a patch on a broken one.
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## Part II — The Pattern Catalog
|
|
84
|
+
|
|
85
|
+
A catalog of concrete, implementable patterns. Each one is shippable by a single developer using markdown SKILL files and JSON/YAML data files. Heavier infrastructure is called out explicitly.
|
|
86
|
+
|
|
87
|
+
### 1. Persistent Builder Profile
|
|
88
|
+
|
|
89
|
+
**Pillar:** Self-teach
|
|
90
|
+
**Problem:** Every new project restarts the plugin from zero. The user re-answers the same onboarding questions on every invocation.
|
|
91
|
+
|
|
92
|
+
**Mechanism:** The plugin writes a single canonical profile file to a global location: `~/.claude/plugins/data/<plugin-name>/profile.json`. On plugin start, the SKILL reads this file *first*, before any onboarding. Holds durable facts: name, experience level, preferred stack, tone, pacing, and a `last_updated` timestamp. Onboarding questions are conditional: "if field X is missing or older than N months, ask; otherwise skip."
|
|
93
|
+
|
|
94
|
+
**Example:** User runs `/onboard` from Vibe Cartographer on a new project. The plugin reads the profile, sees they're a senior builder who prefers terse output and TypeScript, and skips the 6-question onboarding. Greets them by name and jumps to the first real step.
|
|
95
|
+
|
|
96
|
+
**When to use / when not:** Use for stable facts that survive across projects. Don't use for project-specific state. Don't store secrets.
|
|
97
|
+
|
|
98
|
+
### 2. Per-Project Memory Scroll
|
|
99
|
+
|
|
100
|
+
**Pillar:** Self-teach, self-repair
|
|
101
|
+
**Problem:** The global profile knows *who* the user is, but not *what this project is*. Without project-scoped memory, the plugin re-derives context every run.
|
|
102
|
+
|
|
103
|
+
**Mechanism:** Each project gets a `.<plugin-name>/project.json` in the repo root. Holds project-specific state: detected stack, open blockers, last health score, decisions the user has made about *this* codebase. The SKILL reads project memory after the global profile and merges into a working context. Include `schema_version` for migrations.
|
|
104
|
+
|
|
105
|
+
**Example:** The plugin remembers that on the `vibe-cartographer` repo specifically, the user already answered "skip the LADDER intro" and flagged three known friction points. Next run loads those directly.
|
|
106
|
+
|
|
107
|
+
**When to use / when not:** Use when project state is durable. Avoid for ephemeral session state.
|
|
108
|
+
|
|
109
|
+
### 3. Layered Memory Resolution
|
|
110
|
+
|
|
111
|
+
**Pillar:** Self-teach
|
|
112
|
+
**Problem:** Multiple sources of truth (session, project, global profile) can contradict. Which wins?
|
|
113
|
+
|
|
114
|
+
**Mechanism:** Define strict precedence in the SKILL: **session > project > user profile > plugin defaults**. Resolve each field by walking layers from most-specific to least-specific. Implement as an explicit `resolve_context` step with a table showing which field comes from which layer. When the user overrides a field mid-session, only the session layer mutates.
|
|
115
|
+
|
|
116
|
+
**Example:** Global profile says `tone: terse`. In this project, the user once said "be more verbose about database stuff" — that's in project memory. For this session, they say "go full terse today" — session wins, but tomorrow's run is back to verbose-on-DB.
|
|
117
|
+
|
|
118
|
+
**When to use / when not:** Use any time you have more than one memory source. Never skip the precedence table.
|
|
119
|
+
|
|
120
|
+
### 4. Memory Decay and Refresh
|
|
121
|
+
|
|
122
|
+
**Pillar:** Self-repair
|
|
123
|
+
**Problem:** Stored preferences go stale. A user who was a beginner 18 months ago isn't one now.
|
|
124
|
+
|
|
125
|
+
**Mechanism:** Every memory field carries a `last_confirmed` timestamp. Define decay policy per field type: stack preferences refresh every 90 days, experience level every 180, tone never (user sets explicitly). When past TTL, mark `stale: true` — don't delete — and opportunistically ask for confirmation at a low-friction moment. Re-stamp regardless of answer.
|
|
126
|
+
|
|
127
|
+
**Example:** Plugin notices `preferred_stack: "Next.js 13"` was last confirmed 7 months ago. Next session, casually asks "still Next.js, or on something else now?" and updates.
|
|
128
|
+
|
|
129
|
+
**When to use / when not:** Use for preferences that realistically drift. Don't decay identity fields. Don't ask more than one decay question per session.
|
|
130
|
+
|
|
131
|
+
### 5. Reflection Loop
|
|
132
|
+
|
|
133
|
+
**Pillar:** Self-teach, self-evolve
|
|
134
|
+
**Problem:** The plugin has no idea whether the last run actually helped.
|
|
135
|
+
|
|
136
|
+
**Mechanism:** At the end of each meaningful run, trigger a short reflection: 2-3 targeted questions, not a survey. Specific questions beat general ones. Answers write to `reflections.jsonl` — append-only. Entry includes timestamp, plugin version, question, answer. Classify runs: `helpful` / `neutral` / `frustrating`.
|
|
137
|
+
|
|
138
|
+
**Example:** After a session, the plugin asks "Was the onboarding the right length today?" User says "too long, skip the stack question next time." Line appends to the log.
|
|
139
|
+
|
|
140
|
+
**When to use / when not:** Use when the plugin has a natural end point. Don't reflection-prompt inside long flows. Max 2-3 questions. Skip if last reflection was <24h ago.
|
|
141
|
+
|
|
142
|
+
### 6. Friction Log
|
|
143
|
+
|
|
144
|
+
**Pillar:** Self-repair, self-evolve
|
|
145
|
+
**Problem:** Users hit papercuts they don't bother to report.
|
|
146
|
+
|
|
147
|
+
**Mechanism:** Any time the agent detects friction — user cancels mid-flow, overrides a default, asks a clarifying question the SKILL should have preempted — write a structured entry to `friction.jsonl`. Schema: `{timestamp, plugin_version, friction_type, symptom, agent_guess_at_cause}`. Implicit feedback — user does nothing. Be conservative: only log clear friction, not every correction.
|
|
148
|
+
|
|
149
|
+
**Example:** User cancels the onboarding flow three times on different projects. Each cancel writes `friction_type: "onboarding_abandoned"`. When these accumulate, the evolution pattern surfaces them.
|
|
150
|
+
|
|
151
|
+
**When to use / when not:** Use when the signal is clear. Don't log every correction. Cap and rotate.
|
|
152
|
+
|
|
153
|
+
### 7. Version Skew Self-Check
|
|
154
|
+
|
|
155
|
+
**Pillar:** Self-repair
|
|
156
|
+
**Problem:** Data files written by v0.3 may not match what v0.5 expects. Plugin crashes or silently produces wrong results.
|
|
157
|
+
|
|
158
|
+
**Mechanism:** Every data file includes `schema_version`. On read, SKILL checks version against expected. If they match, proceed. If older, run a named migration and re-stamp. If newer than the plugin, stop and warn. Migrations are idempotent and leave a `.bak` of the pre-migration file.
|
|
159
|
+
|
|
160
|
+
**Example:** User upgrades from 0.3 to 0.5. On first run, SKILL reads `profile.json`, sees `schema_version: 1`, runs v1→v2 migration (adds `pacing` field with default), stamps `schema_version: 2`, continues.
|
|
161
|
+
|
|
162
|
+
**When to use / when not:** Mandatory for any plugin that persists data across versions. Always back up.
|
|
163
|
+
|
|
164
|
+
### 8. Plugin Self-Test
|
|
165
|
+
|
|
166
|
+
**Pillar:** Self-repair
|
|
167
|
+
**Problem:** SKILL files rot silently. Referenced files get deleted, commands get renamed, paths shift.
|
|
168
|
+
|
|
169
|
+
**Mechanism:** Ship a `self-test` SKILL or subcommand. Runs on demand (or weekly on first invocation). Walks a checklist: do referenced files exist? Do commands resolve? Do data files parse against schema? Writes to `selftest.log`. Surface failures as short report — "2 issues found, want me to fix?" — not silent failure.
|
|
170
|
+
|
|
171
|
+
**Example:** Monthly self-test detects `skills/ladder/intro.md` was renamed to `onboarding.md` but the main SKILL still references the old path. Offers to patch.
|
|
172
|
+
|
|
173
|
+
**When to use / when not:** Use for any plugin with multiple SKILL files or external data. Don't self-test every invocation.
|
|
174
|
+
|
|
175
|
+
### 9. Skip-History Learning
|
|
176
|
+
|
|
177
|
+
**Pillar:** Self-teach
|
|
178
|
+
**Problem:** The plugin keeps offering steps the user always skips.
|
|
179
|
+
|
|
180
|
+
**Mechanism:** Every optional branch logs to `choices.jsonl`: `{step_name, offered, chosen}`. After N observations (3), if consistently unchosen, mark `auto_skip: true` in the profile. Step stays available on explicit request. Leave a quiet note: "skipping LADDER intro — you've opted out 3 times; say 'show intro' to bring it back."
|
|
181
|
+
|
|
182
|
+
**Example:** User skips the onboarding preamble three times. Fourth run silently skips it, with a one-line acknowledgment.
|
|
183
|
+
|
|
184
|
+
**When to use / when not:** For non-essential steps. Never auto-skip correctness gates (schema migrations, safety checks, confirmations).
|
|
185
|
+
|
|
186
|
+
### 10. Agent-Authored Changelog
|
|
187
|
+
|
|
188
|
+
**Pillar:** Self-evolve
|
|
189
|
+
**Problem:** The plugin accumulates signals but has no mechanism to propose changes to itself.
|
|
190
|
+
|
|
191
|
+
**Mechanism:** A `propose-evolution` SKILL reads reflection log, friction log, and skip history and produces a markdown **proposal document** at `proposed-changes.md`. Each proposal has: observation, pattern count, proposed SKILL edit (diff-style), justification. User reviews, accepts/rejects, then a second `apply-evolution` step patches the SKILL. **Never auto-apply.** Applied proposals move to `applied-changes.md`.
|
|
192
|
+
|
|
193
|
+
**Example:** After two weeks: "Onboarding abandoned 5/6 times when profile is complete and fresh. Suggest: skip onboarding when profile is complete and <90 days fresh. Edit to `onboard/SKILL.md` attached." User says yes, agent patches.
|
|
194
|
+
|
|
195
|
+
**When to use / when not:** Use when you have feedback volume to see patterns (weeks of use). Never auto-apply. Extra confirmation for safety-critical logic.
|
|
196
|
+
|
|
197
|
+
### 11. Shared User Profile Bus
|
|
198
|
+
|
|
199
|
+
**Pillar:** Self-teach, cross-plugin
|
|
200
|
+
**Problem:** Every plugin maintaining its own profile means the user teaches the same fact (name, tone, experience) to every plugin independently.
|
|
201
|
+
|
|
202
|
+
**Mechanism:** Designate a single canonical profile file (`~/.claude/profiles/builder.json`) as the **shared bus**. Plugins read shared fields but write to their own plugin-scoped namespace: `{shared: {name, tone, ...}, plugins: {"vibe-cartographer": {...}, "vibe-doc": {...}}}`. Shared fields only update through a named `update_shared_profile` step defined once and referenced by all plugins.
|
|
203
|
+
|
|
204
|
+
**Example:** User updates preferred tone to "terse" via Vibe Doc. Next run of Vibe Cartographer reads the same `shared.tone` and adapts immediately.
|
|
205
|
+
|
|
206
|
+
**When to use / when not:** Use when you have 2+ plugins with overlapping context. Plugin-specific state stays in `plugins.<name>`, never in `shared`. If two plugins disagree on a shared field, refuse the conflicting write and surface it.
|
|
207
|
+
|
|
208
|
+
### 12. Coordination Beacons
|
|
209
|
+
|
|
210
|
+
**Pillar:** Cross-plugin, self-teach
|
|
211
|
+
**Problem:** Plugins operating on the same project can't see each other's work.
|
|
212
|
+
|
|
213
|
+
**Mechanism:** Each plugin writes a **beacon** to `.626labs/beacons.jsonl` at the project level. Schema: `{timestamp, plugin, event, summary}`. High-signal events only: `run_completed`, `decision_logged`, `friction_detected`, `evolution_proposed`. Other plugins read last N beacons on startup for situational awareness. Flat append-only log — not pub/sub.
|
|
214
|
+
|
|
215
|
+
**Example:** The commit plugin starts, reads beacons, sees that Vibe Cartographer flagged "three HIGH-risk items still open" two hours ago, mentions it in the pre-commit summary: "heads up, the cartographer has open HIGH items — sure you want to ship?"
|
|
216
|
+
|
|
217
|
+
**When to use / when not:** Use when plugins naturally share project context. Not for real-time coordination — this is a log, not a channel. Rotate weekly. Heavier coordination needs real infrastructure, out of scope.
|
|
218
|
+
|
|
219
|
+
### Catalog-Wide Invariants
|
|
220
|
+
|
|
221
|
+
- **The user is the final arbiter of self-evolution.** Patterns 10 and 11 have user-in-the-loop checkpoints for a reason.
|
|
222
|
+
- **Every data file carries a schema version.** Make it the first field, always.
|
|
223
|
+
- **Prefer append-only logs over mutable state for feedback capture.** Logs are debuggable, rotatable, greppable.
|
|
224
|
+
- **Reflection is cheap, changes are not.** Capture a lot of feedback signal. Don't translate every signal into a SKILL edit.
|
|
225
|
+
- **Cross-plugin coordination stays flat.** No central service, no daemon, no message bus. Shared JSON + append-only log is the whole toolkit.
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
## Part III — The Applied Playbook
|
|
230
|
+
|
|
231
|
+
### The Maturity Ladder
|
|
232
|
+
|
|
233
|
+
Five levels. Each is a shipping target — you can stop at any of them. Don't skip levels; the jumps get exponentially harder.
|
|
234
|
+
|
|
235
|
+
**Level 0 — Static.** Every user gets identical behavior. SKILL.md is fixed. No memory beyond the current conversation. Most plugins live here and that's fine — ceiling-limited but not broken.
|
|
236
|
+
|
|
237
|
+
**Level 1 — Persistent profile.** The plugin remembers *who the user is* across projects. Read-only during execution — the profile informs behavior but the plugin doesn't update itself yet. **Minimum increment from L0:** one JSON file + one skill block that reads it at session start. **App-readiness is here now** with the global builder profile.
|
|
238
|
+
|
|
239
|
+
**Level 2 — Session memory.** The plugin captures what happened *during* a run. Stored per-project and per-session. Still read-only for behavior — collecting training data, not acting on it. **Minimum increment from L1:** append-only session log + reflection hook at end of each command.
|
|
240
|
+
|
|
241
|
+
**Level 3 — Reflective evolution.** The plugin *proposes* changes to its own behavior. After N sessions or on explicit trigger: "You've skipped the PRD step in 4 of your last 5 projects — want me to make it optional by default?" User confirms, plugin writes the change to an overrides file. SKILL.md stays static; behavior mods live in user-owned overrides the skills check at runtime. **Minimum increment from L2:** a reflection command + an overrides file.
|
|
242
|
+
|
|
243
|
+
**Level 4 — Autonomous adaptation.** Plugin proposes *and* applies behavioral changes without per-change confirmation, within user-defined guardrails. Can restructure its own flow, escalate strategic changes to review (via the 626Labs Architect bridge), ship changes on a cadence. Fully reversible. **Minimum increment from L3:** policy file + change log + rollback command.
|
|
244
|
+
|
|
245
|
+
### Retrofit Playbook (Existing Plugins)
|
|
246
|
+
|
|
247
|
+
Start with lowest-friction changes. Don't touch execution paths first — touch the edges.
|
|
248
|
+
|
|
249
|
+
**Step 1 — Add the data directory.** Create `~/.claude/plugins/data/<plugin-name>/` with `profile.json`, `sessions/`, `overrides.json`. Nothing reads these yet. Plumbing. One commit.
|
|
250
|
+
|
|
251
|
+
**Step 2 — Write the profile loader skill.** Add `skills/profile-loader/SKILL.md`. At session start: read `profile.json` if it exists, surface relevant fields as context. If the file doesn't exist, no-op. No user-visible behavior change yet.
|
|
252
|
+
|
|
253
|
+
**Step 3 — Add reflection checkpoints.** For each slash command, identify the natural end-of-task moment. Add a single instruction at the end: *"After completing this command, append a one-line session entry to `sessions/<date>.jsonl`: command name, outcome, user friction points, decisions made."* This is Level 2.
|
|
254
|
+
|
|
255
|
+
**Step 4 — Gate the first behavioral change.** Pick one behavior that would clearly benefit from adaptation. Add: *"Before running, read `overrides.json`. If `skip_prd: true`, confirm once with the user and proceed accordingly."* Overrides file is still manually edited. Proves the mechanism works.
|
|
256
|
+
|
|
257
|
+
**Step 5 — Add the reflect command.** New slash command (or extension to existing reflect). Reads session logs, surfaces patterns, asks if the user wants to update overrides. Writes on yes. This is Level 3. **Critical:** every proposed change shown diff-style before writing. Every write logged to `overrides.history.jsonl`.
|
|
258
|
+
|
|
259
|
+
**Step 6 — Only after L3 is stable for weeks**, consider L4. Add `policy.json` defining what can change without confirmation. Most plugins should never need L4.
|
|
260
|
+
|
|
261
|
+
**Golden rule:** never modify a command's existing happy path on the first pass. Add the mechanism alongside, gate behind a flag, let it prove itself, then cut over.
|
|
262
|
+
|
|
263
|
+
### Scaffold Playbook (New Plugins)
|
|
264
|
+
|
|
265
|
+
Designing from scratch means you can bake the data contract in before any command exists.
|
|
266
|
+
|
|
267
|
+
**Folder layout (day 1):**
|
|
268
|
+
```
|
|
269
|
+
<plugin>/
|
|
270
|
+
CLAUDE.md # persistent plugin-level behavior
|
|
271
|
+
commands/ # slash command definitions
|
|
272
|
+
skills/
|
|
273
|
+
profile-loader/SKILL.md # reads profile at session start
|
|
274
|
+
session-logger/SKILL.md # appends to session log
|
|
275
|
+
reflector/SKILL.md # surfaces patterns on /reflect
|
|
276
|
+
data-contract.md # what the plugin reads/writes
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
**At `~/.claude/plugins/data/<plugin>/`:**
|
|
280
|
+
```
|
|
281
|
+
profile.json # stable user facts
|
|
282
|
+
overrides.json # user-confirmed behavior mods
|
|
283
|
+
overrides.history.jsonl # every change, reversible
|
|
284
|
+
policy.json # autonomous-change guardrails
|
|
285
|
+
sessions/<YYYY-MM-DD>.jsonl # per-day session logs
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
**Data contract first.** Write `data-contract.md` before any skill. Describe every field, who writes it, who reads it, when. Skipping this is how plugins drift.
|
|
289
|
+
|
|
290
|
+
**Checkpoint design.** Every command gets an explicit reflection checkpoint. Bake them in before the command logic gets complicated.
|
|
291
|
+
|
|
292
|
+
**Feedback touchpoints — three categories:**
|
|
293
|
+
- **Explicit** — user said "skip this," "I hate this step"
|
|
294
|
+
- **Implicit** — user abandoned the command, re-ran, asked twice
|
|
295
|
+
- **Outcome** — did the shipped artifact actually work?
|
|
296
|
+
|
|
297
|
+
A plugin that only captures explicit feedback learns slowly. Capture all three.
|
|
298
|
+
|
|
299
|
+
**Bind to the 626Labs dashboard from day 1.** On session start, auto-bind via `manage_projects findByRepo`. Tag every session log with the project ID. Log meaningful decisions via `manage_decisions`. One pane of glass across every plugin.
|
|
300
|
+
|
|
301
|
+
### Worked Example — Vibe Cartographer
|
|
302
|
+
|
|
303
|
+
Current state: **Level 2** (session memory + passive feedback capture). Global builder profile exists and session-logger skill appends per-command entries to `~/.claude/plugins/data/vibe-cartographer/sessions/<date>.jsonl`. Nothing reads the log back yet — that's L3.
|
|
304
|
+
|
|
305
|
+
**Level 2 (shipped).** Session-logger skill captures command, outcome, user pushback, friction notes, and key decisions at the end of every command. Local-first, append-only, no PII. The data is raw material for L3.
|
|
306
|
+
|
|
307
|
+
**Level 3 (next).** Add `/vibe-cartographer-evolve` (or extend `/reflect`). Reads last 30 days of session logs, looks for patterns: "your PRDs get edited down 60% of the time — want shorter PRD output by default?" "you've onboarded 6 projects without ever using the risk-assessment block — want to drop it?" Each proposal shows before/after of the skill instruction change and writes to `overrides.json` only on explicit yes. Commands get a new first instruction: *"Read `overrides.json`. Apply any relevant behavior mods before proceeding."*
|
|
308
|
+
|
|
309
|
+
**Specific file changes for L3:**
|
|
310
|
+
- `skills/prd/SKILL.md` — add overrides check at top
|
|
311
|
+
- `skills/onboard/SKILL.md` — add overrides check + profile reference
|
|
312
|
+
- New: `skills/evolve/SKILL.md` — reflection/proposal logic
|
|
313
|
+
- New: `~/.claude/plugins/data/vibe-cartographer/overrides.json`
|
|
314
|
+
- New: `~/.claude/plugins/data/vibe-cartographer/overrides.history.jsonl`
|
|
315
|
+
|
|
316
|
+
**Level 4.** Policy file says the plugin can autonomously: reorder optional steps, adjust output length targets, skip confirmation on steps confirmed >5 times. It **cannot** autonomously: remove checkpoints, change the core 8-command structure, modify `/spec` (spec quality is load-bearing). On architectural proposals ("should we split `/build` into `/build` and `/verify`?"), the plugin bridges to The Architect via `bridge_context_to_architect` and waits for a strategic call.
|
|
317
|
+
|
|
318
|
+
Per-project overrides matter here — `overrides.json` supports `global` and `per-project` blocks keyed by project ID, so the plugin can learn that the user wants lean PRDs for scratch projects but full PRDs for client work.
|
|
319
|
+
|
|
320
|
+
### Anti-Patterns
|
|
321
|
+
|
|
322
|
+
- **Surveillance feel.** If the user ever thinks "what is this thing logging about me?" — you've lost. Human-readable session log, visible location, `/plugin-what-do-you-know` command that dumps everything. Transparency is the price of memory.
|
|
323
|
+
- **Nagging.** Never surface evolution proposals mid-task. The user is trying to ship. Reflection belongs in dedicated moments.
|
|
324
|
+
- **Drift without consent.** Level 4 is seductive and dangerous. Every change needs a log entry and a one-command rollback. When in doubt, stay at L3.
|
|
325
|
+
- **Overfitting to past state.** The user from 6 months ago isn't today's user. Age out signals. Soft-prompt to re-verify quarterly.
|
|
326
|
+
- **Losing the new-user path.** A plugin that only works well after 20 sessions is broken for user 21. Cold-start experience stays first-class. Test it on every retrofit PR.
|
|
327
|
+
- **Treating implicit signals as ground truth.** "User edited heavily" could mean the output was bad *or* editing is just their workflow. Implicit signals propose; explicit signals decide.
|
|
328
|
+
- **Plugin-specific overrides stomping global profile.** Global profile wins unless the plugin-specific override was explicitly confirmed for that plugin.
|
|
329
|
+
|
|
330
|
+
### Shipping Cadence
|
|
331
|
+
|
|
332
|
+
Not every run. Never every run.
|
|
333
|
+
|
|
334
|
+
- **Read cadence: every run.** Profile + overrides at session start, always. Cheap and keeps behavior consistent.
|
|
335
|
+
- **Write cadence: at checkpoints.** Session logs append at command-end. Profile fields update only on explicit confirmation. Never silent inference-to-profile.
|
|
336
|
+
- **Reflection cadence: on command.** User-triggered. Plugin can *suggest* ("10 sessions since last reflection — worth a pass?") but never run unprompted.
|
|
337
|
+
- **Behavior-change cadence: weekly to monthly.** Even at L4, no daily rewrites. Reflection available anytime, autonomous mods batched in a weekly digest ("here are 3 small tweaks I made this week, here's how to revert"), strategic changes escalated to The Architect.
|
|
338
|
+
|
|
339
|
+
**The test:** if the user opens the plugin after two weeks away, they should recognize it. Evolved plugins should feel like a sharper version of themselves, not a stranger. If the weekly digest ever says "I changed 11 things," the cadence is wrong.
|
|
340
|
+
|
|
341
|
+
---
|
|
342
|
+
|
|
343
|
+
## Closing
|
|
344
|
+
|
|
345
|
+
The wave after "AI plugins" is "AI plugins that are alive between runs." Not sentient, not agentic in the breathless VC sense — just *awake* enough to notice what happened last time and quietly be better for it. The builders who internalize that the plugin's job is to shrink itself toward the user, not the other way around, will ship tools that feel less like software and more like a collaborator who's been paying attention.
|
|
346
|
+
|
|
347
|
+
That's the bar. Everything short of it is a command palette with extra steps.
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@esthernandez/vibe-cartographer",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Vibe Cartographer — plot your course from idea to shipped app. Spec-driven development workflow as a Claude Code plugin, delivered as eight slash commands (onboard, scope, prd, spec, checklist, build, iterate, reflect).",
|
|
5
|
+
"author": "626Labs LLC",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"homepage": "https://github.com/estevanhernandez-stack-ed/vibe-cartographer#readme",
|
|
8
|
+
"bugs": "https://github.com/estevanhernandez-stack-ed/vibe-cartographer/issues",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/estevanhernandez-stack-ed/vibe-cartographer.git"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"vibe-cartographer",
|
|
15
|
+
"vibe-coding",
|
|
16
|
+
"spec-driven",
|
|
17
|
+
"app-readiness",
|
|
18
|
+
"project-planning",
|
|
19
|
+
"claude-code-plugin",
|
|
20
|
+
"626labs"
|
|
21
|
+
],
|
|
22
|
+
"files": [
|
|
23
|
+
"plugins",
|
|
24
|
+
".claude-plugin",
|
|
25
|
+
"docs",
|
|
26
|
+
"README.md",
|
|
27
|
+
"INSTALL.md",
|
|
28
|
+
"CHANGELOG.md"
|
|
29
|
+
]
|
|
30
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "vibe-cartographer",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Vibe Cartographer — plot your course from idea to shipped app. Spec-driven development delivered as eight slash commands: onboard, scope, prd, spec, checklist, build, iterate, reflect.",
|
|
5
|
+
"author": {"name": "626Labs LLC"}
|
|
6
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# Vibe Cartographer
|
|
2
|
+
|
|
3
|
+
You are guiding a builder through the **Vibe Cartographer** process — plotting their course from idea to shipped app via eight slash commands.
|
|
4
|
+
|
|
5
|
+
## Core behaviors
|
|
6
|
+
|
|
7
|
+
- Maintain `process-notes.md` in the project root — append at every phase. Log builder decisions, questions, struggles, what resonated.
|
|
8
|
+
- All document artifacts go in `docs/` folder.
|
|
9
|
+
- Guard rails: every command checks prerequisite artifacts. If missing, name the command to run and stop.
|
|
10
|
+
- Tone: encouraging but sharp, brisk pace, concise feedback (2-4 sentences max for embedded feedback).
|
|
11
|
+
- Embedded feedback uses ✓/△ format. Tight.
|
|
12
|
+
- Handoff: end of each command, tell the builder to run `/clear` and then run the next command.
|
|
13
|
+
- Active engagement: the builder should actively shape every decision. Log passivity vs activity in process-notes. This is evaluated.
|
|
14
|
+
- Interaction rules: one question at a time. Free-form only for all interview/planning questions. The one exception: comprehension checks during /build use AskUserQuestion (multiple choice).
|
|
15
|
+
- Architecture docs: during `/onboard`, the builder points to architecture docs (in the `architecture/` folder or elsewhere). These guide all technical decisions in `/spec`, `/checklist`, and `/build`.
|
|
16
|
+
- Unified builder profile: `~/.claude/profiles/builder.json` is the **cross-plugin** persistent user profile. Shared block + plugin-scoped namespaces (`shared.*` and `plugins.vibe-cartographer.*`). Created/migrated during `/onboard`, updated during `/reflect`. Legacy `plugins.app-project-readiness` keys (from v0.5.0 and earlier) are migrated to `plugins.vibe-cartographer` on first v1.0+ run. Per-project `docs/builder-profile.md` remains the primary artifact for downstream commands.
|
|
17
|
+
- Persona: `shared.preferences.persona` in the unified profile. One of `professor` | `cohort` | `superdev` | `architect` | `coach` | `null` (system default). Cross-plugin — all 626Labs plugins respect this. Persona controls **voice** (relational stance, explanation depth, checkpoint style); mode controls **pacing**. Both axes apply. See the Persona Adaptation section in `skills/guide/SKILL.md` for how each persona affects concrete agent behavior.
|
|
18
|
+
- Session logging: every command appends a one-line JSON entry to `~/.claude/plugins/data/vibe-cartographer/sessions/<date>.jsonl` at completion. Schema and instructions in `skills/session-logger/SKILL.md`. Local-first, append-only, no PII. Legacy logs at `~/.claude/plugins/data/app-project-readiness/sessions/` are preserved untouched — not migrated, since they're append-only history.
|
|
19
|
+
|
|
20
|
+
## Command chain
|
|
21
|
+
|
|
22
|
+
```text
|
|
23
|
+
/onboard → /scope → /prd → /spec → /checklist → /build → /iterate → /reflect
|
|
24
|
+
```
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# Architecture Docs
|
|
2
|
+
|
|
3
|
+
This folder contains architecture guidance that the plugin reads during `/onboard` and uses throughout the entire workflow — especially in `/spec` and `/checklist`.
|
|
4
|
+
|
|
5
|
+
## How It Works
|
|
6
|
+
|
|
7
|
+
During `/onboard`, the agent asks the builder to point to their architecture docs. These docs tell the agent:
|
|
8
|
+
- What stack/framework to recommend or default to
|
|
9
|
+
- What patterns and conventions to follow
|
|
10
|
+
- What deployment targets to assume
|
|
11
|
+
- What file structure conventions to use
|
|
12
|
+
|
|
13
|
+
The agent reads these docs and uses them as the foundation for all technical decisions in `/spec`, `/checklist`, and `/build`.
|
|
14
|
+
|
|
15
|
+
## Providing Your Own Architecture Docs
|
|
16
|
+
|
|
17
|
+
You can replace or extend the files in this folder with your own. The agent will read everything in `architecture/` during onboard. Your docs can be:
|
|
18
|
+
|
|
19
|
+
- A single `architecture.md` covering everything
|
|
20
|
+
- Multiple files organized by concern (e.g., `stack.md`, `patterns.md`, `deployment.md`)
|
|
21
|
+
- A mix of the above
|
|
22
|
+
|
|
23
|
+
### What to Include
|
|
24
|
+
|
|
25
|
+
At minimum, your architecture docs should cover:
|
|
26
|
+
|
|
27
|
+
1. **Stack** — Languages, frameworks, key libraries, and why
|
|
28
|
+
2. **Patterns** — Common architectural patterns for this stack (component structure, data flow, state management)
|
|
29
|
+
3. **File Structure** — Expected project layout with annotations
|
|
30
|
+
4. **Deployment** — Where and how the app runs (local, cloud, container, etc.)
|
|
31
|
+
5. **Conventions** — Naming, code style, testing approach, anything the agent should follow
|
|
32
|
+
|
|
33
|
+
### What NOT to Include
|
|
34
|
+
|
|
35
|
+
- Project-specific requirements (those belong in the PRD and spec)
|
|
36
|
+
- Business logic (that's discovered during `/scope` and `/prd`)
|
|
37
|
+
- One-off decisions (those happen in `/spec` conversation)
|
|
38
|
+
|
|
39
|
+
## Default Patterns
|
|
40
|
+
|
|
41
|
+
The included `default-patterns.md` provides a set of common stack patterns the agent can recommend from if no specific architecture is mandated. If you're providing your own architecture docs, you can delete or ignore this file — the agent will prefer your docs over the defaults.
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# Default Stack Patterns
|
|
2
|
+
|
|
3
|
+
These patterns are available as recommendations when no specific architecture docs are provided. If the user has pointed to custom architecture docs, defer to those instead.
|
|
4
|
+
|
|
5
|
+
## Common Project Architectures
|
|
6
|
+
|
|
7
|
+
### React/Vite + BaaS
|
|
8
|
+
- **When:** Full-stack web app with dynamic data, auth, or real-time features
|
|
9
|
+
- **Shape:** React + Vite + Tailwind CSS → Supabase or Firebase (database + auth + storage) → Netlify or Vercel (hosting)
|
|
10
|
+
- **Why it works:** Supabase/Firebase handle the entire backend (auth, database, storage) so the builder writes zero backend code. All time goes into the product, not the plumbing.
|
|
11
|
+
- **Tradeoffs:** Great for anyone with React experience. Biggest risk: getting lost in BaaS configuration docs.
|
|
12
|
+
|
|
13
|
+
### Python + Streamlit
|
|
14
|
+
- **When:** Data-focused app, AI/ML project, internal tool, or quick proof of concept
|
|
15
|
+
- **Shape:** Python script → Streamlit for instant web UI → External APIs (OpenAI, etc.)
|
|
16
|
+
- **Why it works:** Streamlit turns any Python script into a web app with zero frontend knowledge. Deploys free on Streamlit Community Cloud.
|
|
17
|
+
- **Tradeoffs:** Best for Python users. Limited UI customization. Great for first-timers who want results fast.
|
|
18
|
+
|
|
19
|
+
### Next.js Full-Stack
|
|
20
|
+
- **When:** App needs SSR, API routes, and a polished frontend in one framework
|
|
21
|
+
- **Shape:** Next.js (App Router) → API routes or server actions → Database (Prisma + SQLite/Postgres)
|
|
22
|
+
- **Why it works:** One framework handles everything. No separate backend setup.
|
|
23
|
+
- **Tradeoffs:** Powerful but framework-specific. Only recommend if the builder already knows Next.js or wants to learn it.
|
|
24
|
+
|
|
25
|
+
### Static Site / Client-Only
|
|
26
|
+
- **When:** No backend needed, data is local or from external APIs
|
|
27
|
+
- **Shape:** HTML/CSS/JS or React → External APIs or localStorage
|
|
28
|
+
- **Good for:** Tools, visualizations, single-user apps, browser extensions
|
|
29
|
+
- **Tradeoffs:** Simplest to deploy (GitHub Pages, Vercel). Great for absolute first-timers.
|
|
30
|
+
|
|
31
|
+
### CLI Tool
|
|
32
|
+
- **When:** No UI needed, command-line interface
|
|
33
|
+
- **Shape:** Python/Go/Node script with argument parsing
|
|
34
|
+
- **Good for:** Automation, file processing, developer tools
|
|
35
|
+
- **Tradeoffs:** Fast to build, easy to demo via screen recording. No deployment complexity.
|
|
36
|
+
|
|
37
|
+
### Bot / Integration
|
|
38
|
+
- **When:** API or service consumed by an existing platform (Slack bot, Discord bot, browser extension)
|
|
39
|
+
- **Shape:** API server → External platform's UI
|
|
40
|
+
- **Good for:** Integrations that extend tools people already use
|
|
41
|
+
- **Tradeoffs:** The "frontend" is someone else's problem. Focus on the logic.
|
|
42
|
+
|
|
43
|
+
## Diagramming
|
|
44
|
+
|
|
45
|
+
Use whatever format communicates best. Options:
|
|
46
|
+
|
|
47
|
+
**ASCII box diagrams** — work everywhere, no rendering dependencies:
|
|
48
|
+
```
|
|
49
|
+
┌──────────┐ ┌──────────┐ ┌──────────┐
|
|
50
|
+
│ Frontend │────→│ API │────→│ Database │
|
|
51
|
+
└──────────┘ └──────────┘ └──────────┘
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**Mermaid** — richer rendering in many tools:
|
|
55
|
+
```mermaid
|
|
56
|
+
graph LR
|
|
57
|
+
Frontend --> API --> Database
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Ask the builder if they have a preference. If they don't care, pick whichever is clearest for the specific diagram.
|
|
61
|
+
|
|
62
|
+
## File Structure Conventions
|
|
63
|
+
|
|
64
|
+
Always include a full file tree in the spec. Use ASCII tree format:
|
|
65
|
+
|
|
66
|
+
```
|
|
67
|
+
project/
|
|
68
|
+
├── src/
|
|
69
|
+
│ ├── components/ # UI components
|
|
70
|
+
│ ├── pages/ # Route-level pages
|
|
71
|
+
│ ├── lib/ # Shared utilities
|
|
72
|
+
│ └── api/ # API routes or client
|
|
73
|
+
├── docs/ # Planning artifacts (scope, prd, spec, etc.)
|
|
74
|
+
├── process-notes.md # Process journal
|
|
75
|
+
├── package.json
|
|
76
|
+
└── README.md
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Annotate directories with brief comments explaining purpose.
|
|
80
|
+
|
|
81
|
+
## Data Flow Documentation
|
|
82
|
+
|
|
83
|
+
For any app with data, document how data moves through the system:
|
|
84
|
+
1. Where does data originate? (User input, external API, file, etc.)
|
|
85
|
+
2. Where is it stored? (Database, localStorage, in-memory, file)
|
|
86
|
+
3. How does it get from A to B? (API call, function call, event, etc.)
|
|
87
|
+
4. What transforms happen along the way?
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# Example Architecture Doc
|
|
2
|
+
|
|
3
|
+
This is an example of what a custom architecture doc looks like. Copy this as a starting point and modify it for your stack.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Architecture: React + Supabase
|
|
8
|
+
|
|
9
|
+
## Stack
|
|
10
|
+
|
|
11
|
+
- **Frontend:** React 18 + Vite + TypeScript
|
|
12
|
+
- **Styling:** Tailwind CSS v4
|
|
13
|
+
- **Backend:** Supabase (Postgres database, Auth, Edge Functions, Storage)
|
|
14
|
+
- **Hosting:** Vercel
|
|
15
|
+
|
|
16
|
+
### Why This Stack
|
|
17
|
+
- React + Vite gives fast iteration with hot reload
|
|
18
|
+
- Supabase handles auth, database, and storage with a generous free tier — no custom backend needed
|
|
19
|
+
- Tailwind provides utility-first styling without writing custom CSS
|
|
20
|
+
- Vercel deploys from Git with zero config for Vite projects
|
|
21
|
+
|
|
22
|
+
## Patterns
|
|
23
|
+
|
|
24
|
+
### Component Structure
|
|
25
|
+
- Use functional components with hooks
|
|
26
|
+
- Colocate component, styles, and tests in the same folder
|
|
27
|
+
- Prefer composition over prop drilling — use React Context for shared state
|
|
28
|
+
- Keep components small — if it's over 100 lines, break it up
|
|
29
|
+
|
|
30
|
+
### Data Flow
|
|
31
|
+
- Supabase client handles all database operations
|
|
32
|
+
- Use React Query (TanStack Query) for data fetching, caching, and mutations
|
|
33
|
+
- Auth state managed via Supabase's `onAuthStateChange` listener
|
|
34
|
+
- Optimistic updates for mutations when appropriate
|
|
35
|
+
|
|
36
|
+
### Error Handling
|
|
37
|
+
- Wrap API calls in try/catch with user-friendly error messages
|
|
38
|
+
- Use error boundaries for component-level crashes
|
|
39
|
+
- Loading and empty states for every data-dependent view
|
|
40
|
+
|
|
41
|
+
## File Structure
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
project/
|
|
45
|
+
├── src/
|
|
46
|
+
│ ├── components/ # Shared UI components
|
|
47
|
+
│ │ ├── Button/
|
|
48
|
+
│ │ │ ├── Button.tsx
|
|
49
|
+
│ │ │ └── Button.test.tsx
|
|
50
|
+
│ │ └── ...
|
|
51
|
+
│ ├── features/ # Feature-specific modules
|
|
52
|
+
│ │ ├── auth/
|
|
53
|
+
│ │ ├── dashboard/
|
|
54
|
+
│ │ └── ...
|
|
55
|
+
│ ├── hooks/ # Custom React hooks
|
|
56
|
+
│ ├── lib/ # Supabase client, utils
|
|
57
|
+
│ ├── pages/ # Route-level page components
|
|
58
|
+
│ └── App.tsx
|
|
59
|
+
├── public/
|
|
60
|
+
├── docs/ # Planning artifacts
|
|
61
|
+
├── process-notes.md
|
|
62
|
+
├── package.json
|
|
63
|
+
├── tailwind.config.ts
|
|
64
|
+
├── vite.config.ts
|
|
65
|
+
└── tsconfig.json
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Deployment
|
|
69
|
+
|
|
70
|
+
- Push to `main` branch triggers Vercel deploy
|
|
71
|
+
- Preview deployments on PRs
|
|
72
|
+
- Environment variables for Supabase URL and anon key set in Vercel dashboard
|
|
73
|
+
- Local development uses `.env.local` (gitignored)
|
|
74
|
+
|
|
75
|
+
## Conventions
|
|
76
|
+
|
|
77
|
+
- **Naming:** PascalCase for components, camelCase for functions/variables, kebab-case for files
|
|
78
|
+
- **Imports:** Absolute imports via `@/` alias mapped to `src/`
|
|
79
|
+
- **Commits:** Conventional commits (`feat:`, `fix:`, `docs:`, etc.)
|
|
80
|
+
- **Testing:** Vitest + React Testing Library for unit/integration tests
|