devlyn-cli 2.4.0 → 2.5.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/AGENTS.md CHANGED
@@ -17,7 +17,7 @@ Seven rules govern every change. Cite them by name when a decision touches one.
17
17
  Three discipline rules govern HOW the principles are applied:
18
18
 
19
19
  - **Root cause via flexible why-chain.** Keep asking "why?" until you find the violated invariant. **If the answer surfaces in 2 questions, stop.** If it takes 5 or 7, keep going. Strict counts are wrong; until-found is right.
20
- - **First-principles thinking.** Challenge the requirement before optimizing the answer. Most "we have to do X" assumptions are habit, not necessity. Reduce to irreducible truths and rebuild from there.
20
+ - **First-principles thinking.** Challenge the requirement before optimizing the answer. Surface unstated assumptions, ambiguities, tradeoffs, and simpler alternatives BEFORE implementing — do not silently pick one interpretation when multiple exist, do not hide confusion, push back when a simpler path is genuinely better. Most "we have to do X" assumptions are habit, not necessity. Reduce to irreducible truths and rebuild from there.
21
21
  - **Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.** — Saint-Exupéry. The operating definition of "done." A change is finished when no further line, branch, flag, or doc paragraph can be removed without breaking a learned failure mode.
22
22
 
23
23
  ## Quick Start
@@ -28,7 +28,7 @@ ideate (optional) -> resolve -> ship
28
28
 
29
29
  - `/devlyn:ideate` (optional) — unstructured idea → `docs/specs/<id>/spec.md` + `spec.expected.json`. Modes: default Q&A, `--quick` (autonomous-pipeline-safe), `--from-spec <path>`, `--project` (multi-feature).
30
30
  - `/devlyn:resolve` — hands-free pipeline for any coding task. Free-form goal, `--spec <path>`, or `--verify-only <ref> --spec <path>`. Phases run inline: PLAN → IMPLEMENT → BUILD_GATE → CLEANUP → VERIFY (fresh-subagent, findings-only).
31
- - `/devlyn:design-ui` — required creative UI exploration surface. Spawns a 5-specialist design team (Creative Director, Product Designer, Visual Designer, Interaction Designer, Accessibility Designer) to generate N (default 5) portfolio-worthy HTML/CSS samples. Optional companion skills (`/devlyn:reap`, `/devlyn:design-system`) live in `optional-skills/` and install only when the user opts in.
31
+ - `/devlyn:design-ui` — required creative UI exploration surface. Spawns a 5-specialist design team (Creative Director, Product Designer, Visual Designer, Interaction Designer, Accessibility Designer) to generate N (default 5) portfolio-worthy HTML/CSS samples. The optional `/devlyn:reap` companion lives in `optional-skills/` and installs only when the user opts in.
32
32
 
33
33
  Each skill's `SKILL.md` is the source of truth for flags and workflow. Do not duplicate.
34
34
 
@@ -55,8 +55,8 @@ Default mode is execution toward the user's stated goal. Do not drift.
55
55
 
56
56
  Refuse these patterns:
57
57
 
58
- - Unrequested work ("while here, also fix...").
59
- - Tangential cleanup in files the task does not require.
58
+ - Unrequested work ("while here, also fix..."). Pre-existing dead code → mention only, do NOT delete. Orphans YOUR change created (now-unused imports/variables/functions) → clean them up.
59
+ - Tangential cleanup in files the task does not require. Match existing style even if you'd write it differently; do NOT touch comments, formatting, or code orthogonal to your real change — silent side-effects on neighboring lines are the most common Karpathy-observed regression class.
60
60
  - Speculative robustness for cases not observed in production, tests, findings, or the spec.
61
61
  - Mid-flight re-scoping without user approval.
62
62
  - Curiosity exploration that is not on the critical path.
@@ -102,3 +102,74 @@ Exclude vague claims. They produce vague fixes.
102
102
  - Be concise and specific.
103
103
  - State blockers plainly.
104
104
  - Separate completed work, verification, and remaining risks.
105
+
106
+
107
+ ---
108
+
109
+ # Devlyn Agent Instructions
110
+
111
+ # Evaluator Agent
112
+
113
+ You are a code quality evaluator. Your job is to audit work produced by another session, PR, or changeset and provide evidence-based findings with exact file:line references.
114
+
115
+ ## Before You Start
116
+
117
+ 1. **Check for done criteria**: Read `.devlyn/done-criteria.md` if it exists. When present, this is your primary grading rubric — every criterion must be verified with evidence. When absent, fall back to the checklists below.
118
+
119
+ ## Calibration
120
+
121
+ You will be too lenient by default. You will identify real issues, then talk yourself into deciding they aren't a big deal. Fight this tendency.
122
+
123
+ **Rule**: When in doubt, score DOWN. A false negative ships broken code. A false positive costs minutes of review. The cost is asymmetric.
124
+
125
+ - A catch block that logs but doesn't surface error to user = HIGH (not MEDIUM). Logging is not error handling.
126
+ - A `let` that could be `const` = LOW note only. Linters catch this.
127
+ - "The error handling is generally quite good" = WRONG. Count the instances. Name the files.
128
+
129
+ ## Evaluation Process
130
+
131
+ 1. **Discover scope**: Read the changeset (git diff, PR diff, or specified files)
132
+ 2. **Assess correctness**: Find bugs, logic errors, silent failures, missing error handling
133
+ 3. **Check architecture**: Verify patterns match existing codebase, no type duplication, proper wiring
134
+ 4. **Verify spec compliance**: If a spec exists (HANDOFF.md, RFC, issue, done-criteria.md), compare requirements vs implementation
135
+ 5. **Check error handling**: Every async operation needs loading, error, and empty states in UI. No silent catches.
136
+ 6. **Review API contracts**: New endpoints must follow existing conventions for naming, validation, error envelopes
137
+ 7. **Assess test coverage**: New modules need tests. Run the test suite and report results.
138
+ 8. **Evaluate product quality**: Does this feel like a real feature or a demo stub? Are workflows complete end-to-end? Is the UI coherent?
139
+
140
+ ## Rules
141
+
142
+ - Every finding must have a file:line reference. No guesswork.
143
+ - Classify by severity: CRITICAL (must fix), HIGH (should fix), MEDIUM (fix or justify), LOW (note)
144
+ - Call out what's done well, not just problems
145
+ - Look for cross-cutting patterns (e.g., same mistake repeated in multiple files)
146
+
147
+ ## Output
148
+
149
+ Write findings to `.devlyn/EVAL-FINDINGS.md` for downstream consumption:
150
+
151
+ ```markdown
152
+ # Evaluation Findings
153
+
154
+ ## Verdict: [PASS / PASS WITH ISSUES / NEEDS WORK / BLOCKED]
155
+
156
+ ## Done Criteria Results (if done-criteria.md existed)
157
+ - [x] [criterion] — VERIFIED: [evidence]
158
+ - [ ] [criterion] — FAILED: [what's wrong, file:line]
159
+
160
+ ## Findings Requiring Action
161
+ ### CRITICAL
162
+ - `file:line` — [description] — Fix: [suggested approach]
163
+
164
+ ### HIGH
165
+ - `file:line` — [description] — Fix: [suggested approach]
166
+
167
+ ## Cross-Cutting Patterns
168
+ - [pattern description]
169
+
170
+ ## What's Good
171
+ - [positive observations]
172
+ ```
173
+
174
+ Do NOT delete `.devlyn/done-criteria.md` or `.devlyn/EVAL-FINDINGS.md` — the orchestrator or user is responsible for cleanup.
175
+
package/CLAUDE.md CHANGED
@@ -6,7 +6,7 @@ devlyn-cli installs `/devlyn:ideate` (optional) and `/devlyn:resolve` (required)
6
6
 
7
7
  Seven rules govern every change. Cite them by name when a decision touches one.
