@hybridlabor-api/aos 4.16.0 → 4.18.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.
Files changed (147) hide show
  1. package/.agents/plugins/marketplace.json +20 -0
  2. package/.claude/hooks/aos-bus.mjs +8 -4
  3. package/.claude/hooks/env-file-protection.mjs +19 -1
  4. package/.claude/hooks/go-gate.mjs +788 -69
  5. package/.claude/hooks/go-grant.mjs +88 -0
  6. package/.claude/hooks/go-token.mjs +17 -2
  7. package/.claude/hooks/memb-inject.mjs +61 -37
  8. package/.claude/settings.json +8 -0
  9. package/.codex-plugin/plugin.json +36 -6
  10. package/.opencode/commands/bdb-aos-brainstorm.md +5 -0
  11. package/.opencode/commands/bdb-aos-doctor.md +5 -0
  12. package/.opencode/commands/bdb-aos-graph.md +5 -0
  13. package/.opencode/commands/bdb-aos-init.md +5 -0
  14. package/.opencode/commands/bdb-aos-loop.md +5 -0
  15. package/.opencode/commands/bdb-aos-mastersession.md +5 -0
  16. package/.opencode/commands/bdb-aos-memb.md +5 -0
  17. package/.opencode/commands/bdb-aos-orchestrator.md +5 -0
  18. package/.opencode/commands/bdb-aos-plan.md +5 -0
  19. package/.opencode/commands/bdb-aos-playbooks.md +5 -0
  20. package/.opencode/commands/bdb-aos-setup.md +5 -0
  21. package/.opencode/commands/bdb-aos-shipping.md +5 -0
  22. package/.opencode/commands/bdb-aos-startproject.md +5 -0
  23. package/.opencode/commands/bdb-aos-store.md +5 -0
  24. package/.opencode/plugins/bdb-aos.js +54 -10
  25. package/README.md +5 -4
  26. package/THIRD_PARTY_NOTICES.md +2 -2
  27. package/agy-commands/loop.md +5 -0
  28. package/bin/aos-acp.mjs +27 -1
  29. package/bin/aos-doctor.mjs +41 -4
  30. package/bin/aos-uninstall.mjs +41 -3
  31. package/bin/go-check.mjs +79 -0
  32. package/bin/guarded-patterns.json +106 -0
  33. package/commands/brainstorm.md +5 -0
  34. package/commands/doctor.md +5 -0
  35. package/commands/graph.md +5 -0
  36. package/commands/init.md +5 -0
  37. package/commands/loop.md +5 -0
  38. package/commands/mastersession.md +5 -0
  39. package/commands/memb.md +5 -0
  40. package/commands/orchestrator.md +5 -0
  41. package/commands/plan.md +5 -0
  42. package/commands/playbooks.md +5 -0
  43. package/commands/setup.md +5 -0
  44. package/commands/shipping.md +5 -0
  45. package/commands/startproject.md +5 -0
  46. package/commands/store.md +5 -0
  47. package/docs/codenotch.md +44 -0
  48. package/docs/codex-agy-setup.md +16 -0
  49. package/docs/codex-gate-smoke.md +43 -0
  50. package/docs/delegation-routing.md +32 -0
  51. package/docs/go-check.md +60 -0
  52. package/docs/master-session-acp.md +2 -0
  53. package/docs/opencode-setup.md +54 -0
  54. package/docs/plugin-migration.md +61 -0
  55. package/installer.js +351 -121
  56. package/lib/codenotch.js +389 -0
  57. package/lib/plugin-migration.js +462 -0
  58. package/lib/retired-skills.js +101 -0
  59. package/lib/store-ui/index.html +9 -1
  60. package/lib/store-ui/server.mjs +2 -0
  61. package/mcps/mcsc/README.md +1 -1
  62. package/mcps/mcsc/packages/core/src/adapters/agy.js +3 -1
  63. package/mcps/mcsc/packages/core/src/adapters/codex.js +2 -1
  64. package/mcps/mcsc/packages/core/src/adapters/opencode.js +2 -1
  65. package/mcps/mcsc/packages/core/src/depth.js +16 -0
  66. package/mcps/mcsc/packages/mcp/server.js +15 -2
  67. package/package.json +7 -2
  68. package/plugin-commands.json +143 -0
  69. package/plugin.json +299 -0
  70. package/plugins/bdb-aos-codex/.codex-plugin/plugin.json +38 -0
  71. package/plugins/bdb-aos-codex/skills/brainstorm/SKILL.md +6 -0
  72. package/plugins/bdb-aos-codex/skills/doctor/SKILL.md +6 -0
  73. package/plugins/bdb-aos-codex/skills/graph/SKILL.md +6 -0
  74. package/plugins/bdb-aos-codex/skills/init/SKILL.md +6 -0
  75. package/plugins/bdb-aos-codex/skills/loop/SKILL.md +6 -0
  76. package/plugins/bdb-aos-codex/skills/mastersession/SKILL.md +6 -0
  77. package/plugins/bdb-aos-codex/skills/memb/SKILL.md +6 -0
  78. package/plugins/bdb-aos-codex/skills/orchestrator/SKILL.md +6 -0
  79. package/plugins/bdb-aos-codex/skills/plan/SKILL.md +6 -0
  80. package/plugins/bdb-aos-codex/skills/playbooks/SKILL.md +6 -0
  81. package/plugins/bdb-aos-codex/skills/setup/SKILL.md +6 -0
  82. package/plugins/bdb-aos-codex/skills/shipping/SKILL.md +6 -0
  83. package/plugins/bdb-aos-codex/skills/startproject/SKILL.md +6 -0
  84. package/plugins/bdb-aos-codex/skills/store/SKILL.md +6 -0
  85. package/scripts/build-plugin-manifest.mjs +202 -3
  86. package/scripts/codex-gate-smoke.mjs +73 -0
  87. package/skills/basic/master-session/SKILL.md +11 -0
  88. package/skills/bdb-aos/scripts/list-playbooks.mjs +72 -0
  89. package/skills/global_config/agenttrail/SKILL.md +3 -1
  90. package/skills/global_config/agenttrail/bin/agenttrail.mjs +255 -117
  91. package/skills/global_config/agenttrail/bin/ensure.mjs +60 -40
  92. package/skills/global_config/agenttrail/bin/repoid.mjs +70 -0
  93. package/skills/global_config/agenttrail/public/index.html +9 -1
  94. package/skills/global_config/aos-setup/scripts/aos-doctor.mjs +1 -1
  95. package/skills/global_config/bdb-memb-mcp/SKILL.md +5 -4
  96. package/skills/global_config/bdb-visual-edit/SKILL.md +28 -32
  97. package/skills/global_config/bdb-visual-edit/references/vite-react-source-attr.md +2 -2
  98. package/skills/global_config/bdb-visual-edit/scripts/locate-source.mjs +135 -0
  99. package/skills/global_config/bdb-visual-edit/scripts/sanitize-element.mjs +30 -2
  100. package/skills/global_config/gogate/SKILL.md +123 -0
  101. package/skills/global_config/loop-templates/SKILL.md +27 -0
  102. package/skills/global_config/loop-templates/references/ci-until-green.md +27 -0
  103. package/skills/global_config/loop-templates/references/daily-summary.md +27 -0
  104. package/skills/global_config/loop-templates/references/pr-to-merge.md +27 -0
  105. package/skills/global_config/loop-templates/references/review-rounds.md +27 -0
  106. package/skills/global_config/mcsc/SKILL.md +9 -1
  107. package/skills/global_config/plan-arbiter/SKILL.md +1 -1
  108. package/skills/global_config/plan-canvas/SKILL.md +42 -4
  109. package/skills/global_config/plan-canvas/scripts/lib/plan-builder/README.md +1 -1
  110. package/skills/global_config/plan-canvas/scripts/lib/plan-builder/render.js +2 -2
  111. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/annotate-client/geometry.js +76 -0
  112. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/annotate-client/index.js +596 -0
  113. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/annotate-client/model.js +192 -0
  114. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/annotate-client/toolbar.js +99 -0
  115. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/annotate-server.js +282 -0
  116. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/annotation-schema.js +210 -0
  117. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/route.js +10 -0
  118. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/sdk.js +6 -230
  119. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/server.js +45 -4
  120. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/sessions.js +60 -21
  121. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/trail-on-approve.js +103 -0
  122. package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/ui.js +19 -7
  123. package/skills/global_config/plan-canvas/scripts/plan-canvas.js +118 -20
  124. package/skills/global_config/subagent-setup/SKILL.md +6 -0
  125. package/skills/global_config/subagent-setup/scripts/setup-subagents.mjs +20 -1
  126. package/skills/playbooks/pb-idea-to-launch/SKILL.md +2 -2
  127. package/skills/playbooks/pb-redesign-app/SKILL.md +3 -3
  128. package/skills/playbooks/pb-release-aos/SKILL.md +2 -2
  129. package/skills/playbooks/pb-ship/SKILL.md +2 -2
  130. package/skills/playbooks/pb-worktrees-land/SKILL.md +2 -2
  131. package/.codex-plugin/marketplace.json +0 -11
  132. package/skills/global_config/bdb-visual-edit/scripts/pick-snippet.js +0 -27
  133. package/skills/global_config/visual-edit/README.md +0 -96
  134. package/skills/global_config/visual-edit/SKILL.md +0 -615
  135. package/skills/global_config/visual-plan/README.md +0 -93
  136. package/skills/global_config/visual-plan/SKILL.md +0 -544
  137. package/skills/global_config/visual-plan/references/canvas.md +0 -139
  138. package/skills/global_config/visual-plan/references/connection.md +0 -51
  139. package/skills/global_config/visual-plan/references/document-quality.md +0 -186
  140. package/skills/global_config/visual-plan/references/exemplar.md +0 -62
  141. package/skills/global_config/visual-plan/references/local-files.md +0 -99
  142. package/skills/global_config/visual-plan/references/wireframe.md +0 -319
  143. package/skills/global_config/visual-recap/README.md +0 -103
  144. package/skills/global_config/visual-recap/SKILL.md +0 -560
  145. package/skills/global_config/visual-recap/references/connection.md +0 -51
  146. package/skills/global_config/visual-recap/references/local-files.md +0 -99
  147. package/skills/global_config/visual-recap/references/wireframe.md +0 -319
