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.

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.

Analice capturas de pantalla del diseño de la interfaz de usuario y genere componentes de React con TypeScript y Tailwind CSS. Utilice esta habilidad cuando el usuario proporcione maquetas de UI, capturas de pantalla de diseño o exportaciones de Figma y solicite implementación. Proporciona análisis de diseño detallado, desglose de componentes, extracción de tokens de diseño y generación de código listo para producción siguiendo las mejores prácticas. Fuente: smallnest/langgraphgo.