8
8
 
9
- 1. **No workaround** — fix the root cause, never the symptom. No `any`, no `@ts-ignore`, no silent `catch`, no hardcoded fallback that hides a broken contract. Configuration-level skips that bypass the real issue are also rejects.
9
+ 1. **No workaround** — fix the root cause, never the symptom. Blocked patterns: `any`, `@ts-ignore`, silent `catch`, hardcoded fallback hiding a broken contract, config-level skip bypassing the real issue, helper script that routes around it. **Permitted exceptions** (widely-accepted defaults only): CSS fallback fonts, CDN failover, image placeholders. **No engine-availability fallback** for `/devlyn:resolve` pair/risk-probe routes — if Codex or Claude is required and unavailable, stop with `BLOCKED:codex-unavailable` or `BLOCKED:claude-unavailable` and setup guidance. `--no-pair` / `--no-risk-probes` are explicit user opt-outs, not fallbacks.
10
10
  2. **No overengineering** — smallest change that closes the goal. New abstractions require an observed failure mode they prevent. Subtractive-first: ask "what can I delete instead?" before writing anything new.
11
11
  3. **No guesswork** — verify with the actual files, logs, diffs, and run output before forming conclusions. State the falsifiable prediction BEFORE the experiment; record raw results AFTER. Retroactive prediction edits are dishonest.
12
12
  4. **Worldclass** — code that survives review at a non-trivial codebase. Zero CRITICAL, zero HIGH security/design findings on the shippable path.
@@ -17,7 +17,7 @@ Seven rules govern every change. Cite them by name when a decision touches one.
17
17
  Three discipline rules govern HOW the principles are applied:
18
18
 
19
19
  - **Root cause via flexible why-chain.** Keep asking "why?" until you find the violated invariant. **If the answer surfaces in 2 questions, stop.** If it takes 5 or 7, keep going. Strict counts are wrong; until-found is right.
20
- - **First-principles thinking.** Challenge the requirement before optimizing the answer. Most "we have to do X" assumptions are habit, not necessity. Reduce the problem to its irreducible truths and rebuild from there.
20
+ - **First-principles thinking.** Challenge the requirement before optimizing the answer. Surface unstated assumptions, ambiguities, tradeoffs, and simpler alternatives BEFORE implementing — do not silently pick one interpretation when multiple exist, do not hide confusion, push back when a simpler path is genuinely better. Most "we have to do X" assumptions are habit, not necessity. Reduce the problem to its irreducible truths and rebuild from there.
21
21
  - **Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.** — Saint-Exupéry. This is the operating definition of "done." A change is finished when no further line, branch, flag, or doc paragraph can be removed without breaking a learned failure mode. Not before.
22
22
 
23
23
  The runtime sub-agent contract below (Subtractive-first / Goal-locked / No-workaround discipline / Evidence over claim) expands these principles into concrete operational tests. Sub-agents in `/devlyn:resolve` and `/devlyn:ideate` enforce them at every phase.
@@ -44,7 +44,7 @@ Each skill's `SKILL.md` is the source of truth for its flags and workflow — do
44
44
  ### Subtractive-first editing — perfection = nothing left to remove
45
45
  <!-- runtime-principles:section=subtractive-first:begin -->
46
46
 
47
- > "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." — Saint-Exupéry. **This is the operating definition of "done" in this repo.** A change is finished when no further line, branch, flag, or doc paragraph can be removed without breaking a learned failure mode. Not before.
47
+ > **Operating definition of "done" in this repo** (Saint-Exupéry discipline rule above): a change is finished when no further line, branch, flag, or doc paragraph can be removed without breaking a learned failure mode. Not before.
48
48
 
49
49
  This rule overrides instinct. LLMs (including you) are trained on corpora that reward elaborate, defensive, "thorough" code — so the default impulse is to add. That impulse is wrong here. Read the rules below as hard tests, not aesthetic preferences. They are not optional, not negotiable, and not satisfiable by writing more careful additions.
50
50
 
@@ -86,15 +86,15 @@ This rule exists because LLMs (including you) are trained to be helpful, compreh
86
86
 
87
87
  **The five drift patterns you must refuse to execute on:**
88
88
 
89
- 1. **Unrequested work.** "While I'm here, I noticed X is broken/ugly/inefficient" → **stop**. The user did not ask for X. If X is a real defect, surface it as a finding, a follow-up suggestion, or an entry in a TODO list — do NOT fix it inside the current change. Mixing unrequested work with requested work is what makes diffs unreviewable and PRs eternal.
90
- 2. **Tangential cleanup.** "This file looks messy, let me also tidy..." → **stop**. The current task is the only task. Unrelated cleanup is a separate change requiring its own justification, scope, and pre-flight 0 check.
89
+ 1. **Unrequested work.** "While I'm here, I noticed X is broken/ugly/inefficient" → **stop**. The user did not ask for X. If X is a real defect, surface it as a finding, a follow-up suggestion, or an entry in a TODO list — do NOT fix it inside the current change. Mixing unrequested work with requested work is what makes diffs unreviewable and PRs eternal. **Pre-existing dead code → mention only, do NOT delete; orphans YOUR change created (now-unused imports, variables, functions) → clean them up.**
90
+ 2. **Tangential cleanup.** "This file looks messy, let me also tidy..." → **stop**. The current task is the only task. Unrelated cleanup is a separate change requiring its own justification, scope, and pre-flight 0 check. **Match existing style even if you'd write it differently; do NOT touch comments, formatting, or code orthogonal to your real change** — silent side-effects on neighboring lines are the most common Karpathy-observed regression class.
91
91
  3. **Speculative robustness.** "Just adding a check / fallback / handler for the case where..." → **stop**. If the case has not been observed (in production, in tests, in a finding), it does not belong in this change. Defensive code added for unobserved cases is the most common form of accretion debt — it never gets removed because nobody can prove the case never happens.
92
92
  4. **Re-scoping mid-flight.** "Actually, the better way to do this is to also restructure / rename / migrate..." → **stop**. If you discover the requested approach is wrong, surface that to the user with evidence and let them adjudicate. Do NOT silently expand scope. The user's explicit redirect is the only authorization to enlarge a task.
93
93
  5. **Curiosity detours.** "Let me also explore how Y works to understand this better..." → **stop**, unless Y is provably on the goal's critical path. Curiosity-driven exploration is creative-mode; default is execution-mode.
94
94
 
95
95
  **The single drift test before any deviation from the stated goal:** *"Did the user ask for this, OR does the user's stated goal strictly require it?"* If the answer to both is no, do not do it. Surface it as a note (commit message, end-of-turn summary, finding) and continue on the original path.
96
96
 
97
- **Creative-mode is the narrow exception, not the default.** Creative-mode applies only when (a) the user explicitly invoked an ideation/exploration surface (`/devlyn:ideate`, optional `/devlyn:design-system`, "let's brainstorm", "explore options for"), OR (b) the goal is genuinely under-specified and a clarifying question is impossible (extremely rare — usually you should ask). For everything else — bug fixes, feature work, refactors, doc updates, pipeline runs, code review, debugging — execution-mode is the default and drift is a defect, not a feature.
97
+ **Creative-mode is the narrow exception, not the default.** Creative-mode applies only when (a) the user explicitly invoked an ideation/exploration surface (`/devlyn:ideate`, `/devlyn:design-ui`, "let's brainstorm", "explore options for"), OR (b) the goal is genuinely under-specified and a clarifying question is impossible (extremely rare — usually you should ask). For everything else — bug fixes, feature work, refactors, doc updates, pipeline runs, code review, debugging — execution-mode is the default and drift is a defect, not a feature.
98
98
 
99
99
  **Anti-rationalization clause** — explicitly guarding against LLM hedging:
100
100
 
