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.

Analysez les captures d'écran de conception d'interface utilisateur et générez des composants React avec TypeScript et Tailwind CSS. Utilisez cette compétence lorsque l'utilisateur fournit des maquettes d'interface utilisateur, des captures d'écran de conception ou des exportations Figma et demande la mise en œuvre. Fournit une analyse détaillée de la mise en page, la répartition des composants, l'extraction de jetons de conception et la génération de code prêt pour la production conformément aux meilleures pratiques. Source : smallnest/langgraphgo.