@@ -11,7 +11,7 @@ kind: playbook
11
11
  trigger: ["redesign this app", "design overhaul", "audit and fix the UI"]
12
12
  inputs: [repo, app_url, scope]
13
13
  requires:
14
- skills: [ux-audit, ui-review, ui-tokens, godmode-ui-ux, visual-plan, visual-edit, startcycle, wcag-audit-patterns, webapp-testing, github, "gh (external)"]
14
+ skills: [ux-audit, ui-review, ui-tokens, godmode-ui-ux, plan-canvas, bdb-visual-edit, startcycle, wcag-audit-patterns, webapp-testing, github, "gh (external)"]
15
15
  agents: [architect, techlead, reviewer]
16
16
  mcps: [chrome-devtools]
17
17
  store: []
@@ -33,9 +33,9 @@ What you get: one app's UI overhauled against a written audit, new design tokens
33
33
  ## Steps
34
34
  1. ux-audit and ui-review — `app_url` opened and screenshotted per screen in scope with chrome-devtools (`puppeteer_navigate`, `puppeteer_screenshot`) → `production_artifacts/pb-redesign-app-<date>/audit.md` with numbered findings — app_url unreachable or chrome-devtools unavailable → log it and stop; every finding has a screenshot or a file reference
35
35
  2. ui-tokens — current tokens read from the repo versus proposed DTCG tokens → `tokens-diff.md` in the same folder — diff written, nothing applied yet