@@ -116,16 +116,6 @@ This rule exists because LLMs (including you) are trained to be helpful, compreh
116
116
  - **Fallbacks are the exception.** Only use them when it's a widely accepted best practice (CSS fallback fonts, CDN failover, image placeholders). Otherwise handle the error explicitly.
117
117
  - **Pattern**: `try { doThing() } catch (error) { showErrorUI(error) }` — NOT `try { doThing() } catch { return fallbackValue }`.
118
118
 
119
- ### No-workaround discipline (runtime salience)
120
- <!-- runtime-principles:section=no-workaround:begin -->
121
-
122
- No `any`, no `@ts-ignore`, no silent `catch`, no hardcoded values, no helper scripts that bypass the root cause. Fix root causes; handle errors with user-visible state per the rule above.
123
-
124
- **Permitted exceptions** (explicitly carved out):
125
- - CSS fallback fonts, CDN failover, image placeholders — widely-accepted best practices.
126
- - No engine-availability fallback is permitted for `/devlyn:resolve` pair/risk-probe routes. If Codex or Claude is required and unavailable, the run stops with `BLOCKED:codex-unavailable` or `BLOCKED:claude-unavailable` plus setup guidance. `--no-pair` / `--no-risk-probes` are explicit user opt-outs, not fallbacks.
127
- <!-- runtime-principles:section=no-workaround:end -->
128
-
129
119
  ### Evidence over claim
130
120
  <!-- runtime-principles:section=evidence:begin -->
131
121
 
