mobile-design

Audit React Native and Flutter code against mobile design best practices.

3|2|Updated Feb 27, 2026
One-click install
npx skills add https://github.com/grasberg/sofia --skill mobile-design-grasberg
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/grasberg/sofia/tree/main/cmd/sofia/internal/onboard/antigravity-kit/.agent/skills/mobile-design
Command: npx skills add https://github.com/grasberg/sofia --skill mobile-design-grasberg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill helps teams enforce mobile-first UX principles by auditing codebases against touch targets, performance, typography, color systems, navigation, and accessibility guidelines.

Core Features & Use Cases

  • Enforces anti-memorization design thinking before work to improve platform-specific decisions.
  • Provides runtime and documentation prompts to check touch targets, 60fps performance, dark mode support, typography scale, and color contrast.
  • Use in code reviews, onboarding, and design handoffs to surface actionable remediation for real-world mobile projects.

Quick Start

Prompt the AI to audit a mobile project with the mobile-design skill and return a prioritized remediation list.

Frequently Asked Questions about mobile-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit React Native and Flutter codebases for mobile UI best practices?

Audit React Native and Flutter codebases by analyzing code against touch targets, 60fps performance, typography, dark mode, and accessibility guidelines to produce prioritized, actionable remediation steps.

What is the minimum touch target size for mobile design accessibility?

Mobile design accessibility requires touch targets of 44-48pt to ensure usable interfaces. The skill enforces these constraints during code reviews and design handoffs by flagging non-compliant UI elements.

How do I check if my mobile UI supports dark mode and dynamic type?

Check dark mode and dynamic type support by auditing mobile UI code against color system and typography scale guidelines. The analysis surfaces missing adaptive layout implementations and contrast failures.

Can I use mobile design guidelines for code reviews and design handoffs?

Yes, mobile design guidelines can be applied directly to code reviews, onboarding guides, and design handoffs. The skill analyzes project workflows to surface actionable recommendations for real-world scenarios.

What is the best way to enforce 60fps animations and platform-specific navigation patterns?

Enforce 60fps animations and platform-specific navigation by auditing mobile UI code against performance and Material/iOS pattern guidelines. The analysis identifies jank risks and non-native navigation implementations.

Does mobile design auditing work with secure token handling and color contrast checks?

Yes, mobile design auditing works with secure token handling and color contrast checks. The skill scans codebases to verify accessibility compliance and exposes concrete fixes for contrast and security gaps.