pencil-sync-after-prototype-workflow

Post-prototype Pencil synchronization

This skill only supplements the sequence constraints and does not repeat the existing detailed specifications.

MCP pre-check (required)

Before executing any generation .pen / screenshot acceptance-related work:

1. First try to call any Pencil MCP tool (for example get_editor_state / open_document / get_screenshot）。
2. If the MCP tool is unavailable or the call fails: immediately stop the subsequent steps and inform the user that the project MCP environment needs to be enabled/installed first (at minimum, Pencil MCP must be callable), otherwise the design file cannot continue to be generated.

Trigger conditions

• New prototype/component
• The prototype has been completed according to the existing process, and the corresponding Pencil design file needs to be filled in
• The existing page structure is redone, and the code and Pencil must be updated in sync

Process + check (merged)

1. Prepare the target path

• Target directory:src/prototypes/<name>/ or src/components/<name>/
• <name> Use lowercase letters, numbers, and hyphens

1. First complete the prototype according to the existing process

• First complete spec.md
• according to the existing rules, then complete index.tsx
• Run the acceptance command to ensure the current prototype is deliverable

1. Then complete .pen(blocking step)

• Generate in the target directory <name>.pen
• Using the currently completed spec.md + index.tsx as the sole baseline, rebuild the Pencil file 1:1
• The structure, dimensions, block hierarchy, copy, and main interaction naming must be consistent with the existing prototype
• If .pen and spec.md / index.tsx are inconsistent, fix the differences first before continuing

1. Write back spec.md

• Supplement Pencil information:.pen path, main artboard, module mapping
• Clearly record that this directory has entered the "code/Pencil bidirectional synchronization" maintenance state

1. In index.tsx add a synchronization comment at the top

• A comment must be added at the top of the file, clearly stating: when updating the current prototype, the same-directory .pen and spec.md
• The comment must include the specific file name <name>.pen, to avoid omissions in subsequent maintenance

1. Subsequent update constraints

• Any future modification to spec.md、.pen、index.tsx must keep all three in sync
• If only the code is changed and Pencil is not changed, it is not considered completed delivery

Acceptance command

node scripts/check-app-ready.mjs /prototypes/<name>
node scripts/check-app-ready.mjs /components/<name>

Delivery definition

• The following must exist and be in sync at the same time:spec.md、.pen、index.tsx
• index.tsx A Pencil synchronization comment must exist at the top
• check-app-ready.mjs The result is READY
• Return three file paths upon delivery