skills.rest
staruhub
staruhubCOMMUNITY
Explore all skills by this author →
GitHub

ui-analyzer

Analyze UI design screenshots to generate React TypeScript components with Tailwind CSS.

662|124|Updated Oct 31, 2025
Search Tags:#automation#typescript#react#tailwind#design-to-code#ui-analysis
One-click install
npx skills add https://github.com/staruhub/ClaudeSkills --skill ui-analyzer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-analyzer
Source: https://github.com/staruhub/ClaudeSkills/tree/main/skills/ui-analyzer
Command: npx skills add https://github.com/staruhub/ClaudeSkills --skill ui-analyzer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill translates UI design screenshots into structured React TS + Tailwind code, with layout analysis, component breakdown, design token extraction, and production-ready code generation following best practices.

Core Features & Use Cases

  • Layout analysis & component extraction: identifies layout, sections, and reusable UI components.
  • Design tokens & Tailwind mapping: extracts colors, typography, spacing and maps to Tailwind classes.
  • Production-ready code generation: outputs clean, accessible React components with TypeScript and Tailwind.

Quick Start

Provide a design screenshot or mockup. I will analyze the image and generate the component structure and starter code.

Frequently Asked Questions about ui-analyzer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert UI design screenshots into React components?▼

Upload a design screenshot or mockup to analyze the layout and generate production-ready React components with TypeScript and Tailwind CSS. The Skill extracts component hierarchy, design tokens, and accessibility-friendly markup automatically.

Can I use this with Figma exports and design mockups?▼

Yes, the Skill processes UI design screenshots, mockups, and Figma exports to produce component structures and starter code with design token extraction and Tailwind class mapping.

What does design token extraction do in the component generation?▼

Design token extraction identifies colors, typography, and spacing from your UI design and maps them to Tailwind CSS classes, ensuring consistent styling and maintainable design systems in your generated components.

Does the generated code include TypeScript types and accessibility features?▼

Yes, generated React components include TypeScript typings, accessibility-friendly markup, and Tailwind integration following production best practices and common design patterns.

What layout analysis does this provide for component breakdown?▼

The Skill analyzes your design to identify layout structure, sections, and reusable UI components, producing a scalable component architecture that organizes hierarchies for maintainability.

Can I generate components from multiple design variations at once?▼

Process design screenshots and mockups individually to generate components for each variation. The analysis produces clean, production-ready starter code for each design iteration you provide.

Related Skills

Explore More Design & Creative Skills→
ReadyToGo-EducationReadyToGo-Education
15

ui-reverse-engineer

Converts UI reference images into single-file HTML with extracted design tokens and Image Manifest.

Official
Advanced
engrateengrate
1

engrate-components

Integrate Engrate React components with design tokens and Tailwind CSS v4.

Official
Intermediate
anibaldebonianibaldeboni

tailwind-design-system

Create responsive UI components with Tailwind CSS v4 design tokens.

Community
Intermediate
ClaudioCeppi83ClaudioCeppi83

tailwind-design-system

Create reusable UI components and theme variables with Tailwind CSS.

Community
Advanced