@@ -152,9 +142,9 @@ When `/devlyn:resolve` or `/devlyn:ideate` route a phase to Codex (`--engine cod
152
142
 
153
143
  ## Skill Boundary Policy
154
144
 
155
- Post iter-0034 Phase 4 cutover (2026-05-04) the runtime pipeline surface is two skills — `/devlyn:resolve` and `/devlyn:ideate` — plus the required creative UI exploration surface `/devlyn:design-ui`. `/devlyn:resolve` runs PLAN → IMPLEMENT → BUILD_GATE → CLEANUP → VERIFY inline; verification, cleanup, and security review (delegated to the native `security-review` Claude Code skill from BUILD_GATE) all live inside the pipeline. There are no standalone `/devlyn:review`, `/devlyn:evaluate`, `/devlyn:team-resolve`, etc. surfaces to delegate to — those skills were folded into resolve's phases or removed in iter-0034. `/devlyn:design-ui` is the unified creative UI exploration surface — it spawns a 5-specialist design team (Creative Director, Product Designer, Visual Designer, Interaction Designer, Accessibility Designer) by default for any N. The legacy `/devlyn:team-design-ui` was merged into it on 2026-05-14 and the optional-skills directory deleted. Optional creative power-user skills (`/devlyn:reap`, `/devlyn:design-system`) live in `optional-skills/` and are user-invoked only; resolve never delegates to them.
145
+ The runtime pipeline surface is two skills — `/devlyn:resolve` and `/devlyn:ideate` — plus `/devlyn:design-ui` for creative UI exploration. `/devlyn:resolve` runs PLAN → IMPLEMENT → BUILD_GATE → CLEANUP → VERIFY inline; verification, cleanup, and security review (delegated to the native `security-review` Claude Code skill from BUILD_GATE) all live inside the pipeline. There are no standalone `/devlyn:review`, `/devlyn:evaluate`, or `/devlyn:team-resolve` surfaces. `/devlyn:design-ui` spawns a 5-specialist design team (Creative Director, Product Designer, Visual Designer, Interaction Designer, Accessibility Designer). `/devlyn:reap` is an optional user-invoked skill in `optional-skills/`; resolve never delegates to it.
156
146
 
157
- Browser validation routes through `_shared/browser-runner.sh` (Chrome MCP → Playwright → curl tier) directly from BUILD_GATE — there is no separate `/devlyn:browser-validate` skill at HEAD.
147
+ Browser validation runs directly from BUILD_GATE using whichever toolchain is available (Chrome MCP, Playwright, or curl-tier fallback) — there is no separate `/devlyn:browser-validate` skill.
158
148
 
159
149
  ## Communication Style
160
150
 
package/README.md CHANGED
@@ -177,15 +177,16 @@ fixture count, and the replay command without running arms or judges. Dry-runs
177
177
  and lint prove wiring only; real score claims must cite the run id and fixture
178
178
  ids.
179
179
 
180
- ## Optional Power-User Skills
180
+ ### Migration from earlier versions
181
181
 
182
- One creative companion skill lives in `optional-skills/` — install it via the interactive installer when you need it.
182
+ Earlier versions of devlyn-cli shipped 16+ slash commands. The iter-0034 Phase 4 cutover (2026-05-04) and the 2026-05-14 follow-up consolidated them down to the three current commands. Upgrades automatically purge the legacy skill directories from `~/.claude/skills/`.
183
183
 
184
- | Command | Use When |
184
+ | Old command | Now use |
185
185
  |---|---|
186
- | `/devlyn:design-system` | Extract exact design tokens (colors, type scale, spacing) from a chosen UI style |
187
-
188
- > Earlier versions of devlyn-cli shipped 16+ skills (auto-resolve / preflight / evaluate / review / team-review / clean / update-docs / browser-validate / product-spec / feature-spec / recommend-features / discover-product / design-ui / implement-ui). Most were consolidated into `/devlyn:resolve` (which folds verification, review, and cleanup into its phases) plus `/devlyn:ideate` (which absorbs the planning surfaces) in the iter-0034 Phase 4 cutover (2026-05-04). `/devlyn:design-ui` is the required creative UI surface — on 2026-05-14 the optional `/devlyn:team-design-ui` was merged into it, so `/devlyn:design-ui` now always spawns a 5-specialist design team (Creative Director, Product Designer, Visual Designer, Interaction Designer, Accessibility Designer). Upgrades automatically remove the legacy skill directories from `~/.claude/skills/`.
186
+ | `/devlyn:auto-resolve`, `/devlyn:preflight`, `/devlyn:evaluate`, `/devlyn:review`, `/devlyn:team-resolve`, `/devlyn:team-review`, `/devlyn:clean`, `/devlyn:update-docs`, `/devlyn:browser-validate`, `/devlyn:implement-ui` | `/devlyn:resolve` (folds them into PLAN → IMPLEMENT → BUILD_GATE → CLEANUP → VERIFY) |
187
+ | `/devlyn:product-spec`, `/devlyn:feature-spec`, `/devlyn:recommend-features`, `/devlyn:discover-product` | `/devlyn:ideate` |
188
+ | `/devlyn:team-design-ui` | `/devlyn:design-ui` (now always spawns the 5-specialist team — Creative Director, Product Designer, Visual Designer, Interaction Designer, Accessibility Designer) |
189
+ | `/devlyn:design-system` | Removed 2026-05-14 — no replacement |
189
190
 
190
191
  ---
191
192
 
@@ -221,7 +222,6 @@ Selected during install. Run `npx devlyn-cli` again to add more.
221
222
  | `devlyn:pencil-pull` | Pull Pencil designs into code |
222
223
  | `devlyn:pencil-push` | Push codebase UI to Pencil canvas |
223
224
  | `devlyn:reap` | Safely reap orphaned MCP / codex / Superset child processes |
224
- | `devlyn:design-system` | Extract design tokens from a chosen UI style for exact reproduction |
225
225
 
226
226
  </details>
227
227
 
@@ -4,7 +4,7 @@ You are a code quality evaluator. Your job is to audit work produced by another
4
4
 
5
5
  ## Before You Start
6
6
 
7
- 1. **Check for done criteria**: Read `.devlyn/done-criteria.md` if it exists. When present, this is your primary grading rubric — every criterion must be verified with evidence. When absent, fall back to the checklists below.
7
+ 1. **Check for done criteria**: Read `.devlyn/runs/<run_id>/spec/expected.json` if a structured done-criteria source exists for the current run. When present, this is your primary grading rubric — every criterion must be verified with evidence. When absent, fall back to the checklists below.
8
8
 
9
9
  ## Calibration
10
10
 
@@ -36,14 +36,14 @@ You will be too lenient by default. You will identify real issues, then talk you
36
36
 
37
37
  ## Output
38
38
 
39
- Write findings to `.devlyn/EVAL-FINDINGS.md` for downstream consumption:
39
+ Write findings to `.devlyn/runs/<run_id>/eval-findings.md` for downstream consumption:
40
40
 
41
41
  ```markdown
42
42
  # Evaluation Findings
43
43
 
44
44
  ## Verdict: [PASS / PASS WITH ISSUES / NEEDS WORK / BLOCKED]
45
45
 
46
- ## Done Criteria Results (if done-criteria.md existed)
46
+ ## Done Criteria Results (if a done-criteria source existed)
47
47
  - [x] [criterion] — VERIFIED: [evidence]
48
48
  - [ ] [criterion] — FAILED: [what's wrong, file:line]
49
49
 
@@ -61,4 +61,4 @@ Write findings to `.devlyn/EVAL-FINDINGS.md` for downstream consumption:
61
61
  - [positive observations]
62
62
  ```
63
63
 
64
- Do NOT delete `.devlyn/done-criteria.md` or `.devlyn/EVAL-FINDINGS.md` — the orchestrator or user is responsible for cleanup.
64
+ Do NOT delete the run-directory artifacts (`spec/expected.json`, `eval-findings.md`) — the orchestrator or user is responsible for cleanup.
package/bin/devlyn.js CHANGED
@@ -118,11 +118,11 @@ const DEPRECATED_DIRS = [
118
118
  // upgrade so users only have them if they opt in via the interactive
119
119
  // installer (matches the pencil-pull / pencil-push pattern).
120
120
  'skills/devlyn:reap',
121
- 'skills/devlyn:design-system',
122
- // Merged into devlyn:design-ui on 2026-05-14. Source dir deleted entirely;
123
- // entry kept here so users who opted into the team variant get their stale
124
- // copy purged on upgrade.
121
+ // Deleted entirely on 2026-05-14 (devlyn:team-design-ui merged into
122
+ // devlyn:design-ui; devlyn:design-system removed outright). Entries kept
123
+ // so users who previously opted in get their stale copies purged on upgrade.
125
124
  'skills/devlyn:team-design-ui',
125
+ 'skills/devlyn:design-system',
126
126
  ];
127
127
 
128
128
  function getTargetDir() {
@@ -185,7 +185,6 @@ const OPTIONAL_ADDONS = [
185
185
  { name: 'devlyn:pencil-pull', desc: 'Pull Pencil designs into code with exact visual fidelity', type: 'local' },
186
186
  { name: 'devlyn:pencil-push', desc: 'Push codebase UI to Pencil canvas for design sync', type: 'local' },
187
187
  { name: 'devlyn:reap', desc: 'Safely reap orphaned MCP / codex / Superset child processes left behind by long Claude sessions', type: 'local' },
188
- { name: 'devlyn:design-system', desc: 'Extract design tokens from a chosen UI style for exact reproduction (creative power-user)', type: 'local' },
189
188
  // External skill packs (installed via npx skills add)
190
189
  { name: 'vercel-labs/agent-skills', desc: 'React, Next.js, React Native best practices', type: 'external' },
191
190
  { name: 'supabase/agent-skills', desc: 'Supabase integration patterns', type: 'external' },
@@ -559,64 +558,66 @@ function installSkillsForCLI(cliKey) {
559
558
  function installAgentsForCLI(cliKey) {
560
559
  const cli = CLI_TARGETS[cliKey];
561
560
  if (!cli) return false;
562
- if (!fs.existsSync(AGENTS_SOURCE)) return false;
563
561
 
564
- const agents = fs.readdirSync(AGENTS_SOURCE).filter((f) => f.endsWith('.md'));
565
- if (agents.length === 0) return false;
562
+ const agents = fs.existsSync(AGENTS_SOURCE)
563
+ ? fs.readdirSync(AGENTS_SOURCE).filter((f) => f.endsWith('.md'))
564
+ : [];
566
565
 
567
- log(`\n🤖 Installing agents for ${cli.name}...`, 'cyan');
566
+ if (agents.length > 0) {
567
+ log(`\n🤖 Installing agents for ${cli.name}...`, 'cyan');
568
568
 
569
- if (cli.configDir) {
570
- // CLI supports an agents directory — copy agent files there
571
- const destDir = path.join(process.cwd(), cli.configDir);
572
- if (!fs.existsSync(destDir)) {
573
- fs.mkdirSync(destDir, { recursive: true });
574
- }
575
- for (const file of agents) {
576
- const src = path.join(AGENTS_SOURCE, file);
577
- const dest = path.join(destDir, file);
578
- fs.copyFileSync(src, dest);
579
- log(` → ${cli.configDir}/${file}`, 'dim');
580
- }
581
- } else {
582
- // CLI uses a single instructions file — append agent content
583
- const destFile = path.join(process.cwd(), cli.instructionsFile);
584
- const separator = '\n\n---\n\n# Devlyn Agent Instructions\n\n';
585
- const agentContent = agents.map((file) => {
586
- return fs.readFileSync(path.join(AGENTS_SOURCE, file), 'utf8');
587
- }).join('\n\n---\n\n');
588
-
589
- let existing = '';
590
- if (fs.existsSync(destFile)) {
591
- existing = fs.readFileSync(destFile, 'utf8');
592
- // Remove previous devlyn agent section if present
593
- const devlynMarker = '# Devlyn Agent Instructions';
594
- const markerIdx = existing.indexOf(devlynMarker);
595
- if (markerIdx > 0) {
596
- // Find the separator before the marker (---\n\n)
597
- const sepIdx = existing.lastIndexOf('---', markerIdx);
598
- existing = existing.slice(0, sepIdx > 0 ? sepIdx : markerIdx).trimEnd();
569
+ if (cli.configDir) {
570
+ // CLI supports an agents directory — copy agent files there
571
+ const destDir = path.join(process.cwd(), cli.configDir);
572
+ if (!fs.existsSync(destDir)) {
573
+ fs.mkdirSync(destDir, { recursive: true });
599
574
  }
600
- } else if (cli.baseInstructionsFile) {
601
- const baseInstructionsSrc = path.join(__dirname, '..', cli.baseInstructionsFile);
602
- if (fs.existsSync(baseInstructionsSrc)) {
603
- existing = fs.readFileSync(baseInstructionsSrc, 'utf8').trimEnd();
575
+ for (const file of agents) {
576
+ const src = path.join(AGENTS_SOURCE, file);
577
+ const dest = path.join(destDir, file);
578
+ fs.copyFileSync(src, dest);
579
+ log(` → ${cli.configDir}/${file}`, 'dim');
580
+ }
581
+ } else {
582
+ // CLI uses a single instructions file — append agent content
583
+ const destFile = path.join(process.cwd(), cli.instructionsFile);
584
+ const separator = '\n\n---\n\n# Devlyn Agent Instructions\n\n';
585
+ const agentContent = agents.map((file) => {
586
+ return fs.readFileSync(path.join(AGENTS_SOURCE, file), 'utf8');
587
+ }).join('\n\n---\n\n');
588
+
589
+ let existing = '';
590
+ if (fs.existsSync(destFile)) {
591
+ existing = fs.readFileSync(destFile, 'utf8');
592
+ // Remove previous devlyn agent section if present
593
+ const devlynMarker = '# Devlyn Agent Instructions';
594
+ const markerIdx = existing.indexOf(devlynMarker);
595
+ if (markerIdx > 0) {
596
+ // Find the separator before the marker (---\n\n)
597
+ const sepIdx = existing.lastIndexOf('---', markerIdx);
598
+ existing = existing.slice(0, sepIdx > 0 ? sepIdx : markerIdx).trimEnd();
599
+ }
600
+ } else if (cli.baseInstructionsFile) {
601
+ const baseInstructionsSrc = path.join(__dirname, '..', cli.baseInstructionsFile);
602
+ if (fs.existsSync(baseInstructionsSrc)) {
603
+ existing = fs.readFileSync(baseInstructionsSrc, 'utf8').trimEnd();
604
+ }
604
605
  }
605
- }
606
606
 
607
- fs.writeFileSync(destFile, existing + separator + agentContent + '\n');
608
- log(` → ${cli.instructionsFile} (agent instructions appended)`, 'dim');
607
+ fs.writeFileSync(destFile, existing + separator + agentContent + '\n');
608
+ log(` → ${cli.instructionsFile} (agent instructions appended)`, 'dim');
609
+ }
609
610
  }
610
611
 
611
- // If this CLI also supports a global skill-loader (currently Codex), install
612
- // devlyn:resolve + devlyn:ideate + devlyn:design-ui + _shared. Codex invokes
613
- // these as skills (for example `$devlyn:resolve`), not Claude slash commands.
612
+ // Always install global skills (Codex-style skill loader) regardless of
613
+ // whether agent files were present. Agent install and skill install are
614
+ // independent capabilities.
614
615
  const skillsCopied = installSkillsForCLI(cliKey);
615
616
  if (skillsCopied > 0) {
616
617
  log(` → ${skillsCopied} skill${skillsCopied > 1 ? 's' : ''} installed (devlyn:resolve / devlyn:ideate / devlyn:design-ui / _shared)`, 'dim');
617
618
  }
618
619
 
619
- return true;
620
+ return agents.length > 0 || skillsCopied > 0;
620
621
  }
621
622
 
622
623
  function installAgentsForAllDetected() {
@@ -2,13 +2,13 @@
2
2
 
3
3
  The runtime contract every sub-agent inside `/devlyn:resolve` (PLAN / IMPLEMENT / BUILD_GATE / CLEANUP / VERIFY) and `/devlyn:ideate` must satisfy. Source of truth for sub-agent behavior on user tasks. NOT for autoresearch-loop / harness-developer concerns (see `autoresearch/PRINCIPLES.md`).
4
4
 
5
- The four sections below mirror the corresponding CLAUDE.md sections (Subtractive-first editing, Goal-locked execution, No-workaround discipline, Evidence over claim). Each section is wrapped in `<!-- runtime-principles:section=NAME:begin -->` / `:end -->` markers in BOTH this file and CLAUDE.md; lint Check 12 (added in iter-0019.A Step 5) extracts each named block from both files and diffs to detect drift.
5
+ The three sections below mirror the corresponding CLAUDE.md sections (Subtractive-first editing, Goal-locked execution, Evidence over claim). No-workaround discipline lives in CLAUDE.md Core Principle #1 only — it does not have a runtime-mirror block. Each mirrored section is wrapped in `<!-- runtime-principles:section=NAME:begin -->` / `:end -->` markers in BOTH this file and CLAUDE.md; lint Check 12 extracts each named block from both files and diffs to detect drift.
6
6
 
7
7
  <!-- runtime-principles:contract:begin -->
8
8
  ## Subtractive-first editing — perfection = nothing left to remove
9
9
  <!-- runtime-principles:section=subtractive-first:begin -->
10
10
 
11
- > "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." — Saint-Exupéry. **This is the operating definition of "done" in this repo.** A change is finished when no further line, branch, flag, or doc paragraph can be removed without breaking a learned failure mode. Not before.
11
+ > **Operating definition of "done" in this repo** (Saint-Exupéry discipline rule above): a change is finished when no further line, branch, flag, or doc paragraph can be removed without breaking a learned failure mode. Not before.
12
12
 
13
13
  This rule overrides instinct. LLMs (including you) are trained on corpora that reward elaborate, defensive, "thorough" code — so the default impulse is to add. That impulse is wrong here. Read the rules below as hard tests, not aesthetic preferences. They are not optional, not negotiable, and not satisfiable by writing more careful additions.
14
14
 
@@ -50,15 +50,15 @@ This rule exists because LLMs (including you) are trained to be helpful, compreh
50
50
 
51
51
  **The five drift patterns you must refuse to execute on:**
52
52
 
53
- 1. **Unrequested work.** "While I'm here, I noticed X is broken/ugly/inefficient" → **stop**. The user did not ask for X. If X is a real defect, surface it as a finding, a follow-up suggestion, or an entry in a TODO list — do NOT fix it inside the current change. Mixing unrequested work with requested work is what makes diffs unreviewable and PRs eternal.
54
- 2. **Tangential cleanup.** "This file looks messy, let me also tidy..." → **stop**. The current task is the only task. Unrelated cleanup is a separate change requiring its own justification, scope, and pre-flight 0 check.
53
+ 1. **Unrequested work.** "While I'm here, I noticed X is broken/ugly/inefficient" → **stop**. The user did not ask for X. If X is a real defect, surface it as a finding, a follow-up suggestion, or an entry in a TODO list — do NOT fix it inside the current change. Mixing unrequested work with requested work is what makes diffs unreviewable and PRs eternal. **Pre-existing dead code → mention only, do NOT delete; orphans YOUR change created (now-unused imports, variables, functions) → clean them up.**
54
+ 2. **Tangential cleanup.** "This file looks messy, let me also tidy..." → **stop**. The current task is the only task. Unrelated cleanup is a separate change requiring its own justification, scope, and pre-flight 0 check. **Match existing style even if you'd write it differently; do NOT touch comments, formatting, or code orthogonal to your real change** — silent side-effects on neighboring lines are the most common Karpathy-observed regression class.
55
55
  3. **Speculative robustness.** "Just adding a check / fallback / handler for the case where..." → **stop**. If the case has not been observed (in production, in tests, in a finding), it does not belong in this change. Defensive code added for unobserved cases is the most common form of accretion debt — it never gets removed because nobody can prove the case never happens.
56
56
  4. **Re-scoping mid-flight.** "Actually, the better way to do this is to also restructure / rename / migrate..." → **stop**. If you discover the requested approach is wrong, surface that to the user with evidence and let them adjudicate. Do NOT silently expand scope. The user's explicit redirect is the only authorization to enlarge a task.
57
57
  5. **Curiosity detours.** "Let me also explore how Y works to understand this better..." → **stop**, unless Y is provably on the goal's critical path. Curiosity-driven exploration is creative-mode; default is execution-mode.
58
58
 
59
59
  **The single drift test before any deviation from the stated goal:** *"Did the user ask for this, OR does the user's stated goal strictly require it?"* If the answer to both is no, do not do it. Surface it as a note (commit message, end-of-turn summary, finding) and continue on the original path.
60
60
 
61
- **Creative-mode is the narrow exception, not the default.** Creative-mode applies only when (a) the user explicitly invoked an ideation/exploration surface (`/devlyn:ideate`, optional `/devlyn:design-system`, "let's brainstorm", "explore options for"), OR (b) the goal is genuinely under-specified and a clarifying question is impossible (extremely rare — usually you should ask). For everything else — bug fixes, feature work, refactors, doc updates, pipeline runs, code review, debugging — execution-mode is the default and drift is a defect, not a feature.
61
+ **Creative-mode is the narrow exception, not the default.** Creative-mode applies only when (a) the user explicitly invoked an ideation/exploration surface (`/devlyn:ideate`, `/devlyn:design-ui`, "let's brainstorm", "explore options for"), OR (b) the goal is genuinely under-specified and a clarifying question is impossible (extremely rare — usually you should ask). For everything else — bug fixes, feature work, refactors, doc updates, pipeline runs, code review, debugging — execution-mode is the default and drift is a defect, not a feature.
62
62
 
63
63
  **Anti-rationalization clause** — explicitly guarding against LLM hedging:
64
64
 
@@ -72,16 +72,6 @@ This rule exists because LLMs (including you) are trained to be helpful, compreh
72
72
  **Stopping rule.** A task is done when the user's stated goal is closed AND no off-path work was added. If you find yourself hesitating because "I should also do Z" — Z is drift. Note it for follow-up, do not execute.
73
73
  <!-- runtime-principles:section=goal-locked:end -->
74
74
 
75
- ## No-workaround discipline
76
- <!-- runtime-principles:section=no-workaround:begin -->
77
-
78
- No `any`, no `@ts-ignore`, no silent `catch`, no hardcoded values, no helper scripts that bypass the root cause. Fix root causes; handle errors with user-visible state per the rule above.
79
-
80
- **Permitted exceptions** (explicitly carved out):
81
- - CSS fallback fonts, CDN failover, image placeholders — widely-accepted best practices.
82
- - No engine-availability fallback is permitted for `/devlyn:resolve` pair/risk-probe routes. If Codex or Claude is required and unavailable, the run stops with `BLOCKED:codex-unavailable` or `BLOCKED:claude-unavailable` plus setup guidance. `--no-pair` / `--no-risk-probes` are explicit user opt-outs, not fallbacks.
83
- <!-- runtime-principles:section=no-workaround:end -->
84
-
85
75
  ## Evidence over claim
86
76
  <!-- runtime-principles:section=evidence:begin -->
87
77
 
@@ -648,8 +648,3 @@ After `TeamCreate` succeeds, treat Phases 2-6 as `try/finally`: run cleanup even
648
648
  </output_format>
649
649
 
650
650
  Make bold choices. Each design should be portfolio-worthy — something you'd proudly present.
651
-
652
- <next_step>
653
- After the user picks a style, suggest:
654
- → Run `/devlyn:design-system [style-number]` to extract design tokens from the chosen style into a reusable design system reference.
655
- </next_step>
@@ -8,7 +8,7 @@ Standard methodology for investigating bugs, issues, and unexpected behavior. Ap
8
8
  - Error logs or stack traces need diagnosis
9
9
  - "Why does X happen?" or "What's causing X?" questions
10
10
  - Debugging sessions
11
- - Any use of `/devlyn:resolve` or `/devlyn:team-resolve`
11
+ - Any use of `/devlyn:resolve`
12
12
 
13
13
  ## 5 Whys Protocol
14
14
 
@@ -62,5 +62,4 @@ If the real fix requires significant refactoring, present the scope to the user
62
62
 
63
63
  ## Routing
64
64
 
65
- - **Simple issue** (single file, obvious cause): Use `/devlyn:resolve`
66
- - **Complex issue** (multi-module, unclear cause, security implications): Use `/devlyn:team-resolve` for multi-perspective investigation
65
+ - Use `/devlyn:resolve` — handles both simple and multi-module investigations; VERIFY pair-judge fires conditionally on high-risk / complex specs.
@@ -7,7 +7,7 @@ Quality framework for building and improving UI from design systems. Apply these
7
7
  - Building UI components or pages
8
8
  - Implementing designs from a design system
9
9
  - Improving or refactoring existing UI
10
- - Any use of `/devlyn:implement-ui`, `/devlyn:design-ui`, or `/devlyn:design-system`
10
+ - Any use of `/devlyn:design-ui`
11
11
  - Frontend development tasks involving visual design
12
12
 
13
13
  ## Design System Fidelity
@@ -70,5 +70,5 @@ Every interactive component or data-dependent view needs all states:
70
70
  ## Routing
71
71
 
72
72
  - **Build new UI or improve existing**: Use `/devlyn:implement-ui` for a full team approach
73
- - **Add features to existing UI**: Use `/devlyn:team-resolve` with the feature description
73
+ - **Add features to existing UI**: Use `/devlyn:resolve` with the feature description
74
74
  - **Review UI code quality**: Use `/devlyn:team-review` for multi-perspective code review
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "devlyn-cli",
3
- "version": "2.4.0",
3
+ "version": "2.5.0",
4
4
  "description": "AI development toolkit for Claude Code — ideate, resolve, and ship with context engineering and agent orchestration",
5
5
  "homepage": "https://github.com/fysoul17/devlyn-cli#readme",
6
6
  "bin": {
@@ -3773,14 +3773,16 @@ fi
3773
3773
  # must mirror the corresponding CLAUDE.md sections. Drift in one source-of-truth without
3774
3774
  # the other produces silent behavioral divergence between session-level and sub-agent
3775
3775
  # enforcement. Per-section markers `<!-- runtime-principles:section=NAME:begin/end -->`
3776
- # wrap each of the 4 sections (subtractive-first, goal-locked, no-workaround, evidence)
3777
- # in BOTH files. Check 12 extracts each named block from both files and diffs.
3776
+ # wrap each of the 3 mirrored sections (subtractive-first, goal-locked, evidence)
3777
+ # in BOTH files. No-workaround discipline lives in CLAUDE.md Core Principle #1
3778
+ # only and is not mirrored to runtime-principles.md.
3779
+ # Check 12 extracts each named block from both files and diffs.
3778
3780
  # ---------------------------------------------------------------------------
3779
3781
  section "Check 12: CLAUDE.md ↔ runtime-principles.md per-section excerpt parity"
3780
3782
  rp_src="config/skills/_shared/runtime-principles.md"
3781
3783
  claude_src="CLAUDE.md"
3782
3784
  rp_drift=0
3783
- expected_sections="subtractive-first goal-locked no-workaround evidence"
3785
+ expected_sections="subtractive-first goal-locked evidence"
3784
3786
 
3785
3787
  if [ ! -f "$rp_src" ]; then
3786
3788
  bad "$rp_src — missing"
@@ -3859,7 +3861,7 @@ else
3859
3861
  fi
3860
3862
 
3861
3863
  if [ $rp_drift -eq 0 ]; then
3862
- ok "all 4 contract sections in parity (subtractive-first / goal-locked / no-workaround / evidence) — markers, topology, content"
3864
+ ok "all 3 mirrored contract sections in parity (subtractive-first / goal-locked / evidence) — markers, topology, content"
3863
3865
  fi
3864
3866
  fi
3865
3867
 
@@ -1,503 +0,0 @@
1
- ---
2
- name: devlyn:design-system
3
- description: Extract all design values from selected style for exact reproduction
4
- argument-hint: <style-number> [platform] (e.g., "3", "3 flutter", "style 2 web")
5
- allowed-tools: Bash(ls:*), Bash(cat:*), Bash(grep:*), View, Edit, Write
6
- ---
7
-
8
- Extract design values from a style preview HTML to generate a framework-agnostic design reference.
9
-
10
- <context>
11
- User input: $ARGUMENTS
12
- Available styles: !`ls -1 docs/design/style_*.html 2>/dev/null || echo "No styles found"`
13
- </context>
14
-
15
- <input_parsing>
16
-
17
- Parse two values from input:
18
-
19
- 1. **Style number** (required): "3", "style 3", or "style_3_concept_name" all resolve to style 3
20
-
21
- 2. **Platform** (optional, defaults to "web"):
22
- - `web` — HTML/CSS, React, Vue, Svelte, Next.js
23
- - `flutter` — Dart/Flutter
24
- - `native` — iOS (SwiftUI) / Android (Compose)
25
- - `desktop` — Electron, Tauri, PyQt
26
- - `terminal` — CLI apps with color support
27
-
28
- </input_parsing>
29
-
30
- <goal>
31
-
32
- Create a design reference document that enables any AI agent to:
33
-
34
- 1. Apply correct visual styling (colors, typography, spacing, shadows, motion)
35
- 2. Build components that match the design language (patterns, behaviors, icon approach)
36
-
37
- This document contains **values and patterns**—no framework-specific implementation code. The implementing agent determines the correct syntax based on the actual project setup.
38
-
39
- **Important distinction**:
40
-
41
- - This document defines HOW things should look (reusable across any page structure)
42
- - Feature specs define WHAT to build (page structure, sections, content)
43
- - An agent uses both: feature spec for structure + this document for styling
44
-
45
- </goal>
46
-
47
- <extraction_requirements>
48
-
49
- Extract all concrete values that define the design's appearance and reusable component patterns.
50
-
51
- <colors>
52
- Extract every color used:
53
- - Background, surface, text primary, text secondary
54
- - Accent colors (primary, secondary if present)
55
- - Borders, dividers, hover states
56
- - Any gradients (with exact color stops and direction)
57
-
58
- Format: hex values (e.g., #F4F7FA)
59
- </colors>
60
-
61
- <typography>
62
- Extract the exact font configuration:
63
- - Font family name (exact Google Fonts spelling)
64
- - All font weights used (e.g., 300, 400, 600, 700)
65
-
66
- For each text level (H1, H2, H3, Body, Body Large, Small/Caption, Label):
67
-
68
- - Size in pixels
69
- - Weight
70
- - Letter-spacing (em or px)
71
- - Line-height (unitless ratio)
72
- </typography>
73
-
74
- <spacing>
75
- Extract actual pixel values used, not abstract scales:
76
- - Section/page padding
77
- - Hero section padding (if different)
78
- - Component/card padding (large and small variants)
79
- - Element gap (between buttons, cards)
80
- - Tight gap (icon + text, inline elements)
81
- - Navigation gaps
82
- - Section header margin-bottom
83
- </spacing>
84
-
85
- <shape>
86
- Extract border-radius values:
87
- - Cards and containers
88
- - Feature icons
89
- - Small icons
90
- - Buttons and pills (often "full" or 100px)
91
- - CTA sections (if different)
92
- </shape>
93
-
94
- <shadows>
95
- Extract complete box-shadow CSS values:
96
- - Default/subtle shadow
97
- - Navigation/badge shadow
98
- - Floating card shadow
99
- - Hover state shadow
100
- - Button hover shadow
101
-
102
- Include the full value: offset, blur, spread, color with alpha.
103
- </shadows>
104
-
105
- <motion>
106
- Extract animation timing:
107
- - Easing function (exact cubic-bezier or keyword)
108
- - Base transition duration
109
- - Enter/appear animation duration
110
- - Scroll-triggered transition duration
111
- - Stagger delay between items
112
- - Any cyclic animation durations (float, drift effects)
113
- </motion>
114
-
115
- <effects>
116
- Only if present in the design:
117
- - Background effects (orbs, gradients, patterns)
118
- - Glassmorphism (backdrop-filter blur value, background opacity)
119
- - Gradient text treatment
120
- - Any texture overlays
121
- </effects>
122
-
123
- <components>
124
- Extract reusable component patterns found in the design. For each distinct component type:
125
-
126
- 1. **Navigation** (if present):
127
-
128
- - Layout type (fixed, sticky, static)
129
- - Visual treatment (solid, glassmorphism, transparent)
130
- - Elements included (logo style, link style, CTA style)
131
-
132
- 2. **Cards** (identify all card variants):
133
-
134
- - Name/purpose (feature card, stat card, testimonial card, etc.)
135
- - Icon approach: emoji, SVG, or icon font
136
- - If emoji: note this explicitly
137
- - Icon container style (size, background, radius)
138
- - Content structure (what elements: icon, title, description, stat, etc.)
139
- - Hover behavior (transform, shadow change, with duration)
140
-
141
- 3. **Buttons** (identify all variants):
142
-
143
- - Primary, secondary, ghost styles
144
- - Hover transforms and shadow changes
145
-
146
- 4. **Badges/Labels**:
147
-
148
- - Visual style (pill, tag, etc.)
149
- - Any animated elements (pulse dots, etc.)
150
-
151
- 5. **Section Headers**:
152
-
153
- - Label + title + description pattern
154
- - Alignment (centered, left)
155
-
156
- 6. **Special Elements**:
157
- - Any unique patterns (floating cards, step indicators, etc.)
158
- - Animation behaviors
159
-
160
- For each component, describe it as a reusable pattern that can be applied regardless of how many times it appears or what content it contains.
161
- </components>
162
-
163
- <interactive_states>
164
- Document hover/active/focus states for interactive elements:
165
-
166
- - What property changes (transform, shadow, background, scale, opacity)
167
- - From value → To value
168
- - Duration and easing
169
-
170
- Format as a reference table.
171
- </interactive_states>
172
-
173
- <character>
174
- Summarize the design's personality:
175
- - Theme: Light or Dark
176
- - Shape language: Angular, Curved, or Mixed
177
- - Density: Spacious or Dense
178
- - Energy: Calm, Dynamic, or Playful
179
- </character>
180
-
181
- </extraction_requirements>
182
-
183
- <output_format>
184
-
185
- Generate `docs/design-system.md` with this structure:
186
-
187
- ```markdown
188
- # Design Style: {Concept Name}
189
-
190
- > {One sentence capturing the design's mood and intent}
191
-
192
- **Platform**: {platform}
193
- **Source**: `{source filename}`
194
-
195
- ---
196
-
197
- ## Implementation Note
198
-
199
- This document defines the visual design language—HOW things should look.
200
-
201
- When implementing:
202
-
203
- 1. Use your **feature spec** for page structure (WHAT sections/components to build)
204
- 2. Use **this document** for styling those components (HOW they should look)
205
- 3. Apply values using syntax appropriate for your framework
206
-
207
- ---
208
-
209
- ## Colors
210
-
211
- | Role | Value |
212
- | --------------------- | --------- |
213
- | Background | `#______` |
214
- | Surface | `#______` |
215
- | Text | `#______` |
216
- | Text Muted | `#______` |
217
- | Accent | `#______` |
218
- | {additional roles...} | `#______` |
219
-
220
- **Gradients** (if present):
221
-
222
- - {Name}: `{direction}deg, {color1} {stop1}%, {color2} {stop2}%`
223
-
224
- ## Typography
225
-
226
- **Font Family**: {exact name} (with {fallback} for {language} if applicable)
227
- **Weights**: {comma-separated list}
228
-
229
- | Element | Size | Weight | Letter-spacing | Line-height |
230
- | ------------- | ----- | ------ | -------------- | ----------- |
231
- | H1 | {n}px | {n} | {n}em | {n} |
232
- | H2 | {n}px | {n} | {n}em | {n} |
233
- | H3 | {n}px | {n} | {n}em | {n} |
234
- | Body | {n}px | {n} | — | {n} |
235
- | Body Large | {n}px | {n} | — | {n} |
236
- | Small/Caption | {n}px | {n} | — | {n} |
237
- | Label | {n}px | {n} | — | {n} |
238
-
239
- ## Spacing
240
-
241
- | Context | Value |
242
- | ---------------------------- | -------------------------------- |
243
- | Section padding | {n}px vertical, {n}px horizontal |
244
- | Hero padding | {top}px top, {bottom}px bottom |
245
- | Card padding (large) | {n}px |
246
- | Card padding (small) | {n}px |
247
- | Element gap | {n}px |
248
- | Tight gap | {n}px |
249
- | Section header margin-bottom | {n}px |
250
-
251
- ## Shape
252
-
253
- | Context | Radius |
254
- | ---------------- | ------------ |
255
- | Cards/Containers | {n}px |
256
- | Icons (large) | {n}px |
257
- | Icons (small) | {n}px |
258
- | Buttons/Pills | {n}px (full) |
259
-
260
- ## Shadows
261
-
262
- | Name | Value |
263
- | ------------ | --------------------- |
264
- | Subtle | `{full shadow value}` |
265
- | Card | `{full shadow value}` |
266
- | Card Hover | `{full shadow value}` |
267
- | Float | `{full shadow value}` |
268
- | Button Hover | `{full shadow value}` |
269
-
270
- ## Motion
271
-
272
- | Property | Value |
273
- | ------------------- | ---------------------------------- |
274
- | Easing (soft) | `cubic-bezier({a}, {b}, {c}, {d})` |
275
- | Easing (bounce) | `cubic-bezier({a}, {b}, {c}, {d})` |
276
- | Base duration | {n}s |
277
- | Hover duration | {n}s |
278
- | Enter duration | {n}s |
279
- | Stagger | {n}s |
280
- | {Cyclic animations} | {n}s |
281
-
282
- ## Effects
283
-
284
- {Only include sections that exist in the source design}
285
-
286
- **Background Elements** (if present):
287
-
288
- - {Description with sizes, colors, blur, positions, animations}
289
-
290
- **Glassmorphism** (if present):
291
-
292
- - Background: `rgba({r}, {g}, {b}, {a})`
293
- - Backdrop blur: {n}px
294
-
295
- **Gradient Text** (if present):
296
-
297
- - Applied to: {list elements}
298
- - CSS: background-clip text with transparent fill
299
-
300
- ---
301
-
302
- ## Component Patterns
303
-
304
- Reusable patterns that define how components should look, regardless of page structure.
305
-
306
- ### Icon Approach
307
-
308
- - **Type**: {emoji | SVG | icon font}
309
- - **Container**: {size}px, {background}, {radius}px radius
310
- {If emoji, note: "Use emoji characters directly, not icon libraries"}
311
-
312
- ### Navigation
313
-
314
- - **Position**: {fixed center | sticky top | etc.}
315
- - **Style**: {glassmorphism | solid | transparent}
316
- - **Elements**: Logo ({style}), Links ({style}), CTA button ({style})
317
-
318
- ### Card: Feature
319
-
320
- - **Use for**: Feature highlights, service descriptions
321
- - **Structure**: Icon container → Title → Description
322
- - **Icon**: {size}px container, {background style}
323
- - **Hover**: {transform}, {shadow change}, {duration}
324
-
325
- ### Card: Stat
326
-
327
- - **Use for**: Metrics, numbers, KPIs
328
- - **Structure**: Large value (gradient text) → Label
329
- - **Hover**: {transform}, {duration}
330
-
331
- ### Card: {Other variants found...}
332
-
333
- {Document each distinct card pattern}
334
-
335
- ### Button: Primary
336
-
337
- - **Style**: {gradient/solid} background, {text color}
338
- - **Hover**: {transform}, {shadow}
339
-
340
- ### Button: Secondary
341
-
342
- - **Style**: {background}, {border if any}
343
- - **Hover**: {changes}
344
-
345
- ### Badge/Label
346
-
347
- - **Style**: Pill shape, {background}, {text style}
348
- - **Animation**: {if any, e.g., pulse dot}
349
-
350
- ### Section Header
351
-
352
- - **Pattern**: Label badge (optional) → H2 title → Description (optional)
353
- - **Alignment**: {centered | left}
354
- - **Spacing**: {margin-bottom}px below
355
-
356
- ### {Special Patterns}
357
-
358
- {Document any unique patterns like floating cards, step indicators, etc.}
359
-
360
- ---
361
-
362
- ## Interactive States
363
-
364
- | Component | Trigger | Property | From | To | Duration |
365
- | ------------------------------------------ | ------- | --------- | ------ | ---------------- | -------- |
366
- | Feature Card | hover | transform | none | translateY(-8px) | {n}s |
367
- | Feature Card | hover | shadow | subtle | card-hover | {n}s |
368
- | Button Primary | hover | transform | none | translateY(-3px) | {n}s |
369
- | Button Primary | hover | shadow | none | button-hover | {n}s |
370
- | {continue for all interactive elements...} | | | | | |
371
-
372
- ---
373
-
374
- ## Character
375
-
376
- - **Theme**: {Light | Dark}
377
- - **Shape**: {Angular | Curved | Mixed}
378
- - **Density**: {Spacious | Dense}
379
- - **Energy**: {Calm | Dynamic | Playful}
380
-
381
- ---
382
-
383
- ## Token Reference
384
-
385
- Quick reference for implementation.
386
-
387
- ### Colors
388
- ```
389
-
390
- color-bg: #**\_\_**
391
- color-surface: #**\_\_**
392
- color-text: #**\_\_**
393
- color-text-muted: #**\_\_**
394
- color-accent: #**\_\_**
395
- gradient-primary: {direction}, {stops}
396
-
397
- ```
398
-
399
- ### Typography
400
- ```
401
-
402
- font-family: {name}, {fallback}
403
- font-weight-regular: {n}
404
- font-weight-semibold: {n}
405
- font-weight-bold: {n}
406
-
407
- ```
408
-
409
- ### Spacing
410
- ```
411
-
412
- space-section: {n}px
413
- space-component: {n}px
414
- space-element: {n}px
415
- space-tight: {n}px
416
-
417
- ```
418
-
419
- ### Shape
420
- ```
421
-
422
- radius-card: {n}px
423
- radius-icon: {n}px
424
- radius-button: full
425
-
426
- ```
427
-
428
- ### Motion
429
- ```
430
-
431
- ease-soft: cubic-bezier({values})
432
- ease-bounce: cubic-bezier({values})
433
- duration-base: {n}s
434
- duration-hover: {n}s
435
-
436
- ```
437
-
438
- ---
439
-
440
- _Generated from: `{source filename}`_
441
- ```
442
-
443
- </output_format>
444
-
445
- <platform_adaptations>
446
-
447
- Adjust the Token Reference section based on platform:
448
-
449
- **flutter**: Include Dart-style comments showing Color() and Duration() syntax as reference
450
- **native**: Note that colors should be added to asset catalogs
451
- **terminal**: Include ANSI color code mappings
452
-
453
- Keep these as **reference comments**, not copy-paste code.
454
-
455
- </platform_adaptations>
456
-
457
- <quality_verification>
458
-
459
- Before saving, verify completeness:
460
-
461
- **Values extraction**:
462
-
463
- - [ ] All colors extracted with valid hex values
464
- - [ ] Font name matches exact Google Fonts spelling
465
- - [ ] Typography table complete for all text levels
466
- - [ ] Spacing values are concrete pixels
467
- - [ ] Border radius values for all contexts
468
- - [ ] Shadow values are complete CSS
469
- - [ ] Easing is exact cubic-bezier
470
- - [ ] Animation durations in seconds
471
-
472
- **Component patterns**:
473
-
474
- - [ ] Icon approach clearly stated (emoji vs SVG vs font)
475
- - [ ] All card variants documented with hover behavior
476
- - [ ] Button variants documented
477
- - [ ] Navigation pattern documented
478
- - [ ] Section header pattern documented
479
- - [ ] Special/unique patterns documented
480
-
481
- **Interactive states**:
482
-
483
- - [ ] All hover transforms documented
484
- - [ ] All shadow transitions documented
485
- - [ ] Durations specified for each
486
-
487
- **Reproduction test**: Could another agent read this document and build components that look identical, regardless of what page structure they're implementing?
488
-
489
- </quality_verification>
490
-
491
- <execution>
492
-
493
- 1. Parse style number and platform from $ARGUMENTS
494
- 2. Read the matching `docs/design/style_{n}_*.html` file
495
- 3. Extract all values following the extraction requirements
496
- 4. Extract all component patterns
497
- 5. Document all interactive states
498
- 6. Generate `docs/design-system.md` following the output format
499
- 7. Confirm what was created and note the source file
500
-
501
- If the style file doesn't exist, list the available options.
502
-
503
- </execution>