implement-plan-svg

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

implement-plan-svg — execute plan-svg.md phase by phase, additive only

implement-plan-svg — 逐阶段执行 plan-svg.md，仅做增量修改

Take the existing

plan-svg.md

and implement its 5 phases, injecting only SVG icons and accessible tooltips while the 5 non-negotiable guardrails hold. The concrete recipes live in

TRANSFORM.md

(this folder).

读取现有的

plan-svg.md

并实施其中定义的 5 个阶段；在满足 5 项不可协商护栏 的前提下，仅注入 SVG 图标 和可访问的 tooltip。具体操作方案位于当前目录下的

TRANSFORM.md

。

The flow

执行流程

1. Load the plan and the contract. Read

plan-svg.md

(required — if it's missing, stop and ask the user to run

/plan-redesign-svg

first). Extract the 5 non-negotiable guardrails (Block B) and the 5 phases (Block C). Load

TRANSFORM.md

for the recipes. The guardrails are the operating rule for every edit: logic is preserved, layout shift is zero, tooltips never clip, a11y is complete, and each file is returned whole. Done when: the contract and the 5 phases are loaded, and the frozen logic (hooks, handlers, data bindings) is named as the boundary.

2. Run the phases in order (1 → 5). For each phase:

Pick its target slots from
```
plan-svg.md
```
.
Apply the injections using the matching
```
TRANSFORM.md
```
recipes (icon sizing +
```
shrink-0
```
, the chosen tooltip strategy, the per-type recipe, the a11y rules).
Keep every change additive and inside the visual layer, and route all class composition through
```
cn()
```
.
Verify the phase: the diff for the phase's slots is additive-only — no hook, handler, or data binding changed, and no layout shift. Check against the phase's definition of done. Done when: all 5 phases are implemented and each phase's definition of done is met.

3. Final deployment pass. Run the Phase 5 checklist: zero hydration-mismatch warnings; tooltips float freely over sticky headers and clipped containers without layout jumping; tooltips open on

focus-visible

and close on Escape; touch devices handle tap-to-inspect gracefully. Confirm zero logic regression and zero layout shift, then report what was added (icons, tooltips, a11y attributes) and confirm nothing logic-related moved. Done when: all 5 phases are done and the final deployment checklist passes — icons and accessible tooltips added, logic and layout untouched.

1. 加载计划与契约。 读取

plan-svg.md

（必需——如果文件不存在，请停止操作并要求用户先运行

/plan-redesign-svg

）。提取 5 项不可协商护栏（Block B）和 5 个阶段（Block C）。加载

TRANSFORM.md

以获取具体操作方案。护栏是每次编辑都必须遵循的规则：保持逻辑不变、零布局偏移、tooltip 永不被裁剪、完整实现 a11y，并且每个文件都应完整返回。 完成标准： 已加载契约和 5 个阶段，并明确将冻结的逻辑（hooks、handlers、data bindings）命名为修改边界。

2. 按顺序执行各阶段（1 → 5）。 对于每个阶段：

从
```
plan-svg.md
```
中选择对应的目标 slots。
使用
```
TRANSFORM.md
```
中匹配的方案注入内容（图标尺寸与
```
shrink-0
```
、选定的 tooltip 策略、按类型划分的方案以及 a11y 规则）。
确保所有修改均为增量修改且仅位于视觉层，并通过
```
cn()
```
完成所有 class 组合。
验证该阶段： 该阶段 slots 的 diff 只能包含增量内容——不得修改任何 hook、handler 或 data binding，并且不得产生布局偏移。对照该阶段的完成标准进行检查。 完成标准： 已实施全部 5 个阶段，并且每个阶段均满足其完成标准。

3. 最终部署检查。 执行 Phase 5 检查清单：不存在 hydration-mismatch 警告；tooltip 可自由浮于 sticky headers 和被裁剪的容器之上，且不会引起布局跳动；tooltip 在

focus-visible

时打开，并在按下 Escape 时关闭；触摸设备能够平滑处理点按查看。确认不存在逻辑回归和布局偏移后，报告新增内容（图标、tooltip、a11y 属性），并确认所有逻辑相关内容均未移动。 完成标准： 全部 5 个阶段均已完成，最终部署检查清单全部通过——已添加图标和可访问的 tooltip，同时未改动逻辑与布局。