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.

Analizza gli screenshot della progettazione dell'interfaccia utente e genera componenti React con TypeScript e Tailwind CSS. Utilizza questa competenza quando l'utente fornisce modelli di interfaccia utente, screenshot di progettazione o esportazioni Figma e richiede l'implementazione. Fornisce analisi dettagliate del layout, suddivisione dei componenti, estrazione di token di progettazione e generazione di codice pronto per la produzione seguendo le migliori pratiche. Fonte: smallnest/langgraphgo.