Mobile Game UI Responsive Design System Builder
Design adaptive mobile game UI that scales flawlessly across all devices and orientations
What You Can Do
You can create complete responsive UI systems for mobile games that intelligently adapt from 4.5" budget phones to 6.7" flagship devices and tablets. Claude generates viewport-aware layouts, touch-target specifications (minimum 44x44pt), safe area definitions for notches and dynamic islands, and asset scaling breakpoints. You get dimension tables, anchor point documentation, and orientation-switching strategies that your entire development team can reference.
Features
generates scaling rules for 5+ device form factors with pixel density considerations (1x to 3x)
accounts for notches, rounded corners, dynamic islands, and variable screen cutouts across devices
ensures all interactive elements meet minimum ergonomic sizes (44x44pt+) across resolutions
designs dual-orientation UI systems with intelligent element repositioning and reflowing
provides breakpoint tables and scaling factors for art teams to optimize graphics for multiple densities
maps UI element positions relative to screen edges, safe zones, and reference grids
recommends render strategies and asset management for low-end device compatibility
ensures UI readability and visual priority remain consistent across all screen sizes
Example Output
Mobile Game HUD Layout System
Device Breakpoints:
- Small phones (4.5"-5.1", 1x): 360x667px baseline
- Standard phones (5.4"-6.1", 2x): 1170x2532px
- Large phones (6.7", 3x): 1440x3120px
- Tablets (10"+): custom aspect ratio handling
Safe Zone Margins:
- Portrait: top 44pt (notch), bottom 34pt (home indicator), sides 16pt
- Landscape: top 0pt, bottom 21pt, left/right 44pt (dynamic island aware)
Touch Target Grid (44x44pt minimum):
- Action buttons: 64x64pt with 16pt spacing
- Menu items: 56x56pt tap zones
- HUD health bar: 8pt padding from safe edge
Asset Scaling Table:
- 1x assets: 100% scale for budget devices
- 2x assets: 200% scale for standard flagships
- 3x assets: 300% scale for high-DPI devices
What's Included
- SKILL.md instruction file with responsive design principles and mobile-specific constraints:
- Device breakpoint template listing common form factors with viewport dimensions and scaling factors:
- Safe zone mapping worksheet for notches, dynamic islands, and screen cutouts across iOS/Android:
- Touch target specification checklist ensuring ergonomic compliance across all UI elements:
- Asset scaling reference table with density multipliers and recommended breakpoints for art teams:
Who It's For
- Mobile game designers building UI systems for multi-device release
- Game UI/UX specialists creating adaptive interfaces for indie and AAA titles
- Game developers documenting responsive layout specifications for engineering teams
- Art directors planning asset creation strategies across multiple pixel densities
- Product managers defining device support matrices and responsive design requirements
Best For
- Creating responsive UI layouts for games targeting 5+ device form factors
- Designing adaptive HUD systems that work in both portrait and landscape orientation
- Generating safe zone specifications for notches, rounded corners, and dynamic islands
- Building touch interaction guidelines that maintain ergonomic standards across all devices
- Documenting asset scaling strategies and breakpoints for graphics teams
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.