Skill UI

This expert specializes in scaffolding complete, production-ready, accessible, and performant React and React Native components. It generates full boilerplate code including TypeScript definitions, unit tests, styles (CSS Modules, Styled-Components, Tailwind), and accessibility hooks, ensuring adherence to modern best practices for scalable frontend architecture.

This skill validates web applications across diverse browsers (Chromium, Gecko, WebKit) and real mobile devices. It supports both local testing using Playwright and scalable cloud testing via major platforms like BrowserStack, Sauce Labs, and Kobiton. Use it when ensuring consistent UI/UX, correct CSS rendering, and functional JavaScript behavior regardless of the target environment or device type.

This skill acts as a mobile engineering bridge, converting web designs provided by Stitch into high-quality, production-ready React Native components. It handles complex tasks including translating HTML/CSS layouts into React Native primitives, extracting design tokens (colors, spacing) into a central theme file, and ensuring adherence to native component architectural rules. Ideal for developers integrating web-based prototypes into mobile applications.

A comprehensive guide to implementing isometric design in web and mobile applications, including CSS, SwiftUI, Flutter, and React Native code examples.

This guide details the principles and technical implementation of widget-based user interfaces, mimicking the aesthetic of modern mobile operating systems (like iOS Home Screen). It covers core design principles such as strict aspect ratios, glanceability, and corner radius matching. Practical code examples are provided for Web (CSS Grid), iOS (SwiftUI), and Cross-platform (Flutter) development, enabling designers to create modular, highly functional mini-apps.

Generates self-contained HTML preview files that render mobile app screens in phone-frame mockups (375×812) with tab navigation and dark/light toggle. Converts Tamagui TSX components to equivalent HTML/CSS without programmatic parsing. Useful for visual verification after screen generation, sharing mockups with stakeholders, and layout validation before deployment.

This skill provides a comprehensive guide for implementing dark mode in web and mobile applications. It covers core design principles like surface color selection, elevation through lightness, and accent testing. Includes specific implementation examples for CSS, SwiftUI, and Flutter to ensure reduced eye strain and premium aesthetics.

A comprehensive guide to implementing isometric design in web and mobile applications, including CSS, SwiftUI, Flutter, and React Native code examples.

This guide details the principles and technical implementation of widget-based user interfaces, mimicking the aesthetic of modern mobile operating systems (like iOS Home Screen). It covers core design principles such as strict aspect ratios, glanceability, and corner radius matching. Practical code examples are provided for Web (CSS Grid), iOS (SwiftUI), and Cross-platform (Flutter) development, enabling designers to create modular, highly functional mini-apps.