anilcancakir/my-claude-code
Overview
This skill delivers production-grade mobile UI design guidance adapted from Refactoring UI for Flutter and native apps. It focuses on single-screen workflows, touch-optimized spacing, platform-aware patterns, and a practical type/spacing/elevation system. Use it to create usable, native-feeling iOS and Android screens that scale from phones to tablets.
How this skill works
The skill inspects the target screen and recommends a design-first workflow: gray-scale prototyping, establishing spacing and type scales, then applying color and depth. It enforces touch targets, spacing tokens, and elevation rules and offers platform-specific adjustments (iOS vs Android). It also flags anti-patterns like undersized taps, illegible type, and unsafe edge-to-edge controls.
When to use it
- Designing a new Flutter, iOS, or Android screen from scratch
- Refining existing mobile screens for accessibility and touch comfort
- Creating component libraries or spacing/type tokens for apps
- Preparing designs for handoff to developers with clear platform rules
- Auditing mobile UI for hierarchy, depth, and interaction issues
Best practices
- Start with the primary screen and core task before adding navigation chrome
- Work in greyscale to lock hierarchy, then introduce color
- Use a consistent spacing scale (xs–2xl) and a clear type scale for readability
- Respect minimum touch sizes (44pt iOS / 48dp Android) and add comfortable padding
- Use elevation/subtle shadows per platform rather than identical effects everywhere
- Avoid relying on color alone—pair with weight, contrast, or icons
Example use cases
- Designing a mobile checkout screen with a single clear CTA and touch-friendly inputs
- Converting desktop UI into a native-feeling mobile layout with proper spacing tokens
- Creating a reusable component set for Flutter that implements type, spacing, and elevation scales
- Auditing an app for mobile anti-patterns: small text, cramped touch targets, and unsafe areas
- Designing modal, bottom sheet, or FAB interactions with platform-aware depth and feedback
FAQ
The token sizes are shared as a baseline, but apply platform nuances—iOS prefers slightly softer elevation and larger title scales; Android follows Material elevation and density rules.
What minimum touch target should I enforce?
Enforce at least 44×44 pt for iOS and 48×48 dp for Android; 56×56 is a comfortable option for prominent actions.
Should I design for one device size or multiple?
Design the primary device size first to perfect hierarchy, then adapt tokens and margins for other breakpoints (larger margins on tablets).
8 skills
This skill delivers production-grade mobile UI design guidance for Flutter and native apps, improving touch targets, typography, spacing, and platform-aware
This skill accelerates Flutter theming and UI consistency by applying project-defined ThemeData, ColorScheme, typography, and spacing patterns.
This skill optimizes Laravel infrastructure by coordinating Horizon, Octane, Reverb, Redis, and PostgreSQL to improve queues, caching, and real-time
This skill helps you write Laravel tests with PHPUnit and Dusk, ensuring reliable feature, unit, and browser tests with robust assertions.
This skill translates Refactoring UI principles into Tailwind utility patterns, enabling consistent branding, responsive layouts, and accessible components.
This skill guides Laravel API development using a Service-Repository pattern, ensuring thin controllers, typed layers, and consistent JSON responses.
This skill helps you craft production-grade UI with consistent spacing, typography, color, and depth using Refactoring UI-inspired principles.
This skill helps you rapidly build and debug Laravel Blade views with Alpine.js and Tailwind, boosting UI reliability and developer productivity.
