ui-analyzer_skill

Overview

This skill analyzes UI design screenshots and generates production-ready React components using TypeScript and Tailwind CSS. It converts visual layouts into a clear component hierarchy, extracts design tokens (colors, typography, spacing), and produces accessible, responsive code. The output includes TypeScript interfaces, Tailwind class mappings, and implementation notes for integration. Use it when you want a reliable path from design mockup to reusable code.

How this skill works

I read the provided screenshot or Figma export, describe the screen type and aesthetic, then identify the high-level layout and responsive behavior. I break the UI into components, extract design tokens (color palette, typography, spacing, radii, shadows), and document props and states for each component. Finally, I generate TypeScript React components styled exclusively with Tailwind classes, include accessibility attributes, and provide verification and refinement notes. Deliverables include analysis summary, component code, and usage instructions.

When to use it

• You have a UI mockup, screenshot, or Figma export and want implementation code.
• You ask “implement this design” or “build this UI” and need production-ready components.
• You need a component breakdown and design tokens for a design system.
• You want Tailwind + TypeScript implementations that match a visual design.
• You need accessibility and responsive behavior baked into generated components.

Best practices

• Confirm screen type, device target, and key interactions before generating code.
• Extract and reuse design tokens to stay DRY and consistent across components.
• Use semantic HTML and ARIA attributes to ensure accessibility from the start.
• Map visual sizes and spacing to Tailwind scales (text-, p-, m-, gap- utilities).
• Keep components focused, typed with TypeScript interfaces, and export both named and default exports.

Example use cases

• Turn a login form screenshot into a LoginForm.tsx with validation, accessibility, and responsive layout.
• Convert a dashboard mockup into Header, Sidebar, StatCard, and Dashboard layout components with shared tokens.
• Generate a landing page by decomposing hero, features grid, testimonials, and CTA into composable sections.
• Create a component library from a design system screenshot with variants and a usage guide.
• Produce a modal/drawer implementation from an overlay screenshot including focus management and keyboard support.