36
- 3. visual-plan — before/after per screen in scope → plan link or file in the run log — stops for approval
36
+ 3. plan-canvas (Plan Builder mode) — before/after per screen in scope → plan link or file in the run log — stops for approval
37
37
  4. startcycle (architect, techlead, reviewer) — the approved plan and audit → build on a new branch; godmode-ui-ux rules apply to the UI work — reviewer reports no open `blocking` finding
38
- 5. visual-edit — point fixes the human picks in the running app, each after its diff plan is approved → edited files in the run log — only the picked files change
38
+ 5. bdb-visual-edit — point fixes the human annotates in the running app via `aos-plan-canvas annotate`, each after its diff plan is approved → edited files in the run log — only the picked files change
39
39
  6. wcag-audit-patterns and webapp-testing — accessibility pass plus a browser test of the changed screens, then the repo's lint and test scripts → results in the run log — all exit 0; each audit finding marked fixed or deferred
40
40
  7. [GO] git push -u origin <branch> and gh pr create — one combined GO; the WAITING FOR GO line names the branch, base branch, PR title and the head SHA. The run stops here until the human types GO. The hook guards `git push`; `gh pr create` is not hook-guarded, so this GO is its only guard. Afterwards `gh pr view <branch> --json state -q .state` equals `OPEN` and the PR URL is logged.
