ui-analyzerlisted

# 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 Follow these steps systematically when analyzing a UI screenshot: ### Step 1: Initial Observation and Screenshot Reading **Read the provided screenshot first** using the Read tool if a file path is provided, or if the user has shared an image in the conversation. After viewing the screenshot: 1. Describe what you see in the UI 2. Identify the screen/page type (login, dashboard, form, etc.) 3. Determine the target device (desktop, mobile, responsive) 4. Note the overall aesthetic (modern, minimal, colorful, etc.) 5. Confirm understanding with the user before proceeding ### Step 2: Layout Analysis Identify the high-lev