baldart 4.81.0 → 4.82.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/CHANGELOG.md +27 -0
- package/README.md +5 -3
- package/VERSION +1 -1
- package/framework/.claude/skills/api-design-principles/CHANGELOG.md +7 -0
- package/framework/.claude/skills/api-design-principles/SKILL.md +1 -0
- package/framework/.claude/skills/baldart-push/CHANGELOG.md +7 -0
- package/framework/.claude/skills/baldart-push/SKILL.md +1 -0
- package/framework/.claude/skills/baldart-update/CHANGELOG.md +7 -0
- package/framework/.claude/skills/baldart-update/SKILL.md +1 -0
- package/framework/.claude/skills/bug/CHANGELOG.md +7 -0
- package/framework/.claude/skills/bug/SKILL.md +1 -0
- package/framework/.claude/skills/capture/CHANGELOG.md +7 -0
- package/framework/.claude/skills/capture/SKILL.md +1 -1
- package/framework/.claude/skills/context-primer/CHANGELOG.md +7 -0
- package/framework/.claude/skills/context-primer/SKILL.md +1 -0
- package/framework/.claude/skills/copywriting/CHANGELOG.md +7 -0
- package/framework/.claude/skills/design-sync/CHANGELOG.md +7 -0
- package/framework/.claude/skills/design-sync/SKILL.md +1 -0
- package/framework/.claude/skills/design-system-init/CHANGELOG.md +7 -0
- package/framework/.claude/skills/design-system-init/SKILL.md +1 -0
- package/framework/.claude/skills/doc-writing-for-rag/CHANGELOG.md +7 -0
- package/framework/.claude/skills/doc-writing-for-rag/SKILL.md +1 -0
- package/framework/.claude/skills/ds-edit/CHANGELOG.md +7 -0
- package/framework/.claude/skills/ds-edit/SKILL.md +1 -0
- package/framework/.claude/skills/ds-handoff/CHANGELOG.md +7 -0
- package/framework/.claude/skills/ds-handoff/SKILL.md +1 -0
- package/framework/.claude/skills/ds-new/CHANGELOG.md +7 -0
- package/framework/.claude/skills/ds-new/SKILL.md +1 -0
- package/framework/.claude/skills/ds-render/CHANGELOG.md +7 -0
- package/framework/.claude/skills/ds-render/SKILL.md +1 -0
- package/framework/.claude/skills/e2e-review/CHANGELOG.md +7 -0
- package/framework/.claude/skills/e2e-review/SKILL.md +1 -0
- package/framework/.claude/skills/find-skills/CHANGELOG.md +7 -0
- package/framework/.claude/skills/find-skills/SKILL.md +1 -0
- package/framework/.claude/skills/frontend-design/CHANGELOG.md +7 -0
- package/framework/.claude/skills/frontend-design/SKILL.md +1 -0
- package/framework/.claude/skills/gamification-design/CHANGELOG.md +7 -0
- package/framework/.claude/skills/graph-align/CHANGELOG.md +7 -0
- package/framework/.claude/skills/graph-align/SKILL.md +1 -0
- package/framework/.claude/skills/graphify-bootstrap/CHANGELOG.md +7 -0
- package/framework/.claude/skills/graphify-bootstrap/SKILL.md +1 -0
- package/framework/.claude/skills/i18n/CHANGELOG.md +7 -0
- package/framework/.claude/skills/i18n/SKILL.md +1 -0
- package/framework/.claude/skills/i18n-adopt/CHANGELOG.md +7 -0
- package/framework/.claude/skills/i18n-adopt/SKILL.md +1 -0
- package/framework/.claude/skills/issue-review/CHANGELOG.md +7 -0
- package/framework/.claude/skills/issue-review/SKILL.md +1 -0
- package/framework/.claude/skills/kie-ai/CHANGELOG.md +7 -0
- package/framework/.claude/skills/kie-ai/SKILL.md +1 -0
- package/framework/.claude/skills/lsp-bootstrap/CHANGELOG.md +7 -0
- package/framework/.claude/skills/lsp-bootstrap/SKILL.md +1 -0
- package/framework/.claude/skills/motion-design/CHANGELOG.md +7 -0
- package/framework/.claude/skills/motion-design/SKILL.md +1 -1
- package/framework/.claude/skills/new/CHANGELOG.md +7 -0
- package/framework/.claude/skills/new/SKILL.md +1 -0
- package/framework/.claude/skills/new/references/implement.md +52 -53
- package/framework/.claude/skills/new/references/review-cycle.md +16 -0
- package/framework/.claude/skills/new2/CHANGELOG.md +7 -0
- package/framework/.claude/skills/new2/SKILL.md +1 -0
- package/framework/.claude/skills/overlay/CHANGELOG.md +7 -0
- package/framework/.claude/skills/overlay/SKILL.md +1 -0
- package/framework/.claude/skills/playwright-skill/CHANGELOG.md +7 -0
- package/framework/.claude/skills/playwright-skill/SKILL.md +1 -0
- package/framework/.claude/skills/prd/CHANGELOG.md +7 -0
- package/framework/.claude/skills/prd/SKILL.md +1 -0
- package/framework/.claude/skills/prd-add/CHANGELOG.md +7 -0
- package/framework/.claude/skills/prd-add/SKILL.md +1 -0
- package/framework/.claude/skills/remotion-best-practices/CHANGELOG.md +7 -0
- package/framework/.claude/skills/remotion-best-practices/SKILL.md +1 -0
- package/framework/.claude/skills/seo-audit/CHANGELOG.md +7 -0
- package/framework/.claude/skills/simplify/CHANGELOG.md +7 -0
- package/framework/.claude/skills/simplify/SKILL.md +1 -0
- package/framework/.claude/skills/skill-creator/CHANGELOG.md +7 -0
- package/framework/.claude/skills/skill-creator/SKILL.md +16 -8
- package/framework/.claude/skills/skill-creator/references/skill-structure.md +81 -0
- package/framework/.claude/skills/skill-creator/scripts/init_skill.py +29 -104
- package/framework/.claude/skills/skill-creator/scripts/quick_validate.py +17 -1
- package/framework/.claude/skills/toolchain-bootstrap/CHANGELOG.md +7 -0
- package/framework/.claude/skills/toolchain-bootstrap/SKILL.md +1 -0
- package/framework/.claude/skills/ui-design/CHANGELOG.md +7 -0
- package/framework/.claude/skills/ui-design/SKILL.md +1 -0
- package/framework/.claude/skills/ui-implement/CHANGELOG.md +12 -0
- package/framework/.claude/skills/ui-implement/SKILL.md +235 -0
- package/framework/.claude/skills/ui-implement/references/integration.md +92 -0
- package/framework/.claude/skills/ui-implement/references/playbook.md +71 -0
- package/framework/.claude/skills/webapp-testing/CHANGELOG.md +7 -0
- package/framework/.claude/skills/webapp-testing/SKILL.md +1 -0
- package/framework/.claude/skills/worktree-manager/CHANGELOG.md +7 -0
- package/framework/.claude/skills/worktree-manager/SKILL.md +1 -0
- package/framework/agents/skills-mapping.md +29 -0
- package/package.json +1 -1
|
@@ -39,7 +39,10 @@ def validate_skill(skill_path):
|
|
|
39
39
|
return False, f"Invalid YAML in frontmatter: {e}"
|
|
40
40
|
|
|
41
41
|
# Define allowed properties
|
|
42
|
-
|
|
42
|
+
# BALDART additions: `effort` (per-skill reasoning baseline — effort-protocol.md)
|
|
43
|
+
# and `version` (per-skill SemVer — canonical structure, see references/skill-structure.md).
|
|
44
|
+
ALLOWED_PROPERTIES = {'name', 'description', 'license', 'allowed-tools', 'metadata',
|
|
45
|
+
'effort', 'version'}
|
|
43
46
|
|
|
44
47
|
# Check for unexpected properties (excluding nested keys under metadata)
|
|
45
48
|
unexpected_keys = set(frontmatter.keys()) - ALLOWED_PROPERTIES
|
|
@@ -83,6 +86,19 @@ def validate_skill(skill_path):
|
|
|
83
86
|
if len(description) > 1024:
|
|
84
87
|
return False, f"Description is too long ({len(description)} characters). Maximum is 1024 characters."
|
|
85
88
|
|
|
89
|
+
# BALDART canonical-structure warnings (non-fatal — see references/skill-structure.md).
|
|
90
|
+
# `version` + a per-skill CHANGELOG.md are REQUIRED for new skills but WARNED (not
|
|
91
|
+
# hard-failed) here for backwards-compat with skills authored before the convention.
|
|
92
|
+
warnings = []
|
|
93
|
+
if 'version' not in frontmatter:
|
|
94
|
+
warnings.append("missing `version:` in frontmatter (add `version: 1.0.0`)")
|
|
95
|
+
if 'effort' not in frontmatter:
|
|
96
|
+
warnings.append("missing `effort:` in frontmatter (see effort-protocol.md)")
|
|
97
|
+
if not (skill_path / 'CHANGELOG.md').exists():
|
|
98
|
+
warnings.append("missing CHANGELOG.md (per-skill changelog — keeps version history out of SKILL.md context)")
|
|
99
|
+
if warnings:
|
|
100
|
+
return True, "Skill is valid! Warnings:\n - " + "\n - ".join(warnings)
|
|
101
|
+
|
|
86
102
|
return True, "Skill is valid!"
|
|
87
103
|
|
|
88
104
|
if __name__ == "__main__":
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: ui-design
|
|
3
3
|
effort: medium
|
|
4
|
+
version: 1.0.0
|
|
4
5
|
description: "UI design workflow. Generates context-aware mockups with GAN-inspired generator/evaluator separation, visual verification via Playwright, and structured sprint contracts. Use when: (1) designing new pages or components, (2) the /prd skill reaches its UI design phase (Step 3), (3) redesigning existing pages, (4) creating design options for user review, (5) any task involving 'design UI', 'mockup', 'opzioni di design', 'progetta interfaccia', '3 opzioni', 'design page', 'UI design'. Not for: bug fixes, small tweaks, copy-only changes, or implementing an already-chosen design."
|
|
5
6
|
---
|
|
6
7
|
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# Changelog — ui-implement
|
|
2
|
+
|
|
3
|
+
Formato: [Keep a Changelog](https://keepachangelog.com/) · [SemVer](https://semver.org/).
|
|
4
|
+
|
|
5
|
+
## 1.0.0 — 2026-07-01
|
|
6
|
+
|
|
7
|
+
- Skill introdotta (framework v4.82.0). Estrae da `/new` il playbook mockup→code
|
|
8
|
+
(claude-design-link / build-from-code / load-image / read-html) e la self-verifica di
|
|
9
|
+
fidelity, come skill dedicata richiamabile da `/new` e in forma indipendente.
|
|
10
|
+
- Orchestratore thin: cita `design-system-protocol.md`, `ui-expert.md`,
|
|
11
|
+
`/e2e-review` e la verifier-trio; nessun rule duplicato (no dual-SSOT).
|
|
12
|
+
- Scope = **solo fidelity**: code-quality/doc/QA/ownership restano a `/new`.
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ui-implement
|
|
3
|
+
effort: medium
|
|
4
|
+
version: 1.0.0
|
|
5
|
+
description: >
|
|
6
|
+
Implement an ALREADY-APPROVED mockup into the codebase end-to-end and
|
|
7
|
+
self-verify its fidelity. Takes a mockup in any channel — a Claude Design
|
|
8
|
+
handoff link (pulled to source via DesignSync), finished source code
|
|
9
|
+
(mockups/_src/), a rendered image (PNG/JPG/WEBP/PDF), or an HTML file — picks
|
|
10
|
+
the matching build workflow (the playbook),
|
|
11
|
+
builds reuse-first via the ui-expert agent, then auto-verifies fidelity
|
|
12
|
+
(structural + visual + design-quality) via /e2e-review. The single SSOT of the
|
|
13
|
+
mockup→code implement+verify playbook: /new delegates a UI card's
|
|
14
|
+
implement+fidelity here; usable standalone on a mockup path or a CARD-ID. A THIN
|
|
15
|
+
orchestrator that cites design-system-protocol.md, ui-expert.md and /e2e-review,
|
|
16
|
+
never duplicating them — NOT /ui-design (which generates mockup options) and NOT
|
|
17
|
+
the ui-expert agent (which builds). Use when the user says /ui-implement,
|
|
18
|
+
"implementa il mockup", "costruisci lo schermo dal design", "build from mockup",
|
|
19
|
+
"porta il mockup a codice". Gated on features.has_design_system.
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
# UI Implement — mockup → code, built and verified
|
|
23
|
+
|
|
24
|
+
The fix for the recurring "the build isn't 1:1 with the mockup" failure, lifted
|
|
25
|
+
out of `/new` into one specialized, self-verifying skill. A mockup is not one
|
|
26
|
+
thing: a **Claude Design link** resolves to **finished code speaking the
|
|
27
|
+
project's own tokens**, an image is pixels, an HTML file is markup, an archived
|
|
28
|
+
source tree is code already on disk. Each demands a **different build workflow**,
|
|
29
|
+
and choosing the wrong one is
|
|
30
|
+
the #1 fidelity failure. This skill dispatches on the input, builds reuse-first,
|
|
31
|
+
and proves the result before declaring done.
|
|
32
|
+
|
|
33
|
+
It is a conductor: every rule (the registry cascade, the token contract, the
|
|
34
|
+
build-from-code behaviour, the fidelity taxonomy, the coherence check) lives in
|
|
35
|
+
an existing SSOT and is CITED here, never re-described — re-describing it is how
|
|
36
|
+
it drifts.
|
|
37
|
+
|
|
38
|
+
## Project Context
|
|
39
|
+
|
|
40
|
+
**Reads from `baldart.config.yml`:** `paths.design_system`,
|
|
41
|
+
`paths.components_primitives`, `paths.app_dir`, `paths.ui_guidelines`,
|
|
42
|
+
`paths.prd_dir`, `stack.framework`, `stack.animation`, `identity.*`,
|
|
43
|
+
`features.has_design_system`, `features.has_e2e_review`, `features.has_i18n`,
|
|
44
|
+
`features.e2e_review.*`.
|
|
45
|
+
|
|
46
|
+
**Writes:** UI source under `${paths.app_dir}` / `${paths.components_primitives}`
|
|
47
|
+
(via the `ui-expert` agent) + the design-system reconciliation those changes
|
|
48
|
+
require (INDEX / component spec / tokens — delegated to `/ds-new` / `/ds-edit`).
|
|
49
|
+
The self-verify artifacts land under `.baldart/e2e-review/<id>/`.
|
|
50
|
+
|
|
51
|
+
**Gated by features:** `features.has_design_system` (BLOCKING — the registry
|
|
52
|
+
cascade + reconciliation need a registry; when `false`, REFUSE and recommend
|
|
53
|
+
`/design-system-init`). `features.has_e2e_review` gates the self-verify step —
|
|
54
|
+
when `false`, the fidelity verify DEGRADES to a compliance-only check (log the
|
|
55
|
+
gap), it does not abort.
|
|
56
|
+
|
|
57
|
+
**Overlay:** loads `.baldart/overlays/ui-implement.md` if present (brand build
|
|
58
|
+
conventions, mandated component-mapping rules, project fidelity tolerances).
|
|
59
|
+
|
|
60
|
+
**On missing/empty keys:** ask the user; do not assume defaults. See
|
|
61
|
+
`framework/agents/project-context.md` § 3.
|
|
62
|
+
|
|
63
|
+
## Effort
|
|
64
|
+
|
|
65
|
+
**Baseline:** `effort: medium` (frontmatter). **Inline override:** pass
|
|
66
|
+
`effort=<low|medium|high|xhigh|max>` anywhere in the invocation to scale
|
|
67
|
+
reasoning depth for this run — detect it once at kickoff and strip the token
|
|
68
|
+
before consuming user input. Level→behavior mapping, parsing contract, and
|
|
69
|
+
precedence caveats: `framework/agents/effort-protocol.md`.
|
|
70
|
+
|
|
71
|
+
## Invocation
|
|
72
|
+
|
|
73
|
+
`/ui-implement <mockup-path-or-CARD-ID>` (standalone) · `/ui-implement` (ask for
|
|
74
|
+
the mockup). When called by `/new` for a UI card, the caller passes the
|
|
75
|
+
**programmatic** context (card path + `worktree_path` + `mode: "programmatic"`) —
|
|
76
|
+
see [references/integration.md](references/integration.md). The mode only changes
|
|
77
|
+
where the mockup + scope come from (Step 1); Steps 2–8 are identical.
|
|
78
|
+
|
|
79
|
+
## Pre-flight
|
|
80
|
+
|
|
81
|
+
- **P0 — gate.** `features.has_design_system: false` → REFUSE + suggest
|
|
82
|
+
`/design-system-init`. (DELEGATE `design-system-protocol.md` § Gating.)
|
|
83
|
+
- **P1 — mode.** *Programmatic* (a `/new` card + worktree path was passed) vs
|
|
84
|
+
*standalone* (`/ui-implement <args>`). Programmatic returns COMPACT JSON;
|
|
85
|
+
standalone narrates + returns the same verdict inline.
|
|
86
|
+
- **P2 — resolve the mockup + scope.** *Programmatic* → read the card's
|
|
87
|
+
`links.design` / `links.design_src` / `component_bindings` and its
|
|
88
|
+
`files_likely_touched` (do NOT re-derive). *Standalone* → the arg is usually a
|
|
89
|
+
**Claude Design handoff link** (channel 1 — resolve it per the playbook), else a
|
|
90
|
+
local mockup path or a `CARD-ID`; on ambiguity, ONE `AskUserQuestion`. **No
|
|
91
|
+
mockup resolvable → REFUSE** (this skill implements a GIVEN design; generating
|
|
92
|
+
one is `/ui-design`).
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
## Workflow
|
|
97
|
+
|
|
98
|
+
Each step is a delegation. Read the cited SSOT; do not paraphrase it.
|
|
99
|
+
|
|
100
|
+
1. **Detect input type & pick the build workflow.** DELEGATE →
|
|
101
|
+
[references/playbook.md](references/playbook.md): the dispatch table maps the
|
|
102
|
+
mockup channel (Claude Design link / finished code / image / HTML) to its build workflow
|
|
103
|
+
and its verifier lane. Record the chosen workflow in the tracker — it drives
|
|
104
|
+
Steps 4–7.
|
|
105
|
+
|
|
106
|
+
2. **Registry-first BLOCKING pre-work.** Before any UI code, complete the
|
|
107
|
+
registry-first cascade — CITE `framework/agents/design-system-protocol.md`
|
|
108
|
+
§ "Authoritative Style Reference / Registry-First Protocol" and
|
|
109
|
+
`ui-expert.md` (read INDEX + Authority Matrix, `ui_guidelines`,
|
|
110
|
+
`tokens-reference.md`, per-primitive specs in scope, per-pattern docs, and the
|
|
111
|
+
Selection Policy closed families). Do NOT re-describe the 6 steps — they are
|
|
112
|
+
the agent's SSOT and are reproduced in the briefing (Step 4).
|
|
113
|
+
|
|
114
|
+
3. **Component reconciliation.** When the card carries `component_bindings` (the
|
|
115
|
+
`/prd` Component Reconciliation map — `agents/card-schema.md`), THAT map is
|
|
116
|
+
authoritative over *which component each region is*; honor it over any contrary
|
|
117
|
+
reading of the mockup. No bindings (standalone / bindings absent) → run the
|
|
118
|
+
reuse-first cascade as your own reconciliation (CITE `design-system-protocol.md`
|
|
119
|
+
§ Component Discovery Cascade + Closed-Set Selection Policy). A genuinely-new
|
|
120
|
+
member of a closed family is a governance decision — STOP and surface it, don't
|
|
121
|
+
self-approve.
|
|
122
|
+
|
|
123
|
+
4. **Implement — spawn `ui-expert`.** Build via the `ui-expert` agent with a
|
|
124
|
+
briefing that carries: the chosen build workflow (Step 1), the mockup path(s),
|
|
125
|
+
the registry-first cascade declaration requirement, the design-source
|
|
126
|
+
declaration requirement (when code-src exists), the `component_bindings`, and
|
|
127
|
+
the i18n / states-taxonomy / token-cascade constraints. All of these are
|
|
128
|
+
`ui-expert.md`'s own contracts — the briefing points at them; it does not
|
|
129
|
+
re-teach them. (Codex / no-subagents → the skill performs the build inline
|
|
130
|
+
following the same `ui-expert.md` contracts.)
|
|
131
|
+
|
|
132
|
+
5. **Ground the design-source declaration** *(only when the card has
|
|
133
|
+
`links.design_src` / `mockups/_src/` exists)*. After the agent's first
|
|
134
|
+
response, verify every cited source symbol/class exists in `mockups/_src/`
|
|
135
|
+
(`grep -rF`) and every cited registry primitive exists in the registry
|
|
136
|
+
(`INDEX.md` / `components/`). A hollow or fabricated declaration → REJECT +
|
|
137
|
+
re-spawn. Log `design-source: grounded` | `rejected (<reason>)`. (This is the
|
|
138
|
+
Step 7b grounding lifted out of `/new`.)
|
|
139
|
+
|
|
140
|
+
6. **Post-Intervention Coherence Check (BLOCKING).** Reconcile the design-system
|
|
141
|
+
sources in the SAME change — CITE `design-system-protocol.md`
|
|
142
|
+
§ "Post-Intervention Coherence Check": INDEX (`DS_INDEX_DRIFT`), component spec
|
|
143
|
+
(`DS_COMPONENT_STALE` — a NEW primitive follows `/ds-new`, a MODIFIED one
|
|
144
|
+
follows `/ds-edit`, never a hand-written HEAD), tokens (`DS_TOKENS_DRIFT`), and
|
|
145
|
+
the `DS_MIRROR_STALE` advisory when a Claude Design satellite is bound. Emit the
|
|
146
|
+
`design_system_coherence:` block in the completion report.
|
|
147
|
+
|
|
148
|
+
7. **Self-verify fidelity — invoke `/e2e-review`.** With `features.has_e2e_review:
|
|
149
|
+
true`, invoke `/e2e-review` in **programmatic mode** (payload +
|
|
150
|
+
contract: [references/integration.md](references/integration.md)). It runs the
|
|
151
|
+
fidelity trio — structural (`markup-fidelity-verifier`, route-free) + visual
|
|
152
|
+
(`visual-fidelity-verifier`) + design-quality (`ui-quality-critic`) — plus the
|
|
153
|
+
functional E2E lane when routes exist, aggregates under the severity gate, and
|
|
154
|
+
runs its OWN bounded self-heal loop (routing UI-presentation fixes to
|
|
155
|
+
`ui-expert`, functional to `coder`). The gate, tolerance and self-heal all live
|
|
156
|
+
INSIDE `/e2e-review` — this skill never re-implements them. It reuses
|
|
157
|
+
`features.e2e_review.*` from config (do NOT pass `tolerance` /
|
|
158
|
+
`max_self_heal_iterations` in the payload). **Standalone with no card**, or
|
|
159
|
+
`has_e2e_review: false`: DEGRADE — spawn the verifier trio directly per
|
|
160
|
+
`design-system-protocol.md` § "Route-Independent Fidelity & Coverage
|
|
161
|
+
Obligation" against the built files + the mockup, and gate on the same canonical
|
|
162
|
+
severity taxonomy.
|
|
163
|
+
|
|
164
|
+
8. **Return the verdict.** COMPACT (see Return Contract). *Programmatic* → return
|
|
165
|
+
the JSON contract to `/new`. *Standalone* → narrate the verdict + findings +
|
|
166
|
+
report path; on `blocked`, surface the gating findings and stop (do not
|
|
167
|
+
silently ship a non-faithful build).
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
## Scope boundary — fidelity only
|
|
172
|
+
|
|
173
|
+
This skill OWNS implement + **fidelity** verification (structural + visual +
|
|
174
|
+
design-quality). It does **NOT** own code-quality review (Simplify / Codex),
|
|
175
|
+
doc-review, QA (`qa-sentinel`), or ownership-gated AC closure — those remain the
|
|
176
|
+
caller's (`/new`'s) responsibility for a mixed UI+logic card. For a **pure-graphics**
|
|
177
|
+
card `/new` already skips Simplify/Codex/QA (the fidelity trio IS the review), so
|
|
178
|
+
this skill owns that card's whole implement+verify. See
|
|
179
|
+
[references/integration.md](references/integration.md) § "What /new keeps".
|
|
180
|
+
|
|
181
|
+
## Inline fallbacks (portability + fail-safe)
|
|
182
|
+
|
|
183
|
+
- **No `has_e2e_review`:** Step 7 DEGRADE branch (verifier trio direct) — never
|
|
184
|
+
abort.
|
|
185
|
+
- **Codex (no subagents):** Step 4 builds inline; Step 7 degrades to the direct
|
|
186
|
+
verifier path or a compliance-only check. Runs end-to-end.
|
|
187
|
+
- **Claude Design link but no DesignSync MCP / not authed:** channel 1 degrades —
|
|
188
|
+
ask the user to `/design-login`, or to hand over a download-as-`.zip` (→ channel
|
|
189
|
+
2) or the offline HTML export (→ channel 3). Never guess the design from the URL.
|
|
190
|
+
- **Image-only mockup on a non-multimodal tool:** the `Read` of the image degrades
|
|
191
|
+
to a no-op; fall back to the card's structured fields (`component_bindings`,
|
|
192
|
+
responsive ACs) + compliance-only fidelity. Log the degradation.
|
|
193
|
+
- **No mockup at all:** REFUSE (standalone) — this skill implements a GIVEN design.
|
|
194
|
+
|
|
195
|
+
## /new integration
|
|
196
|
+
|
|
197
|
+
`/new` OWNS the batch (worktree, ordering, code-quality/doc/QA/ownership); this
|
|
198
|
+
skill OWNS a UI card's mockup→code implement + fidelity verify. `/new` delegates a
|
|
199
|
+
UI card (with `links.design` / `links.design_src`) here in programmatic mode and
|
|
200
|
+
consumes the COMPACT JSON — replacing its inline Design-Reference build + Phase 2.6
|
|
201
|
+
e2e-review for that card. If this skill is unavailable (Codex without it linked / an
|
|
202
|
+
older install), `/new` falls back to an inline **coarse** build brief + a direct
|
|
203
|
+
`/e2e-review` invocation and says so — the prose stays SSOT, delegate-or-else-inline
|
|
204
|
+
(the same opt-in contract as `/prd` → `/ds-handoff`). Full contract:
|
|
205
|
+
[references/integration.md](references/integration.md).
|
|
206
|
+
|
|
207
|
+
## Return Contract
|
|
208
|
+
|
|
209
|
+
**Mode:** COMPACT (default). Your final message is bounded — verdict
|
|
210
|
+
(`passed | blocked | overridden | skipped | error`) + the chosen build workflow +
|
|
211
|
+
key findings as `path:line` + `Report: <path>`. Persist the long form (the
|
|
212
|
+
`/e2e-review` report + tracker), return the short form. FULL narrative only when the
|
|
213
|
+
user invoked you directly. Schema + persist-then-summarize rule:
|
|
214
|
+
`framework/agents/return-contract-protocol.md`.
|
|
215
|
+
|
|
216
|
+
## See Also
|
|
217
|
+
|
|
218
|
+
- `framework/agents/design-system-protocol.md` — the registry cascade, token
|
|
219
|
+
contract, Post-Intervention Coherence Check, Closed-Set Selection Policy,
|
|
220
|
+
Route-Independent Fidelity & Coverage Obligation, and the canonical fidelity
|
|
221
|
+
severity taxonomy this skill gates on.
|
|
222
|
+
- `framework/.claude/agents/ui-expert.md` — the implementer this skill spawns;
|
|
223
|
+
§ "Design Reference — When the mockup is finished CODE" is the build-from-code
|
|
224
|
+
SSOT the playbook points at.
|
|
225
|
+
- `framework/.claude/skills/e2e-review/SKILL.md` — the self-verify orchestrator
|
|
226
|
+
(Phase 2.7 structural, Phase 4 visual, Phase 4b quality, Phase 5 gate, Phase 5b
|
|
227
|
+
self-heal).
|
|
228
|
+
- `framework/.claude/agents/visual-fidelity-verifier.md` /
|
|
229
|
+
`markup-fidelity-verifier.md` / `ui-quality-critic.md` — the verifier trio.
|
|
230
|
+
- `framework/.claude/skills/prd/references/discovery-phase.md` § 1.6.4 — the Claude
|
|
231
|
+
Design handoff pull (DesignSync MCP → `mockups/_src/`) the channel-1 build reuses.
|
|
232
|
+
- `framework/scripts/extract-mockup-design.mjs` — the offline Claude Design bundle
|
|
233
|
+
decoder the HTML branch of the playbook uses.
|
|
234
|
+
- `framework/.claude/skills/ds-new/SKILL.md` / `ds-edit` — canonical create/edit
|
|
235
|
+
for a genuinely-new or modified primitive surfaced during the build.
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# Integration — how `/ui-implement` is called
|
|
2
|
+
|
|
3
|
+
This skill has two call sites: a human (standalone) and `/new` (programmatic
|
|
4
|
+
delegation for a UI card). The workflow (Steps 1–8 of `SKILL.md`) is identical;
|
|
5
|
+
only the input source and the return shape differ.
|
|
6
|
+
|
|
7
|
+
## Invocation contract (programmatic mode)
|
|
8
|
+
|
|
9
|
+
`/new` invokes the skill with the same payload SHAPE it already uses for
|
|
10
|
+
`/e2e-review`, so the delegation drops into the existing orchestration:
|
|
11
|
+
|
|
12
|
+
```json
|
|
13
|
+
{
|
|
14
|
+
"card_id": "<CARD-ID>",
|
|
15
|
+
"worktree_path": "<absolute worktree path>",
|
|
16
|
+
"mockup_path": "<optional — standalone override when there is no card>",
|
|
17
|
+
"mode": "programmatic"
|
|
18
|
+
}
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
- `card_id` present → the skill reads the card YAML for `links.design`,
|
|
22
|
+
`links.design_src`, `component_bindings`, `files_likely_touched`, responsive ACs.
|
|
23
|
+
- `mockup_path` (no card) → standalone-ish programmatic run: the skill resolves the
|
|
24
|
+
mockup from the path and derives scope from the built/changed files.
|
|
25
|
+
- Do NOT pass `tolerance` / `max_self_heal_iterations` — the internal `/e2e-review`
|
|
26
|
+
call reads those from `features.e2e_review.*` itself (dead keys otherwise).
|
|
27
|
+
|
|
28
|
+
## Return contract (COMPACT JSON)
|
|
29
|
+
|
|
30
|
+
```json
|
|
31
|
+
{
|
|
32
|
+
"status": "passed" | "blocked" | "overridden" | "skipped" | "error",
|
|
33
|
+
"build_workflow": "build-from-code" | "read-html" | "load-image" | "compliance-only",
|
|
34
|
+
"findings": [ /* gating findings, canonical severity taxonomy */ ],
|
|
35
|
+
"ds_drift_codes": [ "DS_INDEX_DRIFT" | "DS_COMPONENT_STALE" | "DS_TOKENS_DRIFT" ],
|
|
36
|
+
"design_system_coherence": { /* INDEX / components / tokens / mirror reconciled */ },
|
|
37
|
+
"report_path": ".baldart/e2e-review/<id>/report.json"
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
`status` semantics mirror `/e2e-review` exactly (`review-cycle.md` § Phase 2.6
|
|
42
|
+
gating table), so `/new`'s existing gating logic consumes them unchanged:
|
|
43
|
+
`passed`/`skipped`/`overridden` → proceed; `blocked` → STOP the card (AUTONOMOUS:
|
|
44
|
+
follow-up card); `error` → capped retry.
|
|
45
|
+
|
|
46
|
+
## Where `/new` delegates
|
|
47
|
+
|
|
48
|
+
For a UI card with `links.design` / `links.design_src`, the delegation **replaces
|
|
49
|
+
two inline `/new` steps for that card**:
|
|
50
|
+
|
|
51
|
+
1. **Phase 2 Design-Reference build** (`implement.md` — the mockup-specific brief +
|
|
52
|
+
design-source declaration + Step 7b grounding). The `ui-implement` skill now
|
|
53
|
+
owns this; `implement.md` keeps only a thin pointer + a coarse fallback.
|
|
54
|
+
2. **Phase 2.6 `/e2e-review`** (`review-cycle.md`). Folded into Step 7 of this
|
|
55
|
+
skill — `/new` does NOT invoke `/e2e-review` separately for a delegated card
|
|
56
|
+
(the skill already ran it; re-invoking would double the fidelity pass).
|
|
57
|
+
|
|
58
|
+
## What `/new` KEEPS (fidelity-only scope)
|
|
59
|
+
|
|
60
|
+
The skill's self-verify covers **fidelity only**. `/new` retains, for a **mixed
|
|
61
|
+
UI+logic** card, everything else in its per-card cluster:
|
|
62
|
+
|
|
63
|
+
- Phase 2.55 **Simplify** (code quality) · Phase 3.5 **QA** (`qa-sentinel`) ·
|
|
64
|
+
Phase 3.7 **Codex** review · Phase 3 **doc-review** · Phase 2.5b **AC-Closure** /
|
|
65
|
+
ownership-gated deferrals.
|
|
66
|
+
|
|
67
|
+
For a **pure-graphics** card (`owner_agent: ui-expert` + `review_profile: light` +
|
|
68
|
+
`areas == [ui]` + zero high-risk triggers), `/new` already SKIPS Simplify/Codex/QA
|
|
69
|
+
(the fidelity trio IS the review — `review-cycle.md:119`). So for that card the
|
|
70
|
+
skill owns the whole implement+verify, and `/new` only adds doc-review + commit.
|
|
71
|
+
|
|
72
|
+
This is the answer to "does self-verify make `/new`'s review redundant?": it
|
|
73
|
+
short-circuits the **fidelity** pass only; it never removes code-quality / doc / QA
|
|
74
|
+
/ ownership for a mixed card — no review hole.
|
|
75
|
+
|
|
76
|
+
## Coarse inline fallback (portability)
|
|
77
|
+
|
|
78
|
+
When the skill is unavailable (Codex without it linked, an older install, no
|
|
79
|
+
`Workflow`/skill routing), `/new` falls back to its inline **coarse** path: the
|
|
80
|
+
`ui-expert` briefing reproduces the Design-Reference + registry cascade prose, and
|
|
81
|
+
`/new` invokes `/e2e-review` directly at Phase 2.6. The `implement.md` /
|
|
82
|
+
`review-cycle.md` prose remains the SSOT fallback — delegate-or-else-inline, the
|
|
83
|
+
same opt-in contract as `/prd` → `/ds-handoff`.
|
|
84
|
+
|
|
85
|
+
## `new2` (workflow) note
|
|
86
|
+
|
|
87
|
+
`new2.js` hosts the batch in a background workflow and reads `implement.md` /
|
|
88
|
+
`review-cycle.md` for the per-card semantics. In this release `new2` keeps its
|
|
89
|
+
**inline** implement+verify path (the fallback prose stays valid), so no `new2.js`
|
|
90
|
+
change is required. Full `new2` parity — delegating the UI card's implement+verify
|
|
91
|
+
off-context via `workflow()` — is a follow-up, to be taken after the context-economy
|
|
92
|
+
measurement (`SKILL.md` scope note + the plan's measure-first gate).
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# Playbook — input type → build workflow
|
|
2
|
+
|
|
3
|
+
The SSOT of *which build strategy to take*. Detect the mockup channel FIRST
|
|
4
|
+
(Step 1 of `SKILL.md`), then follow the matching row. A card may present more than
|
|
5
|
+
one channel (e.g. `links.design_src` **and** a PNG preview) — the priority order
|
|
6
|
+
below resolves it: **finished code wins**, the image is then a secondary
|
|
7
|
+
cross-check, never the source of truth.
|
|
8
|
+
|
|
9
|
+
## Detection order (highest-priority match wins)
|
|
10
|
+
|
|
11
|
+
1. **Claude Design link** (the primary standalone channel) — the arg is a Claude
|
|
12
|
+
Design handoff URL. Resolve it via the **DesignSync MCP** (interactive auth —
|
|
13
|
+
`/design-login`): pull the screen's finished source (`.jsx` / `.css` / tokens)
|
|
14
|
+
READ-ONLY into `mockups/_src/`, then treat it as channel 2 (build-from-code).
|
|
15
|
+
The pull mechanism is the SAME one `/prd`'s Mockup Intake uses
|
|
16
|
+
(`prd/references/discovery-phase.md` § 1.6.4) — cite it, do not reinvent it.
|
|
17
|
+
MCP unreachable / not authed → DEGRADE: ask the user for a download-as-`.zip`
|
|
18
|
+
(raw `.jsx`/`.css` → channel 2) or the offline single-file HTML export (→
|
|
19
|
+
channel 3). This is the channel to expect for standalone runs.
|
|
20
|
+
2. **Finished source code already on disk** — the card has `links.design_src`, OR
|
|
21
|
+
`mockups/_src/` holds `.jsx` / `.tsx` / `.css` / token files (a Claude Design
|
|
22
|
+
handoff or `.zip` already pulled at `/prd` time). This is what a `/new`-delegated
|
|
23
|
+
card sees — the `/prd` pull already ran, so no MCP round-trip here.
|
|
24
|
+
3. **HTML file** — `links.design` (or the resolved arg) is an `.html` file.
|
|
25
|
+
4. **Image** — `links.design` resolves to `.png` / `.jpg` / `.jpeg` / `.webp` /
|
|
26
|
+
`.pdf`, or a `mockups/*.png` canonical path.
|
|
27
|
+
5. **None** — no mockup resolvable → REFUSE (standalone) / DEGRADE to
|
|
28
|
+
compliance-only (programmatic, no `links.design`).
|
|
29
|
+
|
|
30
|
+
> **No Figma.** This project never uses Figma — there is deliberately no Figma
|
|
31
|
+
> channel. A design arrives as a **Claude Design link** (channel 1, the usual
|
|
32
|
+
> case), or as the code/HTML/image it was exported to.
|
|
33
|
+
|
|
34
|
+
## Dispatch table
|
|
35
|
+
|
|
36
|
+
| Channel (priority) | Build workflow | Fidelity target | Verifier lane | Cited SSOT |
|
|
37
|
+
|---|---|---|---|---|
|
|
38
|
+
| **1. Claude Design link** (handoff URL) | **resolve → build-from-code**: pull the screen's finished `.jsx`/`.css`/tokens via the DesignSync MCP (`/design-login`) READ-ONLY into `mockups/_src/`, then build from that source exactly as channel 2. The export speaks the project's own token language → near-1:1 reuse, not a redesign. MCP unavailable → degrade to a download-as-`.zip` (→ ch.2) or the offline HTML export (→ ch.3). | The **pulled source code** | **structural** (`markup-fidelity-verifier`, route-free) + design-quality | `prd/references/discovery-phase.md` § 1.6.4 (the pull); `ui-expert.md` § "finished CODE" |
|
|
39
|
+
| **2. Finished code on disk** (`links.design_src` / `mockups/_src/`) | **build-from-code** (v4.75). `Read` the source. **Reuse-first**: map the source's token refs / classes (`--space-lg`, `.m-card`) to the registry primitives — the source speaks the project's token language, so the mapping is near-1:1, not a redesign. Copy structure / nesting / spacing / radii / `@keyframes` / `@media` **exactly**. A genuinely-new component → port faithfully via `/ds-new` (never a one-off duplicate). **Declare** files read + symbols reused + primitives mapped (grounded at Step 5). | The **source code** (exact written values), not re-interpreted pixels | **structural** (`markup-fidelity-verifier`, route-free) + design-quality | `ui-expert.md` § "finished CODE"; `design-system-protocol.md` § Route-Independent Fidelity |
|
|
40
|
+
| **3. HTML file** (`.html`) | **read-html**: `Read` the file as the visual+structural reference. **If it is a Claude Design offline single-file bundle** (`<script type="__bundler/template">`), decode it first with `node framework/scripts/extract-mockup-design.mjs <file>` → writes readable HTML+CSS to `mockups/_src/`, THEN fall through to channel 2 (build-from-code). A plain `.html` with no bundle → build from its markup/CSS structure directly. | The **markup/CSS structure** | **structural** (`markup-fidelity-verifier`) + visual + design-quality | `implement.md:139-144`; `extract-mockup-design.mjs` |
|
|
41
|
+
| **4. Image** (`.png`/`.jpg`/`.webp`/`.pdf`) | **load-image** (v4.73/74): you are multimodal — **`Read` the image path directly** so it renders into context. The **pixels** are the fidelity target: study layout, spacing, hierarchy, density, color, and every region's relative position. Do NOT build from the filename or a textual guess. (Non-multimodal tool → the `Read` degrades to a no-op; fall back to the card's structured fields.) | The **pixels** | **visual** (`visual-fidelity-verifier`) + design-quality | `implement.md:129-138` |
|
|
42
|
+
| **5. None** | REFUSE (standalone) — generating a design is `/ui-design`. Programmatic with no `links.design` → DEGRADE to compliance-only (registry + tokens, no pixel/structural diff). | — | design-quality only (compliance-only) | `e2e-review` cascade lvl (c/d) |
|
|
43
|
+
|
|
44
|
+
## Cross-cutting rules (every channel)
|
|
45
|
+
|
|
46
|
+
- **`component_bindings` override the mockup.** Whatever the pixels/markup suggest,
|
|
47
|
+
a region bound `action: reuse → <Component>` MUST reuse that component. The
|
|
48
|
+
binding is authoritative (Step 3 of `SKILL.md`). Only `action: new` (confirmed at
|
|
49
|
+
`/prd` time) may introduce a component.
|
|
50
|
+
- **Registry-first cascade is BLOCKING for every channel** — the build strategy
|
|
51
|
+
chooses *how* to reproduce a region; the cascade chooses *which registry
|
|
52
|
+
primitive* it maps to. Never skip it (Step 2).
|
|
53
|
+
- **Responsive + states come from code, not the still frame.** A single image shows
|
|
54
|
+
one viewport and one state. `@media` breakpoints and `@keyframes` live in the
|
|
55
|
+
source CSS (channels 1/3); the card's responsive ACs and `states[]` cover what a
|
|
56
|
+
flat image cannot (channel 4). Implement them as testable behaviour, not optional
|
|
57
|
+
polish.
|
|
58
|
+
- **Token-clean always.** Map every source value to a semantic token; a hardcoded
|
|
59
|
+
hex/shadow/radius/spacing that bypasses the token contract is drift, even if it
|
|
60
|
+
matches the mockup pixel-for-pixel (`design-system-protocol.md` § Token Contract).
|
|
61
|
+
|
|
62
|
+
## Verifier lane → what it catches (reference)
|
|
63
|
+
|
|
64
|
+
| Lane | Agent | Catches | Runs when |
|
|
65
|
+
|---|---|---|---|
|
|
66
|
+
| structural | `markup-fidelity-verifier` | `layout-break` (2-col→1-col), `element-order`, `component-missing/-duplicated`, `token-bypass`, `responsiveness-break` — route-free, before any browser | code-form mockup (channels 1/2/3) |
|
|
67
|
+
| visual | `visual-fidelity-verifier` | perceptual: `color-mismatch`, `typography-*`, `spacing-off-scale`, `shadow/radius-off`, `data-state-mismatch`, `coverage-gap` | image (channel 4), or the rendered build (channels 1/2/3 after render) |
|
|
68
|
+
| design-quality | `ui-quality-critic` | intrinsic quality (10-dimension rubric): hierarchy, rhythm, contrast, density, composition, states, motion, polish, brand | ALWAYS (including no-mockup compliance-only) |
|
|
69
|
+
|
|
70
|
+
The taxonomy above is CITED from `design-system-protocol.md` / the verifier agents —
|
|
71
|
+
never redefine severities here.
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: webapp-testing
|
|
3
3
|
effort: medium
|
|
4
|
+
version: 1.0.0
|
|
4
5
|
description: Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
|
|
5
6
|
license: Complete terms in LICENSE.txt
|
|
6
7
|
---
|
|
@@ -191,6 +191,25 @@ Map Claude Code skills to project domains and provide guidance on when to use ea
|
|
|
191
191
|
> standalone invocable BALDART skill. Route UI work through `ui-design` /
|
|
192
192
|
> `ui-expert`, not to `ui-ux-pro-max` directly.
|
|
193
193
|
|
|
194
|
+
### ui-implement
|
|
195
|
+
|
|
196
|
+
**When to use**:
|
|
197
|
+
|
|
198
|
+
- Implementing an ALREADY-APPROVED mockup into code + self-verifying its fidelity
|
|
199
|
+
- Any mockup channel: a Claude Design link (pulled to source), finished source code (`mockups/_src/`), image, HTML — no Figma
|
|
200
|
+
- The implementation twin of `ui-design` (which GENERATES the mockup); the SSOT of
|
|
201
|
+
the mockup→code build playbook that `/new` delegates a UI card to
|
|
202
|
+
|
|
203
|
+
**Triggers**:
|
|
204
|
+
|
|
205
|
+
- "/ui-implement"
|
|
206
|
+
- "implementa il mockup" / "costruisci lo schermo dal design" / "build from mockup"
|
|
207
|
+
|
|
208
|
+
> `ui-implement` OWNS a UI card's implement + **fidelity** verify (it spawns
|
|
209
|
+
> `ui-expert` and folds in `/e2e-review`). It does NOT own code-quality / doc / QA —
|
|
210
|
+
> those stay with `/new` for a mixed card. NOT `/ui-design` (generates) and NOT the
|
|
211
|
+
> `ui-expert` agent (builds). Gated on `features.has_design_system`.
|
|
212
|
+
|
|
194
213
|
### motion-design
|
|
195
214
|
|
|
196
215
|
**When to use**:
|
|
@@ -689,3 +708,13 @@ Document how to create custom skills:
|
|
|
689
708
|
2. Follow skill template format
|
|
690
709
|
3. Document when to use
|
|
691
710
|
4. Add to this mapping file
|
|
711
|
+
|
|
712
|
+
## Skill Versioning & Canonical Structure
|
|
713
|
+
|
|
714
|
+
Every BALDART skill is **versioned** (`version:` SemVer in frontmatter, starting at
|
|
715
|
+
`1.0.0`) and ships a per-skill **`CHANGELOG.md`** (a SEPARATE file, so version
|
|
716
|
+
history never burns context when `SKILL.md` loads). The canonical layout is
|
|
717
|
+
`SKILL.md` + `CHANGELOG.md` (required) plus `references/` / `assets/` / `scripts/`
|
|
718
|
+
only when the skill needs them. Bump `version` + add a `CHANGELOG.md` entry in the
|
|
719
|
+
same edit whenever a skill changes. Full convention:
|
|
720
|
+
`framework/.claude/skills/skill-creator/references/skill-structure.md`.
|