StartConceptsWorkflowsReferenceTroubleshoot

/silver:ui

Full SB-orchestrated UI/frontend workflow — from orientation through design contract (silver:ui-contract), TDD for testable behavior, UI visual audit, accessibility review, and ship.

Overview

/silver:ui is the Silver Bullet orchestrator for UI, frontend, component, screen, design, interface, page, layout, animation, and responsive work. It maps to catalog entity WF-SILVER-UI and composes the same pre-execution chain as /silver:feature, with AF-DESIGN-CONTRACT always included and AF-UI-QUALITY in the post-execute tail.

It keeps UI work inside the SB lifecycle. Design contract creation, component implementation, visual audit, and accessibility review are coordinated through catalog atomic flows — not ad hoc prompts. See Composable Flows for the full canonical AF-* catalog.

Catalog Composition (WF-SILVER-UI)

The default composition chain from docs/apo-catalog.json:

/silver:init (when .planning/ missing) → Orient → Clarify → Decide → Specify → Quality gate (pre-plan) → Plan → Design contract → Execute → WF-POST-EXEC-GATES

Conditional atoms prune when context does not require them — for example Bootstrap when .planning/ already exists, Clarify when intent is already decision-ready, or Specify when SPEC.md is current. AF-DESIGN-CONTRACT is not optional in this workflow.

UI-specific atomic flows

AF-DESIGN-CONTRACT — Design contract

When: Always in WF-SILVER-UI (mandatory, not conditional).

User-facing route: /silver:ui-contract — component tokens, user-facing copy, component API, layout rules, and accessibility requirements. Pre-plan quality gates run usability, accessibility, testability, and security checks before planning continues.

Produces: UI-SPEC.md. The execution plan is built on top of this contract — implementation must match the spec.

AF-UI-QUALITY — UI quality

When: First step inside WF-POST-EXEC-GATES for UI work — after Execute, before the review triad.

User-facing route: /silver:ui-review — six-pillar visual audit (layout fidelity, accessibility, responsiveness, interaction quality, visual consistency, performance). Pre-ship quality gates enforce final usability, accessibility, and testability.

Produces: UI-REVIEW.md. Critical findings route through /silver:execute --gaps-only for targeted fixes.

Post-execute order

After AF-EXECUTE, WF-POST-EXEC-GATES runs:

AF-UI-QUALITY → AF-REVIEW-REQUEST → AF-REVIEW → AF-REVIEW-TRIAGE → AF-VERIFY → AF-SECURE → AF-VALIDATE → AF-QUALITY-GATE (pre-ship) → AF-BRANCH-FINISH → AF-COMPLETION-AUDIT → AF-SHIP

AF-DOCUMENT inserts when docs/doc-scheme.md requires doc gates before ship.

ℹ
Routing precedence: If an instruction matches both silver:feature and silver:ui, silver:ui wins — UI is more specific. silver:bugfix always takes precedence over both.

When to Use

Use /silver:ui for any of these entry trigger signals:

  • "UI" / "frontend" / "component" / "screen"
  • "design" / "interface" / "page" / "layout"
  • "animation" / "responsive" / "mobile" / "design system"
  • Any work that introduces or modifies user-visible interface elements

Flow execution

AF-DESIGN-CONTRACT and AF-UI-QUALITY are always included in this composer — they are what distinguish /silver:ui from /silver:feature.

Standard composition chain

AF-BOOTSTRAP [skip if .planning/] → AF-ORIENT → AF-CLARIFY [if fuzzy] → AF-DECIDE [if design tradeoff] → AF-SPECIFY [if no SPEC.md] → AF-QUALITY-GATE (pre-plan) → AF-PLAN → AF-DESIGN-CONTRACT → AF-EXECUTE → WF-POST-EXEC-GATES

Design contract (AF-DESIGN-CONTRACT)

/silver:ui-contract produces UI-SPEC.md — component API, layout rules, interaction spec. This is the key differentiator from /silver:feature, where design contract is conditional on UI scope.

UI quality (AF-UI-QUALITY)

/silver:ui-review runs before the review triad (AF-REVIEW-REQUEST → AF-REVIEW → AF-REVIEW-TRIAGE) in post-execute order. Six-pillar audit: layout fidelity, accessibility (WCAG 2.1 AA), responsiveness, interaction quality, visual consistency, performance.

Per-phase loop

For multi-phase UI work: AF-PLAN → AF-EXECUTE → WF-POST-EXEC-GATES (with AF-UI-QUALITY) repeats per ROADMAP phase until verification and review exit conditions pass.

Non-Skippable Gates

🔒
These steps cannot be skipped regardless of §10 preferences or user request:
  • /silver:secure (AF-SECURE)
  • /silver:quality-gates pre-ship (AF-QUALITY-GATE)
  • /silver:verify (AF-VERIFY)
  • /silver:ui-contract (AF-DESIGN-CONTRACT) and /silver:ui-review (AF-UI-QUALITY)

Example Invocation

/silver:ui Add responsive sidebar navigation to the dashboard

Silver Bullet routes to WF-SILVER-UI. After orientation and AF-CLARIFY when needed, /silver:ui-contract creates UI-SPEC.md with component API and layout rules. AF-EXECUTE implements against the spec. /silver:ui-review audits layout fidelity, accessibility, and responsiveness before verify, secure, and ship readiness.

← Previous /silver:bugfix Next → /silver:devops