/silver:ui

Overview

/silver:ui is the Silver Bullet orchestrator for UI, frontend, component, screen, design, interface, page, layout, animation, and responsive work. It uses composable flows architecture — the core path chain from silver:feature plus two UI-specific paths inserted automatically when UI context is detected.

It never implements UI directly — it orchestrates only. Design contract creation, component implementation, visual audit, and accessibility review are all delegated to specialist skills. See Composable Flows for the full 18-flow catalog.

UI-Specific Path Composition

FLOW 6: DESIGN CONTRACT

Trigger: Phase involves UI — detected via intent keywords, UI file types in scope, or DESIGN.md existence.

Steps:

• design:design-system — component tokens and design system decisions
• design:ux-copy (as-needed) — user-facing text and messaging
• gsd:ui-phase — produces UI-SPEC.md design contract with component API and layout rules
• design:accessibility-review (as-needed) — WCAG 2.1 AA compliance

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

FLOW 8: UI QUALITY

Trigger: FLOW 6 was in the composition, OR SUMMARY.md references UI file types after execution.

Steps:

• design:design-critique — design quality review
• gsd:ui-review — 6-pillar visual audit (layout fidelity, accessibility, responsiveness, interaction quality, visual consistency, performance)
• design:accessibility-review — WCAG 2.1 AA enforcement

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

Full composition for UI work

A typical silver:ui composition: FLOW 0 → FLOW 1 → FLOW 2 (if fuzzy) → FLOW 3 → FLOW 4 → FLOW 5 → FLOW 6 (DESIGN CONTRACT) → FLOW 7 → FLOW 8 (UI QUALITY) → FLOW 9 → FLOW 10 → FLOW 11 → FLOW 12 → FLOW 13 → FLOW 16.

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

Workflow steps

Pre-flight

Silver Bullet reads silver-bullet.md §10 to load user workflow preferences before any step executes.

Step 0 — Orient in codebase

Invoke gsd-scan to understand existing UI patterns and component hierarchy. If deeper brownfield mapping is needed, invoke /gsd:map-codebase for GSD-managed structure assessment.

Step 1a — Fuzzy clarification (conditional)

Only if intent is fuzzy or arguments are empty: invoke silver:clarify via the Skill tool for Socratic framing, option comparison, and decision-ready handoff of UI intent.

Step 1b — Optional UI research perspectives (conditional)

Only for major UI systems (design system, cross-cutting UI architecture, or user request). SB can run the configured research/review path for UX pattern perspectives when that optional provider is installed.

Step 2 — Testing strategy

Invoke /testing-strategy. Purpose: define test levels for UI (component, visual, e2e) — MUST run after spec approval and before writing plans.

Step 2.5 — Writing plans

Invoke the local /writing-plans helper only when SB needs a pre-GSD plan-shaping aid for complex UI scope. Otherwise, keep implementation planning inside gsd:plan-phase.

Step 3 — Pre-plan quality gates

Invoke /silver:quality-gates. All applicable dimensions run, with usability and testability emphasized for UI work. Security is handled through the quality-gate security dimension and later secure-phase review.

Step 4 — Discuss phase

Invoke gsd:discuss-phase. UI phase context → CONTEXT.md with locked decisions.

Step 5 — UI phase: design contract

Invoke gsd:ui-phase. This step is the key differentiator from silver:feature. Purpose: create UI-SPEC.md design contract — component API, layout rules, interaction spec. The implementation plan in Step 6 is built on top of this contract.

Step 6 — Plan phase

Invoke gsd:plan-phase. Implementation PLAN.md built on top of UI-SPEC.md contract.

Step 7 — Execute phase and TDD

Execute: invoke gsd:execute-phase --tdd for testable component units (logic, state, interactions). For pure layout/styling tasks, invoke gsd:execute-phase without --tdd. In Autonomous mode (§10e): invoke gsd:autonomous, but only for implementation plans when the underlying GSD TDD mode is already enabled; otherwise stay interactive so the internal tdd gate can run before execution. The internal tdd gate is hidden from the picker and delegates to Superpowers only at that explicit SB execution boundary.

Step 8 — Code review

Run review sequence in order: /requesting-code-review → gsd:code-review → [if issues: gsd:code-review-fix] → [for major UI systems: gsd:review --all] → /receiving-code-review. The review-framing helpers run only because this SB review boundary selects them.

Step 9 — UI visual audit

Invoke gsd:ui-review. This step is unique to the UI workflow. Purpose: 6-pillar visual audit of implemented UI:

• Layout fidelity (matches UI-SPEC.md contract)
• Accessibility (WCAG 2.1 AA compliance)
• Responsiveness (mobile, tablet, desktop breakpoints)
• Interaction quality (hover states, focus, transitions)
• Visual consistency (typography, spacing, color system)
• Performance (render budget, asset optimization)

Step 10 — Frontend security

Invoke gsd:secure-phase for XSS, CSP, auth surface, secrets exposure, and security-sensitive UI behavior. This is the explicit secure-phase gate for UI work.

Step 11 — Verify work and test gap fill

Invoke gsd:verify-work. Non-skippable gate. If coverage gaps remain: invoke gsd:add-tests.

Step 12 — Validate phase

Invoke gsd:validate-phase. Nyquist validation gap filling.

Step 13 — Pre-ship quality gates

Invoke /silver:quality-gates. 8 core dimensions plus conditional gates. Non-skippable gate.

Steps 14–15 — Finishing branch and ship

Invoke /finishing-a-development-branch → optionally gsd:pr-branch → gsd:ship. Phase-level merge.

Step 16 — Milestone completion (last phase only)

Ask: "Is this the last phase of the current milestone?" If yes, run the full milestone lifecycle: gsd:audit-uat → gsd:audit-milestone → [gap-closure loop, max 2 iterations: gsd:plan-milestone-gaps → /silver:feature for gap phases] → gsd:complete-milestone. If no — done.

Non-skippable gates

Example invocation

Silver Bullet routes to the UI workflow. After orientation and clarification when needed, gsd:ui-phase creates a UI-SPEC.md with component API and layout rules. Execution implements against the spec. gsd:ui-review audits for layout fidelity, accessibility, and responsiveness. Ship.