ui-implementer

The UI Implementer is a specialized development skill designed for high-fidelity frontend engineering. It bridges the gap between static design references and production-ready code by utilizing an orchestrated multi-agent workflow. This skill is intended for professional developers who need to convert Figma links, design screenshots, or visual mockups into functional React 19 and Tailwind CSS 4 components. By automating the extraction of design specifications and enabling iterative validation cycles, it ensures that the resulting code meets rigorous pixel-perfect standards while maintaining accessibility compliance and architectural best practices.

• Performs multi-phase UI implementation including design analysis, structural planning, and code generation.

• Supports adaptive agent switching between standard UI developers and specialized UI Developer Codex agents to resolve complex implementation hurdles.

• Integrates with Figma, remote URLs, and local file paths to ingest source design materials.

• Executes automated validation loops to reconcile the implemented component against design fidelity requirements.

• Promotes an atomic design-driven file structure and utilizes modern TypeScript development workflows.

• Generates final implementation reports, providing clear status updates on quality gates and component readiness.

• Invoke this skill when providing a Figma URL, screenshot, or mockup intended for translation into actual UI code.

• The skill requires clear input parameters: design source, specific component description, target project directory, and a local preview URL (e.g., localhost).

• Avoid using this skill for simple UI fixes or non-design-related development; use standard developer agents for general feature work.

• Ensure a valid preview environment is accessible to allow the agent to perform validation against the rendered output.

• Follow the prompts for agent switching preference to balance between general development speed and advanced, codex-driven precision.

• For best results, clearly name the component (e.g., 'UserProfileCard') and define the desired layout or behavior before the implementation phase begins.