# 02 Designer > Realize the UX for a sprint — turn the spine's design-intent + the sprint's REQs into a tiered design system, per-screen specs, and a DM-ID manifest, all referencing REQs. The FIRST skill to run the Reconcile step: it challenges docs/spec/design-intent.md through the amendment protocol — fleshing out derived/[NEEDS CLARIFICATION] intent, and flagging where the realization violates a stated intent… - **Type:** Skill - **Install:** `agentstack add skill-incommensurablehubris-fullstack-director-02-designer` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [IncommensurableHubris](https://agentstack.voostack.com/s/incommensurablehubris) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [IncommensurableHubris](https://github.com/IncommensurableHubris) - **Source:** https://github.com/IncommensurableHubris/fullstack-director/tree/main/.agents/skills/02-designer ## Install ```sh agentstack add skill-incommensurablehubris-fullstack-director-02-designer ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # 02 · Designer — realize (UX) Sprint-scoped: invoked **`02-designer sprint N`**. Realize the UX for sprint N's REQs — a tiered **design system**, a spec per key **screen**, and a **DM-ID manifest** — all *referencing* the spine by `REQ-NNN`, never copying its prose. You are the **first skill to amend the spine**: while realizing, you run the **Reconcile step** against `design-intent.md` and emit structured `amendment-log.json` rows. ## Operating principle — realize, and reconcile Two moves, run together: - **Realize.** Turn the thin `design-intent.md` declaration + the sprint's REQs into a full design-system + screens (the realization). Reference REQs by ID; derive freely below the governed layer. - **Reconcile (your debut of the amendment protocol).** Challenge `design-intent.md` two ways: **flesh-out** — concretize `derived` / `[NEEDS CLARIFICATION]` intent (Tier-2 gate → `stated`); **contradiction-flag** — catch where the realization violates a `stated` intent, the a11y floor, or a Constitution non-negotiable (Tier-2 gate, or Tier-3 defer for scope). You run Reconcile **inline — no subagent**: design-intent conflicts are surfaced, obvious, and gated, so the fresh-context isolation that 03/05/07 need does not apply here. **The boundary-test = the token-governance line.** Reconcile fires only on the **governed** layer (brand · semantic tokens · the a11y floor · key screens · interaction principles · job-outcomes); the **delegated** layer (primitive values · component tokens · layout/spacing · internals) is free realization — no amendment, ever. Full method: `references/reconcile-critique.md`. ## Profile switch — `agent-system` realizes the agent experience Read the spine's `Profile` (the per-seat toggle table in `shared/agentic-profile.md`). Under **`webapp`** (default) the flow below is unchanged. Under **`agent-system`** (or `mcp-server`), **Phase B designs the agent experience, not screens** — the tool surface (names/descriptions are the interface; tool hit-rate is the quality metric), turns, persona/voice, refusal-UX, and HITL touchpoints — per `references/agent-experience.md`. Phase A (tokens) and the Reconcile machinery are unchanged; the **`DM-NNN` manifest stays**, but its rows point at **tools/turns/refusals**. Reconcile's governed layer shifts to the **design-intent voice** + the **agent-contract HITL rows**; the WCAG floor applies **only where a GUI exists**. Under **`skill-pack`**, 02 is **skipped** (trigger/description design folds into 03/04 + the skill-creator eval; `status` routes no design phase). ## The flow Two gates (Gate 1 = foundation, Gate 2 = screens), with Reconcile folded into Gate 1. Craft lives in the references — load each as its phase begins. ### Phase A — Foundation → `docs/design/design-system.md` 1. **READ UPSTREAM** — `docs/planning/sprints/sprint-NN.md` (which REQs are in scope), `docs/spec/design-intent.md` (the declaration to reconcile), the sprint's `docs/spec/capabilities/.md` REQ blocks, and `docs/spec/specification.md` (Constitution + brand/a11y non-negotiables). Optionally `architecture-constraints.md`. 2. **STYLE DIRECTION** — from `design-intent.md` (adjectives, tone, references). A populated design-intent is usually a *strong* signal; if it's thin, pause **once** with a proposed direction, then proceed (don't interrogate). 3. **TIERED TOKENS** — primitive → semantic → component, referencing inward (never skip a tier). Start from the **seed vocabulary** in `templates/design-system.md`; concretize per project. Apply **density-as-intent** (light = bg/hover · base = main/CTA · dark = text/pressed). Theming = semantic override only. 4. **COMPONENT INVENTORY** — a loose hierarchy (foundations → components → patterns → screens); Atomic Design as a *mental model*, not rigid buckets. Define only what this sprint's screens use. 5. **CONTENT & UX PATTERNS** + the **banned / anti-patterns** list (AI-slop guardrails). 6. **⟫ RECONCILE (pass 1) ⟪** — run the **dual pass** (`references/reconcile-critique.md`) against `design-intent.md` at foundation altitude: the deterministic detector (WCAG + a11y floor + token-chain) ‖ the judgment pass (Nielsen + JTBD, every finding **anchored**). Classify findings into tiers; emit `amendment-log.json` rows + DDRs. >>> GATE 1: present the foundation **and** the batched Tier-2 amendments together; wait for PROCEED / ADJUST / a decision on each amendment before Phase B. .md` For each key screen (`templates/screen.md`): wireframe (ASCII by default at sprint 1) → annotate with REQ-IDs → **interaction table** → **state spec** → **a11y annotations**. Run the detector + heuristic pass on the *screens* as **realization quality** — you fix your own design to meet the floor; escalate to a new amendment only on the rare screen finding that can't be honored without changing a declaration. Generate the **DM-ID manifest** (`templates/manifest.md`) — over wireframe regions, so it exists even on the ASCII path. >>> GATE 2: present screen coverage + any escalations; on approval LOCK the design contract at docs/design/approved/sprint-NN/. >> GATE 1: present foundation + batched Tier-2 amendments; wait for PROCEED / ADJUST / decisions >> GATE 2: present screen coverage + escalations; on approval lock docs/design/approved/sprint-NN/ .md` · `docs/spec/specification.md` (the `Profile`) · (optionally) `docs/spec/architecture-constraints.md` · under `agent-system`, `docs/spec/agent-contract.md` (the tool matrix + HITL rows the agent-experience realizes). **Writes:** `docs/design/design-system.md` · `docs/design/.md` (per screen) · `docs/design/approved/sprint-NN/manifest.md` (+ `prototype/` + `*.png` when prototypes exist) · **appends** `docs/spec/amendment-log.json`. **Never** writes `docs/spec/capabilities/**`. ## References (load when the phase needs them) - `references/design-system.md` — Phase A craft: tiered tokens + seed vocabulary + density-as-intent + component hierarchy + content/UX patterns + banned-list + quality criteria. - `references/screen-spec.md` — Phase B craft: wireframe + interaction table + state spec + a11y annotations + the component contract + the DM-ID manifest rule. - `references/reconcile-critique.md` — the dual-pass Reconcile: boundary-test + deterministic detector (WCAG 2.2 AA + a11y floor + token-chain) + Nielsen heuristics + anchoring rule + tier classification + DDR format. - `references/agent-experience.md` — **`agent-system` mode**: the tool surface / turns / persona / refusal-UX / HITL touchpoints that replace screens; the DM-NNN manifest over tools/turns; Reconcile against voice + agent-contract HITL. - `shared/agentic-profile.md` — the per-seat toggle table (what 02 does per profile); repo-root-relative. - `shared/spec-amendment-protocol.md` — amendment tiers + the row schema (your debut); repo-root-relative. - `shared/spine-boundary.md` — declaration vs realization (the keystone); repo-root-relative. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [IncommensurableHubris](https://github.com/IncommensurableHubris) - **Source:** [IncommensurableHubris/fullstack-director](https://github.com/IncommensurableHubris/fullstack-director) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-incommensurablehubris-fullstack-director-02-designer - Seller: https://agentstack.voostack.com/s/incommensurablehubris - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.