41
41
 
@@ -10,7 +10,7 @@ kind: playbook
10
10
  trigger: ["release AOS", "cut an AOS release", "merge the release PR"]
11
11
  inputs: [repo?]
12
12
  requires:
13
- skills: [github, pb-ship, bdb-shipping-skill, git-pr-review, visual-recap, godmode-shipping, quick-recap, "bdb-ecosystem-health (external)", "gh (external)"]
13
+ skills: [github, pb-ship, bdb-shipping-skill, git-pr-review, pr-recap, godmode-shipping, quick-recap, "bdb-ecosystem-health (external)", "gh (external)"]
14
14
  agents: [reviewer]
15
15
  mcps: ["plan (optional)"]
16
16
  store: []
@@ -33,7 +33,7 @@ What you get: a new AOS version on npm through the release-please PR, never a ha
33
33
  3. github — `gh pr list -R <owner/repo> --state open --head release-please--branches--main --json number,title,headRefName` → the release PR number in the run log — none → stop with "no release PR"
34
34
  4. Review and gate on that PR, using these skills:
35
35
  - git-pr-review — `gh pr view <n> -R <owner/repo> --json commits` → description draft in the run log — draft only, nothing posted
36
- - visual-recap — `plan` connector present → recap link; absent → log "visual-recap skipped: no plan connector" and paste `gh pr diff <n> -R <owner/repo> --name-only` instead; no `npx` without approval
36
+ - pr-recap — recap file written → link it; recap not buildable → log "pr-recap skipped: <reason>" and paste `gh pr diff <n> -R <owner/repo> --name-only` instead; no `npx` without approval
37
37
  - reviewer (agent) — `gh pr diff <n> -R <owner/repo>`; the contract is the commit list from step 2, never the PR body → findings table — any open `blocking` finding stops the run
38
38
  - bdb-shipping-skill — door class of the release PR (two-way or one-way; unclear counts as one-way) → class in the run log; one-way → ADR-lite `production_artifacts/decisions/<date>-<slug>.md` — class recorded
39
39
  - godmode-shipping — `gh pr checks <n> -R <owner/repo>` all pass (pending, `gh pr checks` exit 8, counts as not passed), plus the local gate exactly as pb-ship step 8 gives it (scratch worktree from `pull/<n>/head`, lint, typecheck and test scripts that exist, a fork PR skips the local gate and is held, worktree removed without `--force`) → exit codes in the run log
@@ -10,7 +10,7 @@ kind: playbook
10
10
  trigger: ["ship it", "ship day", "merge the ready PRs"]
11
11
  inputs: [repo, pr_numbers?]
12
12
  requires:
