design▌

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core Principle: Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.

Build distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. \n \n Guides design thinking through purpose, tone, and differentiation before implementation, emphasizing bold aesthetic direction over generic defaults \n Covers five core design areas: typography (distinctive font pairing), color and theming (CSS variables, dominant colors with sharp accents), motion (CSS animations, scroll triggers, staggered reveals), spatial composition (asymmetry, overlap, grid-break

Generate multiple radically different interface designs using parallel sub-agents to explore module shape options. \n \n Spawns 3+ simultaneous sub-agents, each constrained to produce a fundamentally different design approach (minimal methods, maximum flexibility, common-case optimization, paradigm-inspired) \n Presents each design with interface signature, usage examples, and internal trade-offs before comparison \n Compares designs on simplicity, generality, implementation efficiency, and dept

This skill provides a curated knowledge base of 60+ UI component patterns sourced from component.gallery and enriched with best practices, layout guidance, and usage rules. It replaces generic guessing with real design-system knowledge when generating interfaces.

Cross-platform mobile app development with Expo Router, NativeWind, and React Native. \n \n Provides navigation patterns using Expo Router for structured, file-based routing in mobile apps \n Includes styling guidance with NativeWind and Tailwind CSS for consistent, utility-first design across platforms \n Covers native UI components including tabs and animation patterns for polished mobile experiences \n Built on React and TypeScript for type-safe, maintainable code \n

Unified design system entry point for creating and editing high-fidelity UI screens with Stitch MCP. \n \n Transforms rough design ideas into structured prompts using professional UI/UX terminology and design system context \n Synthesizes existing Stitch projects into .stitch/DESIGN.md \"source of truth\" documents for consistency across screens \n Routes requests intelligently between text-to-design generation, screen editing, and design system documentation workflows \n Automatically manages a

Distinctive, production-grade frontend interfaces that avoid generic AI aesthetics through intentional design choices. \n \n Requires confirmed design context (target audience, use cases, brand personality) before implementation; includes teach-impeccable skill integration for gathering missing context \n Covers five core design areas: typography, color and theming, layout and spacing, visual details, and motion with specific anti-patterns to avoid \n Emphasizes bold aesthetic directions (brutal

Fundamental design principles for writing maintainable, testable Python code. \n \n Covers five core patterns: KISS (Keep It Simple), Single Responsibility Principle, Separation of Concerns, Composition Over Inheritance, and the Rule of Three \n Includes practical code examples contrasting anti-patterns with recommended approaches for each principle \n Provides layered architecture guidance (API, Service, Repository layers) with dependency injection patterns for testability \n Emphasizes explici

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.