Skill UI

A comprehensive guide for implementing soft pastel, low-contrast aesthetics across web, iOS (SwiftUI), and Flutter applications. Details include desaturated color palettes (mint, blush, lavender), rounded corner principles, airy spacing techniques, and specific CSS/SwiftUI code examples for achieving a calming, gentle user interface suitable for lifestyle or baby-related branding.

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.

A comprehensive guide for developers to implement the iconic Vaporwave aesthetic across multiple platforms, including Web (CSS), iOS (SwiftUI), and Flutter. It details core principles such as 90s OS motifs, cyan/magenta neon gradients, and surreal pastel color palettes, enabling the creation of nostalgic, retro-futuristic user interfaces.

A comprehensive system for designing high-quality, multi-platform banners, including social media ads, website heroes, and print materials. It leverages AI visual generation, UI/UX insights, and HTML/CSS structuring to create multiple art direction options for any campaign.

A comprehensive, all-in-one design skill covering the entire creative lifecycle. Features include building brand identity, defining design tokens, UI styling with Tailwind/shadcn/ui, sophisticated logo generation (AI-powered), Corporate Identity Program (CIP) mockups, professional pitch decks, multi-platform banner design, and social media image creation. It acts as a unified hub for professional graphic and digital assets.

This skill provides expert guidance on design engineering, focusing on UI polish, micro-interactions, and high-craft component decisions. It is ideal for reviewing frontend code (React, CSS, Tailwind) to elevate perceived quality, addressing details like easing, duration, and physical feedback. Use it when subtle detail and refined taste are critical differentiators.

A comprehensive guide to implementing Claymorphism, a playful and tactile UI/UX design trend. This style emphasizes soft, rounded shapes, inflated 3D volumes, and continuous curves, giving elements the look of soft clay or balloons. Learn the core principles, color palettes, and implementation techniques across CSS, SwiftUI, and Flutter.

A comprehensive guide for implementing the Glassmorphism aesthetic across web and mobile applications. Learn the core principles, including backdrop filtering, semi-transparent backgrounds, and light borders, to create a modern, frosted glass look inspired by macOS and contemporary digital interfaces. Includes code examples for CSS, SwiftUI, and Flutter.

Neumorphism, or Soft UI, is a contemporary design trend where interface elements appear extruded from the background material itself. This guide details the core principles—unified colors and dual shadows (light highlight and dark shadow)—and provides comprehensive implementation examples for web (CSS), iOS (SwiftUI), and cross-platform (Flutter) development. Use this style when a subtle, soft, and integrated aesthetic is desired.

This skill provides comprehensive visual philosophy and art-direction guidelines for frontend design. It is ideal for creating high-concept campaigns, unique brand manifestos, or when a distinct, sophisticated, and art-like aesthetic is required. Users define a 'movement' and articulate its core principles across various sensory dimensions, ensuring the final output feels meticulously crafted and conceptually deep.

A comprehensive skill guide for defining the core intent, tone, and strategic direction of any frontend design. It applies rigorous cross-domain principles drawn from architecture, cinema, marketing, and automotive design. Use this before coding to establish purpose, visual hierarchy, and intentional structure, ensuring every design element is deliberate and highly crafted.