Cross-Platform UI Hierarchy & Spacing Review
Ranked fixes for cluttered screens: hierarchy, a spacing token scale, and per-platform patterns for web, iOS, Android, desktop.
Before & after
Same prompt, same agent — the only difference is the skill.
Sign-up flows can work across platforms, but you'll want to make sure the experience feels native to each one. Consider the screen sizes and input methods for each platform. You might want to design the flow on paper first or in a design tool, then build from there. There are frameworks and libraries that can help with consistency. You'd want to test on actual devices to see how it feels.
MULTI-PLATFORM SIGN-UP DESIGN SPECIFICATION FLOW ARCHITECTURE (3-screen sequential): SCREEN 1: EMAIL ENTRY (Platform-specific input) iOS → Native email keyboard with suggestions Android → Gmail autofill integration, autocorrect disabled Web → Text input with :focus ring, 2px border on active state • Field validation: Real-time after 3 chars • Error state: Red border, help text below • Password strength meter: 4-level visual indicator SCREEN 2: PASSWORD & PROFILE iOS → Password field shows/hide toggle (right-aligned button) Android → Material Design password visibility icon (eye icon) Web → Checkbox "Show password" below field • Name input: First+last on iOS/Android (stacked), single "Full Name" on web • Avatar picker: Default avatar grid (6 options) on mobile, upload + crop on web • Constraint: Form fits single viewport without scroll SCREEN 3: EMAIL CONFIRMATION • All platforms: 6-digit code input (auto-advance per digit) • iOS: Paste auto-fill from Mail app • Android: SMS retriever API auto-reads code • Web: Clipboard paste support + 60-sec countdown timer • Fallback: Resend link if code doesn't arrive CROSS-PLATFORM PATTERNS: → Safe area insets respected on notch/cutout phones → Min tap target: 44pt iOS, 48dp Android, 44px web → Color contrast: WCAG AA minimum (4.5:1 text) → Keyboard avoidance: Form fields reposition above keyboard on iOS/Android → Submit button: Full-width primary CTA, disabled until valid input → Loading state: 2sec spinner max before timeout message ACCESSIBILITY: • Screen reader labels: associate label with input via aria-labelledby • Error messages: aria-live="polite" announcements • Keyboard navigation: Tab order matches visual left-to-right • Mobile: Voice input support for email field
About this skill
Your screen feels cluttered and you can't say why. Or your mobile version feels like a shrunken website. Most feedback stops at "improve the hierarchy." This skill names which elements are fighting for attention and what is causing it. It then gives exact fixes and shows what has to change on each platform.
What it does
- Ranks the elements on a screen by importance to its job and points out where visual weight doesn't match that ranking, by channel: size, weight, contrast, position, or enclosure
- Turns messy spacing (6px here, 14px there) into a 4-based token scale, with a value-by-value mapping and the gap rules inside and between groups
- Translates interaction patterns between platforms: hover-only actions, navigation, back behavior, modals, context menus, FABs, and density
- Checks touch-target sizes, contrast, focus order, safe areas, and the iOS Safari input-zoom trap, with guideline numbers flagged for verification
- Edits pasted CSS, Tailwind, SwiftUI, Compose, or React Native in your own syntax, showing only the changed lines
What you get
A ranked diagnosis (at most the top problems), element-level fixes with exact values, a spacing token map when relevant, and a platform-delta table covering only the patterns that differ. Questions come last.
Best for
Product designers, front-end and mobile developers, and solo builders shipping one product to web plus iOS and/or Android who need specific, defensible layout fixes rather than general design advice.
SKILL.md preview
---
name: cross-platform-ui-hierarchy-spacing-review
description: Diagnoses and fixes UI screens for web, iOS, Android, and desktop. It ranks the visual hierarchy against the screen's job, maps ad hoc spacing onto a token scale, and translates interaction patterns (touch targets, navigation, hover, back, density, focus) to each platform's conventions. Use when the user says "this screen feels cluttered but I can't say why", "set up a spacing system for our app", "our mobile version feels like a shrunk website", "review this layout", "users keep mis-tapping buttons on Android", "how should this work on iOS vs web", "make this design feel more polished".
---
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.