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.
Анализируйте скриншоты дизайна пользовательского интерфейса и создавайте компоненты React с помощью TypeScript и Tailwind CSS. Используйте этот навык, когда пользователь предоставляет макеты пользовательского интерфейса, скриншоты дизайна или экспортирует Figma и запрашивает реализацию. Обеспечивает подробный анализ компоновки, разбивку компонентов, извлечение проектных токенов и генерацию готового к использованию кода в соответствии с лучшими практиками. Источник: smallnest/langgraphgo.