Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →smallnest/ui-analyzer
Analyze UI design screenshots and generate React components with TypeScript and Tailwind CSS.
Passed 7 of 18 test cases with the skill, and 9 of 18 without it.
1 fixed8 passed either way11 still failing3 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
Inspect `/mockups/metrics-dashboard.png` which shows four identical stat cards with different titles and numbers. Generate the React component code with Tailwind styling.
| Checked | Without skill | With skill |
|---|---|---|
| Extracts the repeating stat card visual pattern into a reusable sub-component. | Missed | Passed |
The instructions your model reads when the skill loads.
This skill provides a systematic approach to analyzing UI design screenshots and translating them into production-ready React components using TypeScript and Tailwind CSS.
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.
Use this skill when:
Follow these steps systematically when analyzing a UI screenshot:
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:
Identify the high-level layout structure:
references/layout-patterns.md to identify:
test cases passed, vs 9 / 18 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.