ui-dev

Compare UI implementation code against the screen map and list discrepancies as facts. Does not make judgments. Use when reviewing code quality of UI implementation.

Implement UI screens from Figma designs and record results in report files. Has two modes: initial implementation and fix. Use when implementing or fixing a UI screen from Figma design.

Compare Figma design with implementation screenshots and list visual diffs as facts. Does not make judgments. Use when reviewing visual fidelity of UI implementation.

This skill should be used when the user asks to "generate design feedback", "create QA checklist", "scaffold screen map", "update screen map", "run ui-dev check", or needs manual utility commands for UI implementation workflows.

This skill should be used when the user asks to "extract Figma design data", "get CSS properties from Figma", "trace prototype chain", "export assets from Figma", "get component variants", or needs exact design values (colors, spacing, typography, interactions) from Figma nodes via API.

This skill should be used when the user asks to "implement Figma screens", "implement this design", "implement the whole flow", "batch implement from Figma", "implement all screens", or provides a Figma prototype URL and wants to build the UI. Traces the prototype graph, plans all screens, then implements one screen at a time with subagent-driven review.

This skill should be used when the user asks to "save a Figma screenshot", "export a Figma node as image", "capture Figma design", or needs to save Figma node screenshots to local files. Prefer this over Figma MCP's get_screenshot.

1 hook across 1 event