13
- skills: [github, triage, git-pr-review, visual-recap, bdb-shipping-skill, godmode-shipping, quick-recap, "gh (external)"]
13
+ skills: [github, triage, git-pr-review, pr-recap, bdb-shipping-skill, godmode-shipping, quick-recap, "gh (external)"]
14
14
  agents: [reviewer]
15
15
  mcps: ["plan (optional)"]
16
16
  store: []
@@ -33,7 +33,7 @@ What you get: the ready PRs merged one by one after your GO, each with a reviewe
33
33
  2. triage — "show me what needs attention" → new-issue list with suggested labels in the run log — label writes follow triage's own rules; nothing is closed
34
34
  3. Ask — the human picks today's PRs from the table (non-draft only; `pr_numbers` if given) → scope line in the run log — stops for approval
35
35
  4. git-pr-review — per PR: `gh pr view <n> -R <owner/repo> --json commits` → description draft in `production_artifacts/pb-ship-<date>/pr-<n>.md` — draft only, nothing posted
36
- 5. visual-recap — per PR: `plan` connector present → recap link in `pr-<n>.md`; absent → log "visual-recap skipped: no plan connector" and paste `gh pr diff <n> -R <owner/repo> --name-only` instead; no `npx` without approval — recap or fallback present
36
+ 5. pr-recap — per PR: recap file from `pr-recap` linked in `pr-<n>.md`; not buildable → log "pr-recap skipped: <reason>" and paste `gh pr diff <n> -R <owner/repo> --name-only` instead; no `npx` without approval — recap or fallback present
37
37
  6. reviewer (agent) — per PR: `gh pr diff <n> -R <owner/repo>`; the contract is the linked issue or plan (`gh pr view <n> -R <owner/repo> --json closingIssuesReferences,body`) or the human's scope line from step 3, the body is used only to find the linked issue/plan, its text is not the contract, and never `pr-<n>.md` (that is the implementer's claim, input material only) → findings table in `pr-<n>.md` — any open `blocking` finding removes the PR from today's merge list (logged)
