Skill UI

A comprehensive guide detailing the implementation of the 'Bento UI' design pattern across web (CSS Grid), mobile (SwiftUI), and cross-platform (Flutter) environments. This pattern creates highly structured, modular, grid-based dashboards resembling modern app layouts, ensuring aesthetic consistency and responsiveness.

A comprehensive guide for implementing Brutalist Typography aesthetics across web and mobile platforms. This style intentionally breaks traditional design rules, utilizing massive system fonts, clashing colors (Black, White, Red), and aggressive layouts (overlapping, negative margins) to create a raw, attention-demanding, and unapologetic visual experience. Includes detailed CSS, SwiftUI, Flutter, and React Native examples.

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 guide details the principles and implementation for Color Blocking design, an aesthetic characterized by large, solid, contrasting color sections (Mondrian style). It provides comprehensive technical implementations using CSS Grid (Web), SwiftUI, and Flutter for achieving striking, geometric layouts defined by bold colors and clean typography. Perfect for modern, impactful UIs.

This comprehensive guide outlines the core principles for implementing effective and aesthetically pleasing dark mode across multiple platforms. It covers critical rules such as avoiding pure black backgrounds, defining elevation using lightness contrast, and utilizing desaturated accent colors to reduce eye strain. Detailed code examples for Web (CSS), iOS (SwiftUI), and Flutter are provided, ensuring a premium, high-fidelity user experience.

This skill acts as a sophisticated router for frontend design, providing access to 48 deeply opinionated UI styles (e.g., Material, Brutalism, Glassmorphism). It ensures professional aesthetic coherence by enforcing specific style guidelines, utilizing curated universal color palettes, and guiding the implementation process for both web and mobile applications.

This guide outlines the principles of duotone design, an aesthetic characterized by using only two highly contrasting colors for both UI and imagery. It provides comprehensive implementation examples for modern web (CSS), mobile (SwiftUI, Flutter), and cross-platform environments, showing how to achieve the two-color mapping effect using advanced blend modes and color filters.

This skill provides a comprehensive guide for implementing sophisticated, print-quality editorial design across web, iOS (SwiftUI), and Flutter platforms. It focuses on achieving an elegant, magazine-like aesthetic using classic techniques such as serif/sans-serif typography pairing, large drop caps, pull quotes, and columnar layouts. Ideal for content-heavy applications needing a sophisticated, literary feel.

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 covering the aesthetic and technical implementation of floating User Interface (UI) elements. Learn how to create detached, elevated components, such as cards and navigation bars, giving the application a light, airy, and modern feel across Web (CSS), iOS (SwiftUI), and Flutter platforms. Key principles include soft shadows, generous margins, and pill shapes.

This comprehensive guide outlines the principles and technical implementation for creating highly accessible, high-contrast user interfaces. It ensures WCAG AAA compliance by specifying pure black/white color pairings, clear boundaries, and legible typography across web (CSS), iOS (SwiftUI), and Android (Flutter) platforms. Ideal for applications requiring maximum legibility and stark visual impact.