Analyze UI design screenshots and generate React components with TypeScript and Tailwind CSS. Use this skill when the user provides UI mockups, design screenshots, or Figma exports and requests implementation. Provides detailed layout analysis, component breakdown, design token extraction, and production-ready code generation following best practices.
Quickly install ui-analyzer AI skill to your development environment via command line
Source: smallnest/langgraphgo.
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.
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.
Analyze UI design screenshots and generate React components with TypeScript and Tailwind CSS. Use this skill when the user provides UI mockups, design screenshots, or Figma exports and requests implementation. Provides detailed layout analysis, component breakdown, design token extraction, and production-ready code generation following best practices. Source: smallnest/langgraphgo.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/smallnest/langgraphgo --skill ui-analyzerAnalyze UI design screenshots and generate React components with TypeScript and Tailwind CSS. Use this skill when the user provides UI mockups, design screenshots, or Figma exports and requests implementation. Provides detailed layout analysis, component breakdown, design token extraction, and production-ready code generation following best practices. Source: smallnest/langgraphgo.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/smallnest/langgraphgo --skill ui-analyzer Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/smallnest/langgraphgo