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.

分析 UI 設計螢幕截圖並使用 TypeScript 和 Tailwind CSS 產生 React 元件。當使用者提供 UI 模型、設計螢幕截圖或 Figma 匯出並請求實作時，請使用此技能。提供詳細的佈局分析、組件分解、設計令牌提取以及遵循最佳實踐的生產就緒程式碼產生。 來源：smallnest/langgraphgo。