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 comprehensive guide and tool suite transforms web designs created in Stitch (HTML/CSS) into clean, production-ready React Native components. It meticulously maps HTML elements (like <div>, <button>) to native RN primitives (View, Pressable) and converts complex CSS styles (Flexbox, typography, shadows) into React Native's StyleSheet.create(). It guides developers to follow architectural best practices, including Atomic Design and data decoupling, for scalable cross-platform mobile development.

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.