feat: add cmk:blueprint-animation design skill

README.md

@@ -109,6 +109,12 @@ This devkit solves that by using structured documentation as the shared state. T
 | `cmk:sui-sdk` | gRPC-first guidance for talking to a Sui full node — JSON-RPC is deprecated |
 | `cmk:sui-devstack` | Worktree-safe local Sui network setup for development and e2e tests |
 
+### Design family
+
+| Skill | Purpose |
+|---|---|
+| `cmk:blueprint-animation` | Animated before → after UX redesign (or one-screen explainer), explained step by step through a blueprint drawing. Third-party port of [moguzbulbul/blueprint-animation](https://github.com/moguzbulbul/blueprint-animation) — **CC BY-NC 4.0, non-commercial use only** |
+
 ## Usage
 
 A deeper tour, in the order docs build on each other when starting a new project. Every line in the blocks below is a real trigger — paste and go.

docs/ai/skills/README.md

@@ -1,6 +1,6 @@
 # Skills
 
-The `cmk:*` skill packages under [`skills/`](../../../skills/): eight docs-family skills, thirteen setup-family skills, nine delivery-family skills, two knowledge-family skills, and one session-discipline skill (`cmk:interpret`). Each is a directory with a `SKILL.md` (frontmatter `name`/`description`/`version` plus the body the agent reads), and most ship a `references/` folder of guidance, templates, and conventions the workflow loads on demand.
+The `cmk:*` skill packages under [`skills/`](../../../skills/): eight docs-family skills, thirteen setup-family skills, nine delivery-family skills, two knowledge-family skills, one design-family skill (`cmk:blueprint-animation`), and one session-discipline skill (`cmk:interpret`). Each is a directory with a `SKILL.md` (frontmatter `name`/`description`/`version` plus the body the agent reads), and most ship a `references/` folder of guidance, templates, and conventions the workflow loads on demand.
 
 Docs-family skills follow the same shape: a "Workflow: Create" / "Workflow: Iterate" pair, with placement rules, shaping guidance, and templates kept out of `SKILL.md` itself and cited via "Read `references/<file>.md`" lines. Setup-family skills instead follow a facet shape (modes and/or a single workflow, plus a report-only `## Verify` section). Delivery-family skills follow a tracker-neutral phase/gate shape and never carry a `## Verify` section — that contract is setup-family only. Knowledge-family skills are reference packs with no create/iterate or phase shape at all. See [conventions.md](./conventions.md) for the exceptions and the full breakdown.
 
@@ -48,6 +48,10 @@ Docs-family skills follow the same shape: a "Workflow: Create" / "Workflow: Iter
 - [sui-sdk.md](./sui-sdk.md) — `cmk:sui-sdk`, gRPC-first guidance for talking to a Sui full node.
 - [sui-devstack.md](./sui-devstack.md) — `cmk:sui-devstack`, worktree-safe local Sui network setup for development and tests.
 
+## Design family
+
+- [blueprint-animation.md](./blueprint-animation.md) — `cmk:blueprint-animation`, step-by-step blueprint animation explaining UX decisions (Redesign or Explain mode). Third-party port, CC BY-NC 4.0.
+
 ## Session
 
 - [interpret.md](./interpret.md) — `cmk:interpret`, companion session beside another window: stance plus a carry-back reply. User-invoked.

docs/ai/skills/blueprint-animation.md

@@ -0,0 +1,37 @@
+# cmk:blueprint-animation
+
+## What
+Design-family skill that builds one continuous, never-cutting animation of a
+single screen, in 3–6 numbered steps, each explaining one UX decision
+through a cyan blueprint drawing. Redesign mode (Before + After screens)
+rebuilds only the parts that change; Explain mode (one screen) keeps the
+design fixed and annotates each module's what and why. Ported from
+[moguzbulbul/blueprint-animation](https://github.com/moguzbulbul/blueprint-animation)
+v1.3.1; licensed CC BY-NC 4.0, not the repo's MIT.
+
+## Approach
+Figma fidelity outranks every other rule: values, fonts, and icons come
+from the Figma file, and each built screen is pixel-diffed against the
+Figma export before any motion is added. Each step runs a fixed phase
+sequence — focus, scan-line blueprint in, construct (or annotate), scan-line
+reveal, hold — with old→new swaps only while covered by the blueprint.
+The scene builds on Claude Design's `animations_v3` starter and reuses the
+blueprint kit from the bundled reference scene. Keeps the upstream §0–8
+section numbering so cross-references survive the split into references.
+
+## Where
+- Skill body: `skills/blueprint-animation/SKILL.md` — §0 fidelity, §1
+  gather and mode pick, §2 per-step sequence, §7 QA.
+- `skills/blueprint-animation/references/blueprint-style.md` — §3 drawing
+  style, §4 text/overlap rules.
+- `skills/blueprint-animation/references/architecture.md` — §5 scene
+  architecture, §6 performance budget.
+- `skills/blueprint-animation/references/explain-mode.md` — §8 Explain
+  mode: phase table, mark vocabulary, worked example.
+- `skills/blueprint-animation/references/example-scene.jsx` — Redesign-mode
+  reference scene (CRM record page, 5 steps).
+- `skills/blueprint-animation/LICENSE` — CC BY-NC 4.0 legal code and
+  attribution.
+
+## Links
+Standalone: cites no other `cmk:` skill.

docs/ai/skills/conventions.md

@@ -8,7 +8,7 @@ Frontmatter declares three fields the host (Claude Code or OpenCode) reads to di
 
 - `name` — `cmk:<short-name>`, used as the slash command and skill ID.
 - `description` — opens in the second person (`Use when…` / `Use whenever…`) with trigger phrases plus an **outcome noun** (the deliverable), not a workflow step list. Used by the agent to auto-select the skill from user intent. A user-invoked skill (`disable-model-invocation: true`) writes one plain human-facing line naming the deliverable instead — the agent never routes on that line.
-- `version` — `0.6.x` on `cmk:design`; `0.5.x` on `cmk:delivery-pipeline`; `0.4.x` on `cmk:cicd` (security-scanning facet) and `cmk:requirements` (Standard elicitation: close package, scope band, guards); `0.3.x` on `cmk:delivery-workflow`, `cmk:agent-instructions`, `cmk:adr`, `cmk:docs`, and `cmk:local-stack`; `0.2.0` on two docs-family skills (`learn`, `rule`) and six setup-family skills (`agent-instructions`, `agent-vendors`, `infra`, `mcp-config`, `project-layout`, `toolchain`); `0.1.x` on the rest — `repo-setup` and `sync`, `test-resources`, `rust`, and `testcontainers` (new setup-family skills), the other delivery-family skills (incl. new `cmk:delivery-simplify` at `0.1.0`), both knowledge-family skills, the two remaining docs-family skills (`codebase-docs`, `glossary`), and `cmk:interpret`.
+- `version` — `0.6.x` on `cmk:design`; `0.5.x` on `cmk:delivery-pipeline`; `0.4.x` on `cmk:cicd` (security-scanning facet) and `cmk:requirements` (Standard elicitation: close package, scope band, guards); `0.3.x` on `cmk:delivery-workflow`, `cmk:agent-instructions`, `cmk:adr`, `cmk:docs`, and `cmk:local-stack`; `0.2.0` on two docs-family skills (`learn`, `rule`) and six setup-family skills (`agent-instructions`, `agent-vendors`, `infra`, `mcp-config`, `project-layout`, `toolchain`); `0.1.x` on the rest — `repo-setup` and `sync`, `test-resources`, `rust`, and `testcontainers` (new setup-family skills), the other delivery-family skills (incl. new `cmk:delivery-simplify` at `0.1.0`), both knowledge-family skills, the two remaining docs-family skills (`codebase-docs`, `glossary`), `cmk:interpret`, and `cmk:blueprint-animation`.
 - `disable-model-invocation: true` — optional, fourth field only. Present on `cmk:interpret`. The closer is still `---`.
 
 No skill file references outside its own package by relative path — the rule binds a package's own references, not content it emits into a target repo; a skill that needs a target-repo artifact names it repo-root-relative, and a skill that needs another skill cites it by `cmk:` name — see `cmk:agent-vendors`.
@@ -23,12 +23,14 @@ Delivery-family skills (`delivery-workflow`, `discover-efforts`, `delivery-intak
 
 Session-discipline skills (`interpret`) are neither create/iterate nor a setup facet nor a delivery phase. `cmk:interpret` is user-invoked (`disable-model-invocation: true`), stays read-only toward the repo, and ships a `references/digest.md` loaded only at session end.
 
+Design-family skills (`blueprint-animation`) produce a visual design artifact rather than a doc or a repo facet. `cmk:blueprint-animation` is a third-party skill ported under its own licence (CC BY-NC 4.0, `LICENSE` inside the package, not the repo's MIT): it keeps the upstream section numbering (§0–8) across `SKILL.md` and `references/`, and ships a non-Markdown reference scene, `references/example-scene.jsx`, that the agent copies as the starting scene. No `## Verify` section, no `eval.json`.
+
 Knowledge-family skills (`sui-sdk`, `sui-devstack`) are domain reference packs sitting beside the generic model rather than replacing it. `cmk:sui-sdk` is a single file with no `references/` directory: it corrects one specific stale-training-data pattern (reaching for Sui JSON-RPC instead of gRPC) and runs no workflow at all. `cmk:sui-devstack` has a `references/` folder and layers Sui-specific detail — Devstack's config shape, account/package staging, instance isolation — on top of `cmk:local-stack`'s generic `(worktree, config, instance)` primitive; it does not restate or replace that primitive. Neither knowledge skill has a `## Verify` section or an `eval.json`.
 
 ## Where
 - Frontmatter, on every skill: open any `skills/<name>/SKILL.md` and read lines 1–5 (1–6 when `disable-model-invocation: true` is present).
-- Skills with `references/`: `skills/adr/`, `skills/agent-instructions/`, `skills/agent-vendors/`, `skills/cicd/`, `skills/codebase-docs/`, `skills/design/`, `skills/docs/`, `skills/infra/`, `skills/learn/`, `skills/local-stack/`, `skills/project-layout/`, `skills/repo-setup/`, `skills/requirements/`, `skills/rule/`, `skills/rust/`, `skills/sync/`, `skills/test-resources/`, `skills/toolchain/`, `skills/delivery-workflow/`, `skills/discover-efforts/`, `skills/delivery-intake/`, `skills/delivery-simplify/`, `skills/delivery-review/`, `skills/delivery-ship/`, `skills/delivery-pipeline/`, `skills/sui-devstack/`, `skills/interpret/`. Skills without one: `skills/glossary/`, `skills/mcp-config/`, `skills/delivery-spec-plan/`, `skills/delivery-handoff/`, `skills/sui-sdk/`, `skills/testcontainers/`.
-- Skills with `eval.json`: `skills/agent-instructions/eval.json`, `skills/codebase-docs/eval.json`, `skills/local-stack/eval.json`, `skills/repo-setup/eval.json`, `skills/sync/eval.json`, `skills/interpret/eval.json`. No delivery-family or knowledge-family skill ships one.
+- Skills with `references/`: `skills/adr/`, `skills/agent-instructions/`, `skills/agent-vendors/`, `skills/cicd/`, `skills/codebase-docs/`, `skills/design/`, `skills/docs/`, `skills/infra/`, `skills/learn/`, `skills/local-stack/`, `skills/project-layout/`, `skills/repo-setup/`, `skills/requirements/`, `skills/rule/`, `skills/rust/`, `skills/sync/`, `skills/test-resources/`, `skills/toolchain/`, `skills/delivery-workflow/`, `skills/discover-efforts/`, `skills/delivery-intake/`, `skills/delivery-simplify/`, `skills/delivery-review/`, `skills/delivery-ship/`, `skills/delivery-pipeline/`, `skills/sui-devstack/`, `skills/interpret/`, `skills/blueprint-animation/`. Skills without one: `skills/glossary/`, `skills/mcp-config/`, `skills/delivery-spec-plan/`, `skills/delivery-handoff/`, `skills/sui-sdk/`, `skills/testcontainers/`.
+- Skills with `eval.json`: `skills/agent-instructions/eval.json`, `skills/codebase-docs/eval.json`, `skills/local-stack/eval.json`, `skills/repo-setup/eval.json`, `skills/sync/eval.json`, `skills/interpret/eval.json`. No delivery-family, knowledge-family, or design-family skill ships one.
 - The shared docs-family workflow shape: grep for `^## Workflow: Create` and `^## Workflow: Iterate` across `skills/*/SKILL.md`.
 - The shared setup-family Verify contract: grep for the exact heading `^## Verify$` across `skills/*/SKILL.md` — every hit is a setup-family skill. `skills/delivery-review/SKILL.md` has a similarly named but distinct `## Verify before acting` section (adversarial verification of review findings, not a report-only facet check) — match on the exact heading, not the prefix, to tell them apart.
 - The delivery-family tracker binding: grep for `references/linear.md` across `skills/delivery-*/SKILL.md` and `skills/discover-efforts/SKILL.md`, then confirm each hit is the sole conditional pointer line, not body prose.

lib/skill-graph-layout.ts

@@ -16,7 +16,7 @@ export type PersistedSkillGraphLayout = {
  * no longer exists, and restoring them would scatter nodes across lanes that
  * have moved.
  */
-export const LAYOUT_VERSION = 3;
+export const LAYOUT_VERSION = 4;
 
 const STORAGE_KEY = "ai-devkit-skill-graph-layout";
 
@@ -39,6 +39,7 @@ const LANE_ORDER = [
   "agent",
   "testing",
   "sui",
+  "design",
   "sync",
   "session",
   "other",

lib/skill-types.ts

@@ -22,6 +22,7 @@ export const CATEGORY_LABELS: Record<string, string> = {
   docs: "Documentation",
   testing: "Testing & Code",
   sui: "Sui Network",
+  design: "Design",
   session: "Session",
   other: "Other",
 };
@@ -66,6 +67,7 @@ export const CATEGORY_MAP: Record<string, string> = {
   rust: "testing",
   "sui-sdk": "sui",
   "sui-devstack": "sui",
+  "blueprint-animation": "design",
   interpret: "session",
 };
 
@@ -86,6 +88,7 @@ export const SKILL_PURPOSE: Record<string, string> = {
   "agent-instructions": "Set up CLAUDE.md and AGENTS.md",
   "agent-vendors": "Vendor skills for each coding agent",
   cicd: "Set up or speed up CI and deploys",
+  "blueprint-animation": "Animate a UX redesign as a blueprint",
   "codebase-docs": "Generate AI-navigable codebase docs",
   "delivery-handoff": "Hand tracked work to another agent",
   "delivery-intake": "Pick up a ticket and gather its context",