38
38
  7. bdb-shipping-skill — per PR → door class (two-way or one-way) in `pr-<n>.md`; one-way → ADR-lite `production_artifacts/decisions/<date>-<slug>.md` (`<slug>` = the PR's `headRefName` with `/` replaced by `-`) with the reversibility sentence; unclear → one-way — class recorded
39
39
  8. godmode-shipping — per PR: `gh pr checks <n> -R <owner/repo>` all pass, plus a local gate in a scratch worktree — `gh pr view <n> -R <owner/repo> --json isCrossRepository -q .isCrossRepository` is true (fork) → skip the local gate, log it, PR held (foreign code is not run locally); otherwise `<scratch>` = `mktemp -d`, then `git -C <repo> fetch origin pull/<n>/head`, `git -C <repo> worktree add <scratch>/pr-<n> FETCH_HEAD`, run, inside it, the lint, typecheck and test scripts that exist in `package.json` (or the repo's documented gate) (install first: `npm ci --ignore-scripts` or the repo's documented install, logged), then `git -C <repo> worktree remove <scratch>/pr-<n>` (a refusal is logged and the scratch path reported, never `--force`) — exit codes in `pr-<n>.md`; any non-zero, or pending checks (`gh pr checks` exit 8) → PR held
@@ -10,7 +10,7 @@ kind: playbook
10
10
  trigger: ["clean up worktrees", "land my worktrees", "prune worktrees"]
11
11
  inputs: [repos?]
12
12
  requires:
13
- skills: [using-git-worktrees, github, visual-recap, pb-ship, "gh (external)"]
13
+ skills: [using-git-worktrees, github, pr-recap, pb-ship, "gh (external)"]
14
14
  agents: []
15
15
  mcps: ["plan (optional)"]
16
16
  store: []
@@ -39,7 +39,7 @@ What you get: an inventory of your worktrees with a class for each, and the merg
39
39
  - `remote-only`: the upstream exists and `git -C <wt> rev-list --count @{u}..HEAD` is 0 (safe on the remote, unmerged)
40
40
  - `local-only`: everything else; commits exist only here
41
41
  - check: every row has exactly one class plus the output of its evidence command
42
- 5. visual-recap — per non-merged worktree: recap link; without the `plan` connector log `git -C <wt> log --oneline origin/<default>..HEAD` and `git -C <wt> diff --stat origin/<default>...HEAD` instead — one recap or fallback per row
42
+ 5. pr-recap — per non-merged worktree: recap file from `pr-recap`; if it cannot be built log `git -C <wt> log --oneline origin/<default>..HEAD` and `git -C <wt> diff --stat origin/<default>...HEAD` instead — one recap or fallback per row
43
43
  6. [GO] removal list = rows classified `merged` and not `keep`, shown in full with these exact commands per row: `git -C <repo> worktree remove <path>` (label the row `merged (empty)` when `git -C <repo> rev-parse <branch>` equals `git -C <repo> rev-parse origin/<default>`; never `--force`; git refuses dirty trees), then `git -C <repo> branch -d <branch>` (`-d` refuses squash-merged branches → log "branch kept, needs -D, human decides"; never `-D`). The run stops here until the human types GO. GO covers exactly that list, once. The hook does not guard these commands, so GO is by contract. Never remove dirty, remote-only, local-only or `keep` rows, and never use `rm -r`.
44
44
  7. Verify — `git -C <repo> worktree list` → removed paths are gone, kept rows unchanged
45
45
  8. Hand-off — remote-only and local-only rows → next action per row in the run log ("land via /pb-ship", or "push needs GO in that worktree") — nothing runs
@@ -1,11 +0,0 @@
1
- {
2
- "name": "bdb-dev-marketplace",
3
- "owner": "hybridlabor-api",
4
- "plugins": [
5
- {
6
- "name": "bdb-dev-optimized-agent-skills",
7
- "source": "./.codex-plugin/plugin.json",
8
- "description": "BDB DEV Optimized Agent Skills for CAD, Video, memB, OpenWiki, TokenSaver, and hardware design"
9
- }
10
- ]
11
- }
@@ -1,27 +0,0 @@
1
- // READ-ONLY snippet for chrome-devtools evaluate. Replace X and Y with the
2
- // click coordinates (numbers) before sending. No network, no mutation, no
3
- // text or input values: tag, class names, a source attribute and geometry only.
4
- (() => {
5
- const el = document.elementFromPoint(X, Y);
6
- if (!el) return null;
7
- const nth = (node) => {
8
- let n = 1;
9
- for (let s = node.previousElementSibling; s; s = s.previousElementSibling) {
10
- if (s.tagName === node.tagName) n += 1;
11
- }
12
- return n;
13
- };
14
- const parts = [];
15
- for (let node = el; node && node !== document.body && node !== document.documentElement && parts.length < 12; node = node.parentElement) {
16
- parts.unshift(node.tagName.toLowerCase() + ':nth-of-type(' + nth(node) + ')');
17
- }
18
- const src = el.closest('[data-aos-src]');
19
- const r = el.getBoundingClientRect();
20
- return {
21
- tag: el.tagName.toLowerCase(),
22
- classes: Array.from(el.classList).slice(0, 12),
23
- srcLoc: src ? src.getAttribute('data-aos-src') : null,
24
- selector: parts.join(' > '),
25
- bbox: { x: r.x, y: r.y, width: r.width, height: r.height },
26
- };
27
- })()
@@ -1,96 +0,0 @@
1
- # /visual-edit
2
-
3
- Open a running local app in the Agent-Native Design surface as URL-backed iframe
4
- screens for visual inspection, route-state exploration, and source-backed edits.
5
-
6
- Use `/visual-edit` when a UI needs to be reviewed or changed in context: compare
7
- real routes, inspect responsive states, walk a multi-screen flow, duplicate a
8
- screen for a new URL state, or apply visual changes back through the coding
9
- agent. The canvas uses the app's live routes and local bridge rather than a
10
- copied static HTML snapshot.
11
-
12
- ## Install
13
-
14
- Run this from your app repository to install the skill and hosted Design
15
- connector:
16
-
17
- ```sh
18
- npx @agent-native/core@latest skills add visual-edit
19
- ```
20
-
21
- ## Examples to try
22
-
23
- - **One screen:** `/visual-edit the dashboard at desktop size`
24
- - **Several screens:** `/visual-edit compare the dashboard, settings, and reports pages side by side`
25
- - **A full flow:** `/visual-edit the onboarding flow from welcome through account created`
26
- - **Responsive sizes:** `/visual-edit show the dashboard at desktop, tablet, and mobile widths`
27
-
28
- ## Example: refine an onboarding flow
29
-
30
- Start your app locally, then ask your coding agent:
31
-
32
- ```text
33
- /visual-edit the onboarding flow, plus home at every breakpoint
34
- ```
35
-
36
- Design can place the four onboarding screens and Home at desktop, tablet, and
37
- mobile sizes together on one canvas. Select the **Get started** button, change
38
- its fill with the color picker, and drag its padding on the canvas to see the
39
- layout respond.
40
-
41
- When the result looks right, ask your coding agent to **Pull in my visual
42
- edits**. The agent retrieves the pending batch and updates the app's source for
43
- you to review. Design does not write those changes to your code automatically.
44
-
45
- ## Choose the screens deliberately
46
-
47
- - **Multiple pages:** pass `paths` such as `["/", "/pricing", "/settings"]`.
48
- - **A multi-step flow:** pass named `routes` in the order the user follows,
49
- such as shipping, payment, then confirmation. Each URL state becomes a
50
- separate canvas screen.
51
- - **The same page at responsive widths:** add `viewports`, for example
52
- `["desktop", "mobile"]`. Design places each requested route or page once per
53
- viewport so they can be compared side by side.
54
-
55
- For example, add these fields to an `open-visual-edit` payload to place each
56
- checkout step at desktop and mobile sizes:
57
-
58
- ```json
59
- {
60
- "title": "Checkout flow review",
61
- "routes": [
62
- { "url": "http://localhost:5173/checkout?step=shipping", "title": "1. Shipping" },
63
- { "url": "http://localhost:5173/checkout?step=payment", "title": "2. Payment" },
64
- { "url": "http://localhost:5173/checkout?step=done", "title": "3. Confirmation" }
65
- ],
66
- "viewports": ["desktop", "mobile"]
67
- }
68
- ```
69
-
70
- Pass that shape to `open-visual-edit` together with the connection details from
71
- the workflow. For a page comparison, use `paths` instead of `routes`.
72
-
73
- ## Open the canvas beside the conversation when possible
74
-
75
- Use the Design URL or embed returned by `open-visual-edit`. If the current host
76
- supports an inline preview, webview, or side browser, open Design there so the
77
- canvas remains beside the chat. Host support varies; when no such surface is
78
- available, provide the returned **Open design** link instead.
79
-
80
- Prefer the interactive MCP App when the connected host renders it. In that
81
- surface, **Apply design updates** can submit the source-edit handoff to the
82
- current host conversation after its normal confirmation. An ordinary Browser
83
- pane has no trusted page-to-chat bridge: Apply uses Design's local agent there,
84
- and **Copy prompt to your agent** is the coding-agent fallback.
85
-
86
- Inside Design, choose **Show/Hide UI** from the `Cmd+K` menu or press Figma's
87
- `Shift+\` shortcut. The same action is available from Design's empty-canvas
88
- context menu.
89
-
90
- The hosted Design MCP connector handles the account-backed open, screen
91
- placement, and source-edit workflow. Public/read-only designs may be viewed
92
- without signing in; creating, saving, or sharing a design still requires an
93
- authenticated account.
94
-
95
- For the complete walkthrough and sharing details, see the [Visual Edit guide
96
- in Agent-Native](https://github.com/BuilderIO/agent-native/blob/main/skills/visual-edit/README.md).