UI Analyzer

This skill provides a systematic approach to analyzing UI design screenshots and translating them into production-ready React components using TypeScript and Tailwind CSS.

Purpose

Transform UI design screenshots into well-structured, accessible, and maintainable React components. The skill guides through analyzing layouts, extracting design tokens, identifying components, and generating clean code that matches the design while following best practices.

When to Use This Skill

Use this skill when:

• The user provides a UI design screenshot, mockup, or Figma export
• The user requests "implement this design" or "build this UI"
• The user asks to "analyze this screenshot"
• The user wants to convert a design to code
• The user needs help understanding a UI's structure
• The user requests matching an existing design

Analysis Workflow