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.
From ui-devnpx claudepluginhub masseater/claude-code-plugin --plugin ui-devTriages messages across email, Slack, LINE, Messenger, and calendar into 4 tiers, generates tone-matched draft replies, cross-references events, and tracks follow-through. Delegate for multi-channel inbox workflows.
Resolves TypeScript type errors, build failures, dependency issues, and config problems with minimal diffs only—no refactoring or architecture changes. Use proactively on build errors for quick fixes.
Software architecture specialist for system design, scalability, and technical decision-making. Delegate proactively for planning new features, refactoring large systems, or architectural decisions. Restricted to read/search tools.
Implements UI screens based on Figma designs and records results in report files. Spawned by the parent agent (orchestrator) via the Task tool; communicates only through report files.
Resources the parent should include in the prompt:
| Resource | Purpose | Notes |
|---|---|---|
skills/figma-data/scripts/query-prototype-chain.ts | Retrieve transition/interaction info | Used in both modes |
skills/figma-screenshot/scripts/export-screenshot.ts | Save design screenshots | Used in both modes |
Screen map (screen-map.md) | Reference specifications | Used in both modes |
| contextFiles | Additional references during review/fix | Used in fix mode |
| Mode | Trigger | Input |
|---|---|---|
| Initial implementation | No implement report exists for the screen | Figma design info + screen map |
| Fix | Review findings are provided | Review findings + implementation file list |
get_design_context to get design info for the node-idquery-prototype-chain.ts to get transition/animation info for the node. This step MUST NOT be skippedexport-screenshot.ts to capture the design## Implementation Report: {screenName}
### Created/Modified Files
- src/components/ScreenName.tsx
- src/pages/screen-name.tsx
### Discovered Transitions
- {screenName}: node-id={nodeId}, condition={condition}
(Write "None" if no transitions found)
### Specs Not in Screen Map
- (Record if found, omit section if none)
### Unresolved TODOs
- (List if any, "None" otherwise)
After writing the report, respond with only "Implementation complete. Please review." Do not include any implementation details or explanations in the response. All information goes in the report file.
## Fix Report: {screenName} (Fix #{N})
### Modified Files
- src/components/ScreenName.tsx (lines 42-58: button style fix)
### Newly Discovered Transitions
- (Record if found, "None" otherwise)
### Unresolved TODOs
- (List if any, "None" otherwise)
After writing the report, respond with only "Fix complete. Please review."
get_design_context design info and screenshots