fabrico-implement-ui

name	fabrico-implement-ui
description	Implement UI with iterative verification against Figma.

Invocation portability: $fabrico-* below means the discovered entry workflow. Use the unqualified name for repository or filesystem installs and $fabrico-collections:fabrico-* for plugin installs.

Input

Use the user’s current request as the workflow input. Expected context: [task or Jira ID]. If a named custom agent is unavailable, as in a skills-only plugin installation, perform that delegated step in the current thread with the referenced skills and the same implementation, visual-verification, and review gates.

Your goal is to implement the UI feature according to the provided implementation plan and feature context, orchestrating iterative verification against Figma designs until the implementation matches within agreed tolerances.

Design References from Research & Plan

Before delegating tasks, open the research file (*.research.md) and plan file (*.plan.md) to find all Figma URLs:

• In the research file, look for:
  • Figma URLs in the Relevant Links section.
  • Specific component/node links mentioned in Gathered Information.
• In the plan file, look for:
  • Figma URLs and design references in Task details.
  • A structured "Design References" subsection mapping views/components to Figma URLs or node IDs.

Use these URLs when delegating to both the fabrico-software-engineer subagent (implementation context) and the fabrico-ui-reviewer subagent (verification target).

When Figma link is missing

If you cannot find a Figma URL for a component/section that needs verification:

1. Stop — do not delegate implementation or verification for that component
2. Ask the user to provide the Figma link for the specific section
3. Wait for the link before proceeding
4. Add the link to the plan file once provided (in Task details or Design References)

Do NOT skip verification or delegate without a Figma reference.

Workflow

1. Review the plan — Review the implementation plan and feature context thoroughly. Identify which tasks are UI implementation tasks (need Figma verification) and which are non-visual tasks. Extract all Figma URLs from the research/plan files.

2. Delegate codebase analysis (if needed) — Check if the plan file (*.plan.md) contains a populated "Technical Context" section. If it does, skip this step — the context was already captured during planning. If the section is missing or empty, use the subagent delegation (custom agent fabrico-architect) to perform codebase analysis and technical context discovery to establish project conventions, coding standards, architecture patterns, and existing codebase patterns before implementing.

3. Confirm dev server URL — Use the direct user question now to ask the user for the dev server URL (e.g., "What URL is the frontend app running at? Is it http://localhost:3000?"). Do not defer this to later — you need the confirmed URL before any verification can start. Do not guess from running processes or port scans — multiple services may run on different ports. Use the confirmed URL for all subsequent verifications in this session.

4. Delegate UI implementation — For each UI implementation task, delegate to the fabrico-software-engineer subagent using $fabrico-implement-ui-common-task. Pass the relevant Figma URLs, component context, and plan section. For non-Figma frontend and backend tasks, use $fabrico-implement-common-task.

5. Delegate UI verification — After each UI implementation task completes, delegate verification to the fabrico-ui-reviewer subagent by spawning the fabrico-ui-reviewer custom agent with $fabrico-review-ui. Pass: the Figma URL, the user-confirmed dev server URL from step 3, and the component/section name. The ui-reviewer will compare the Figma design against the running implementation and return a structured report. Note: You do NOT need the figma MCP server or the playwright MCP server yourself — the fabrico-ui-reviewer subagent has them. Just use the subagent delegation to delegate. Never skip verification because these tools aren't in your own tool list.

• Components/sections verified by the fabrico-ui-reviewer subagent
• Number of verification iterations per component
• Design gaps discovered and how they were handled
• Any deviations from design with rationale

11. Delegate code review — Delegate to the fabrico-code-reviewer subagent via $fabrico-review. Include E2E test execution as part of the review. The code reviewer runs all quality gates (unit, integration, E2E tests, linting, build).

Verification Rules

1. Every UI component must be verified by the fabrico-ui-reviewer subagent — minimum once per component, no exceptions
2. Fix all reported differences — do not skip or rationalize
3. Re-delegate verification after every fix — never assume a fix worked
4. Maximum 5 iterations per component — escalate if still failing
5. Check confidence level — LOW confidence means tool data may be incomplete

Verification Gate — Do Not Proceed Without Real Verification

Before proceeding from a UI verification step to the next task or to code review, confirm that the fabrico-ui-reviewer subagent actually performed a real Figma+Playwright comparison. A valid verification report must contain:

• Data extracted from Figma via the figma MCP server (design specifications)
• Data captured from the running app via the playwright MCP server (screenshots, computed styles, accessibility snapshot)
• A structured comparison with EXPECTED vs ACTUAL values

If the report is missing either side of the comparison (e.g., the reviewer only read source code files, or skipped Playwright because of a blocker), the verification is INVALID. Do not accept it. Instead:

1. Identify why verification failed (wrong URL? auth blocker? tool error?)
2. Ask the user to resolve the blocker (provide correct URL, credentials, or manual verification)
3. Re-delegate to the fabrico-ui-reviewer subagent once the blocker is resolved
4. Only proceed when you have a valid verification report or the user explicitly instructs you to skip

Never proceed to code review with unverified UI components. If verification cannot be completed for a component, document it in the plan's Changelog and get explicit user approval before moving to code review.

Fallback: When the fabrico-ui-reviewer subagent Returns Errors

If the fabrico-ui-reviewer subagent consistently returns LOW confidence or tool errors:

1. Do not continue the loop blindly
2. Ask the user if they can verify manually (open Figma + app side-by-side)
3. Document the issue in the plan's Changelog
4. Continue with next component or escalate