Skill UI

This comprehensive guide provides implementation details for Card-Based Design, a popular pattern for displaying bite-sized, discrete information units. It covers best practices for achieving responsive, Pinterest-style layouts across multiple platforms, including modern CSS Grid/Masonry for web, and native frameworks like SwiftUI, Flutter, and React Native for mobile apps. Use it when structuring content feeds, portfolio grids, or news articles.

This comprehensive guide provides core principles and implementation patterns for adopting the Flat Design aesthetic. It details how to build interfaces across web (CSS), mobile (SwiftUI, Flutter), and cross-platform frameworks, emphasizing zero depth, sharp geometries, and high-contrast solid colors while strictly avoiding shadows, gradients, and bevels. Use this when aiming for a modern, minimalist, and clean UI/UX experience.

A comprehensive guide for implementing Flat Design 2.0 (Semi-Flat). This style maintains the clean, solid aesthetic of flat design while introducing subtle, diffuse shadows and micro-gradients to enhance perceived depth and communicate element interactability (e.g., buttons, cards). It provides detailed, cross-platform code examples for Web (CSS), iOS (SwiftUI), Flutter, and React Native.

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

This comprehensive guide provides technical implementations for achieving a modern 'Layered Design' aesthetic. It teaches developers how to create depth, intentional overlapping, and clear stratification across various platforms. Includes detailed code examples for CSS, SwiftUI, Flutter, and React Native to build complex, dimensional user interfaces.

A comprehensive design and implementation guide for achieving Controlled Maximalism. This style is ideal when the content is extremely dense, rich, and contains numerous elements, but requires an underlying highly structured, elegant, and curated presentation. Includes detailed CSS Grid, SwiftUI, Flutter, and React Native examples.

A comprehensive guide to implementing the Minimalism design aesthetic across web, iOS (SwiftUI), Flutter, and React Native. This style mandates generous whitespace, strict typography, and the elimination of visual clutter (like borders and shadows), ensuring that content remains the primary focus and the user experience feels clean and breathable.

A comprehensive style guide and implementation reference for the Retro Futurism aesthetic. Perfect for designing interfaces that evoke the 1950s and 1960s space age, atompunk, or mid-century modern vibes. It outlines core principles, color palettes, typography, and provides cross-platform code examples (CSS, SwiftUI, Flutter, React Native) to achieve sleek, aerodynamic, chrome finishes.

A comprehensive style guide for implementing the Synthwave and Outrun aesthetic across web and mobile applications. This guide details the core principles, including dark mode backgrounds, glowing neon accents (magenta, cyan), and the signature perspective grid. It provides technical examples using CSS, SwiftUI, Flutter, and React Native to achieve authentic retro-futuristic visual fidelity.

A comprehensive guide for implementing Typography First Design across web and mobile applications. This style emphasizes using type as the primary visual element, minimizing decorative UI elements (chroming) to create a highly focused, high-impact, and sophisticated user experience. Includes specific implementation details for CSS, SwiftUI, Flutter, and React Native.

Provides comprehensive guidelines and utilities for modern unit testing using Jest and React Native. Covers Test-Driven Development (TDD) workflows, Behavior-Driven Development (BDD) principles, advanced mocking strategies for modules and GraphQL hooks, and implementing reusable factory functions for props and data. Use this skill to write robust, maintainable, and highly structured unit tests.

This guide details how to integrate Expo and React Native into existing native iOS or Android applications (brownfield development). It addresses the core challenge of adopting new technology incrementally, outlining two distinct approaches: Isolated (consuming prebuilt AAR/XCFramework) and Integrated (adding sources directly to existing build systems like Gradle/CocoaPods).