Implement

/sunboard.implement makes an existing spec executable against your real app. It reads the spec, then patches your code so every target selector and completeWhen.event has a real counterpart.

When to use it

After a spec is authored or revised, before you preview or deploy.
When Analyze finds an event firing from the wrong place.

What happens

Reads the spec and lists every selector and completion event.
Checks hosted state (sunboard experiences get) so it doesn't rename a data-sunboard-id that live versions still reference.
Adds selectors — a stable data-sunboard-id on the most specific element (the button, the input, the list item).
Wires events — await useSunboard().track("<event>") in the success path of the real product action.
Re-validates and previews so you can verify route waits, modals, and hotspots.

const sunboard = useSunboard();
await sunboard.track("workflow.created", { workflowId: workflow.id });

track() is safe by default — it never throws on a missing user, network error, or unready state.

Small, surgical edits

Implement adds a selector or a track() call — it never changes your business logic. It wires events at success, not on click, and respects the server/client boundary (extracting a small client component rather than flipping a whole route to "use client"). It never deploys.

Spec

Author the spec this skill wires up.

Preview

Verify the wiring against your local app.

Checklist UI

Style the checklist to your design system.

CLI: validate & preview

Re-validate and preview from the CLI.