mobile-design
This skill guides the creation of distinctive, production-grade mobile interfaces using Flutter that avoid generic "standard widget" aesthetics. Implement real working code with exceptional attention to aesthetic details, animations, and creative choices.
The user provides mobile requirements: a screen, app flow, custom widget, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this app solve? Who is holding the device?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, neumorphic, glassmorphic, industrial/utilitarian, etc. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (Flutter performance, platform specificities for iOS/Android, accessibility).
- Differentiation: What makes this interaction UNFORGETTABLE? What's the one gesture or transition someone will remember?
CRITICAL: Choose a clear conceptual direction and execute it with precision. Avoid the "default Material Design" look unless explicitly requested.
Then implement working Flutter code (Dart) that is:
- Production-grade: Proper state management structure (even if simple), error handling, and responsiveness.
- Visually striking: Custom painters, shaders, and non-standard layouts.
- Cohesive: Consistent design language across all widgets.
- Meticulously refined: Exact padding, typography, and timing.
More from irahardianto/monarch
knowledge-searching
Retrieves implementation knowledge, code examples, and documentation references. Use to inform technical decision-making when the user requires specific library usage, framework patterns, or syntax details. Trigger on requests to 'search docs', 'find code examples', or 'check implementation details'.
11opensource-readme-generator
Generate high-quality, "All-Star" README files for open-source repositories. Use this skill when a user asks to create, update, or improve a README.md file for their project.
9debugging-protocol
Comprehensive protocol for validating root causes of software issues. Use when you need to systematically debug a complex bug, flaky test, or unknown system behavior by forming hypotheses and validating them with specific tasks.
8frontend-design
Generates distinctive, production-grade frontend interfaces and artifacts (React, Vue, HTML/CSS). Prioritizes bold aesthetics, unique typography, and motion to avoid generic designs. Use when building websites, landing pages, dashboards, posters, or when the user requests to style, beautify, or create visually striking UI.
8sequential-thinking
Performs dynamic, reflective problem-solving through iterative thought chains. Use for complex planning requiring revision, branching, backtracking, or hypothesis verification. Ideal for multi-step analysis where context maintenance is required or the full scope isn't initially clear.
8brand-identity-creator
Comprehensive guide for creating brand identity guidelines. Use this skill when a user wants to define, create, or document a brand's identity, including mission, vision, values, personality, and visual elements.
8