Mobile Game UI Responsive Design System Creator
Design scalable mobile game UI systems across devices with Claude validation
What You Can Do
You can build device-aware UI design systems that automatically scale across fragmented mobile ecosystems without redesigning for each screen size. Claude helps you define parametric design tokens, validate safe zones and touch target sizes, document aspect ratio handling strategies, and iterate on layouts for iOS and Android simultaneously—reducing rework and ensuring visual consistency across platform variants.
Features
Define target phones, tablets, and aspect ratios with Claude-assisted breakpoint calculation
Claude checks that UI elements scale proportionally while maintaining gameplay visibility and touch usability
Generate and validate status bar, notch, and home indicator boundaries for iOS and Android edge cases
Validate that buttons and interactive elements meet minimum size requirements (44-48pt) across all devices
Create systematic spacing, typography, and color scales that Claude helps you organize and validate
Produce developer-ready specifications with margins, anchoring rules, and responsive constraints
Claude assesses UI adaptation complexity when expanding from mobile to tablet or vice versa
Refine layouts across multiple screen sizes with Claude feedback on visual hierarchy and readability
Example Output
Device Matrix Output:
- iPhone SE (4.7" 16:9): 375px width, 667px height
- iPhone 14 Pro Max (6.7" 19.5:9): 430px width, 932px height
- iPad Air (10.9" 4:3): 820px width, 1180px height
Safe Zone Specification:
Status Bar: 44pt (iPhone), 20pt (Android)
Dynamic Island: 30pt × 12pt rounded cutout at (192, 0)
Home Indicator: 34pt bottom safe area
Touch Target Validation Checklist: ✓ Primary buttons: 48pt minimum (exceeded at 56pt) ✓ Icon buttons: 44pt hit area with 8pt padding ✓ Text links: 44pt tap zone with minimum 14pt font ✓ Slider handles: 48pt diameter confirmed across 3 device classes
What's Included
- SKILL.md: Complete instruction file with Core Workflow phases for device definition, layout specification, and validation
- Device Matrix Template: Spreadsheet structure for documenting target devices, screen sizes, and breakpoint calculations
- Safe Zone Reference: Platform-specific specifications for status bars, notches, home indicators, and landscape safe areas
- Design Token Framework: Systematic guide for spacing scales, typography hierarchies, and color token organization
- Responsive Layout Checklist: Validation criteria for touch targets, visibility, aspect ratio handling, and developer handoff readiness
Who It's For
- Mobile game UI/UX designers — Building responsive design systems for multi-device game launches
- Game art directors — Establishing visual consistency rules across phone and tablet variants
- Game developers — Implementing responsive UI from design specifications with confidence
- Game studio leads — Planning UI scope and rework reduction for new mobile game projects
- Indie game developers — Creating professional UI systems without extensive device testing budgets
Best For
- Designing UI systems for simultaneous iOS and Android launches
- Creating port plans when expanding games from mobile to tablet
- Validating existing UI layouts for responsiveness before launch
- Documenting parametric scaling rules and design tokens for development teams
- Auditing touch target sizes and safe zones across device classes
- Establishing responsive design standards for mobile game studios
You might also like
You'll convert game design briefs into comprehensive visual direction documents that guide concept artists and 3D modelers through pre-production. This skill generates aesthetic frameworks, curates style references, specifies character and environment requirements, documents technical constraints, and produces mood board descriptions—all formatted for immediate team alignment and reference during production. Instead of iterating through clarifying questions, you'll have structured documentation that translates vague creative intent into actionable visual guidelines.
You'll develop dynamic music systems using layered composition, state mapping, and parameter control. This skill teaches you to design vertical remixing (adding/removing musical layers) and horizontal sequencing (transitioning between musical sequences) based on game conditions. You'll create clear technical specifications that bridge creative composition and programmer implementation, enabling music that adapts seamlessly to player actions, environmental shifts, and gameplay intensity.
You can submit UI mockups, wireframes, or detailed descriptions of mobile game screens to Claude for comprehensive interaction pattern analysis. Claude evaluates touch target sizing, gesture hierarchies, screen orientation handling, accessibility compliance (WCAG 2.1 AA), and player engagement friction points. You'll receive specific, actionable recommendations for optimizing layouts across phones, tablets, and foldables—plus competitor pattern benchmarking and tutorial flow refinement.
by skillslib
You can analyze shader compilation logs across multiple graphics APIs, automatically detect common shader errors and cross-platform compatibility issues, and receive actionable optimization recommendations for your studio's shader build infrastructure. Claude helps you identify performance regressions, validate that new shader code meets performance targets, and document compilation requirements for team onboarding—turning complex multi-API shader validation into a systematic, repeatable process.
Get a step-by-step launch strategy tailored to your specific business model. This skill analyzes your offering, target market, and resources to create a realistic, phased launch plan with timing, marketing tactics, and success metrics. You'll receive competitor analysis, positioning recommendations, and a 90-day execution roadmap.
You can upload profiling data, flame graphs, or performance metrics from your game engine and receive systematic analysis of bottlenecks. Claude identifies root causes by cross-referencing metrics against common engine patterns, reveals cascading performance issues, and delivers production-ready code solutions with clear trade-offs for each optimization approach.
You can input high-level design direction—like 'grimdark knight commander' or 'bioluminescent forest'—and receive comprehensive visual briefs that include mood references, silhouette guidelines, color palettes, pose suggestions, and thematic specifications. This skill generates structured design documentation that guides your concept art pipeline, reduces revision cycles, and ensures all team members work from the same artistic vision.
You can model complex in-game economies by describing currency flows, progression curves, and monetization systems in natural language, then have Claude validate the math, simulate outcomes across player cohorts (free players, mid-tier spenders, whales), identify inflation breakpoints, and stress-test against exploits. This lets you iterate on balance rapidly without building spreadsheets, catching economy-breaking issues before they damage retention.