design-firstlisted

# Design first, implement after approval The argument is a UI task. Do NOT implement it yet. This skill exists to put a reviewable design in front of the user — in the transcript and in their claude.ai design pane — before any repo code changes. ## 1. Find the linked design project Read `~/.bridge_state/project_config.json`. The key is the repo's trailing path (this repo: `/mystical-assistant`), with an optional `@<branch>` variant that wins over the plain key; the field is `design_project`. No key → tell the user the repo isn't linked (dashboard ▸ the chat header's project name ▸ ◇ Design system, or the project modal's DESIGN tab), design in-chat anyway, and skip step 4. ## 2. Design Load the repo's design-system skill (here: `mystical-assistant-design`) and design with its tokens and components — no generic styling. Deliverables go in `.mystical/design-drafts/<slug>/` (git-ignored runtime state): - One **self-contained** HTML file per screen or state — inline CSS, no external fetches, first line `<!-- @dsCard group="Drafts" -->` so claude.ai renders it as a preview card. - `SPEC.md` — intent, components and tokens used, states, behavior notes, open questions. Short. ## 3. Show it in the transcript Screenshot each mockup with the bridge-eyes skill and include the images in your reply. The user reviews from a phone: the pictures are the review, the HTML is the backup. ## 4. Push the draft to Claude Design DesignSync: `finalize_plan` with the projectId, `writes