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 +75 -4
- package/CLAUDE.md +8 -18
- package/README.md +7 -7
- package/agents-config/evaluator.md +4 -4
- package/bin/devlyn.js +51 -50
- package/config/skills/_shared/runtime-principles.md +5 -15
- package/config/skills/devlyn:design-ui/SKILL.md +0 -5
- package/config/skills/root-cause-analysis/SKILL.md +2 -3
- package/config/skills/ui-implementation-standards/SKILL.md +2 -2
- package/package.json +1 -1
- package/scripts/lint-skills.sh +6 -4
- package/optional-skills/devlyn:design-system/SKILL.md +0 -503
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.
|
|
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.
|
|
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
|
-
>
|
|
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`,
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
180
|
+
### Migration from earlier versions
|
|
181
181
|
|
|
182
|
-
|
|
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
|
-
|
|
|
184
|
+
| Old command | Now use |
|
|
185
185
|
|---|---|
|
|
186
|
-
| `/devlyn:
|
|
187
|
-
|
|
188
|
-
|
|
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/
|
|
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/
|
|
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
|
|
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
|
|
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
|
-
|
|
122
|
-
//
|
|
123
|
-
//
|
|
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.
|
|
565
|
-
|
|
562
|
+
const agents = fs.existsSync(AGENTS_SOURCE)
|
|
563
|
+
? fs.readdirSync(AGENTS_SOURCE).filter((f) => f.endsWith('.md'))
|
|
564
|
+
: [];
|
|
566
565
|
|
|
567
|
-
|
|
566
|
+
if (agents.length > 0) {
|
|
567
|
+
log(`\n🤖 Installing agents for ${cli.name}...`, 'cyan');
|
|
568
568
|
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
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
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
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
|
-
|
|
608
|
-
|
|
607
|
+
fs.writeFileSync(destFile, existing + separator + agentContent + '\n');
|
|
608
|
+
log(` → ${cli.instructionsFile} (agent instructions appended)`, 'dim');
|
|
609
|
+
}
|
|
609
610
|
}
|
|
610
611
|
|
|
611
|
-
//
|
|
612
|
-
//
|
|
613
|
-
//
|
|
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
|
|
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
|
|
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
|
-
>
|
|
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`,
|
|
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`
|
|
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
|
-
-
|
|
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:
|
|
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:
|
|
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.
|
|
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": {
|
package/scripts/lint-skills.sh
CHANGED
|
@@ -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
|
|
3777
|
-
# in BOTH files.
|
|
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
|
|
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
|
|
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>
|