Skill UI

Enforces mobile-first, touch-first decisions by requiring feasibility checks, mandatory readings, and anti-pattern bans before any UI work to prevent desktop or AI-default assumptions.

Guides how to craft detailed prompts for Google Stitch so it generates high-quality web and mobile UI designs, covering specificity, visual style, multi-screen structure, platform targeting, and iterative refinement.

An expert-level skill set covering the entire spectrum of user-centered design. Mastery includes building scalable design systems using atomic principles and design tokens, conducting deep user research (usability testing, persona creation), ensuring WCAG accessibility compliance, and managing cross-platform implementation (web, mobile, desktop). Ideal for developing complex, inclusive, and highly structured digital products.

Comprehensive web and mobile design intelligence offering prioritized UX rules, 50+ styles, color palettes, typography pairings, and chart guidance to inform component design, accessibility checks, and landing/dashboard reviews.

Generates high-fidelity mobile and web UI/UX mockups with atomic design principles, responsive layouts, and accessible design tokens via muapi.ai for product requirements that need professional wireframes or design systems.

Guides designers through using the Penpot MCP tools to craft professional UI/UX for web, mobile, and desktop apps, covering workflows, design systems, accessibility checks, and setup/troubleshooting steps for the Penpot MCP server.

This skill provides a comprehensive audit of user interfaces, evaluating screens against Nielsen's 10 Usability Heuristics and modern mobile UX best practices. It systematically checks for critical usability flaws, design inconsistencies, accessibility gaps, and potential dark patterns, ensuring the resulting product delivers a superior and intuitive user experience across all platforms.

Generate a comprehensive, multi-screen mobile onboarding prototype displayed in a side-by-side HTML format. This tool is perfect for designing the initial user experience (UX) flow, covering splash screens, value proposition details, and final sign-in steps. Ideal for apps needing a polished debut experience.

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.

A comprehensive style guide for implementing the Cyber Y2K aesthetic across web and mobile applications. This design package captures the retro-futuristic blend of late 90s/early 2000s digital culture, modern glitch art, and iridescent holographic gradients. It provides detailed code examples using CSS, SwiftUI, and Flutter to achieve key effects like RGB splitting, animated gradients, and aggressive vector typography.