mobile-design-skills

Mobile Design Skills

AI agent skills for designing platform-native mobile interfaces that don't look AI-generated. Two skills covering the latest design languages for both major platforms:

• iOS — Liquid Glass (iOS 26)
• Android — Material 3 Expressive (Android 16)

Built for Claude, Cursor, Copilot, Codex, and any AI coding assistant that supports the Agent Skills open format.

Why These Skills Exist

AI coding assistants generate generic mobile UIs — stock navigation, default colors, uniform shapes, no motion consideration. These skills shift the output from "template app" to "intentionally designed" by teaching agents the current platform design languages and the specific anti-patterns that mark amateur implementations.

Philosophy

These are opinionated, generative skills — not audit checklists. They push agents toward bold, intentional design choices the same way frontend-design works for web.

Covered:

• Platform-specific design language (Liquid Glass, M3 Expressive)
• Visual hierarchy, typography, color, shape, and motion guidelines
• Accessibility requirements baked into design decisions
• Anti-patterns that produce generic "AI slop" on each platform

Intentionally excluded:

• No implementation code (use platform SDK docs for SwiftUI/UIKit/Compose APIs)
• No cross-platform frameworks (React Native, Flutter)

Coverage

Skill	Platform	Design Language	Key Topics
mobile-design-ios	iOS 26	Liquid Glass	Two-layer hierarchy, glass variants, GlassEffectContainer, SF Symbols 7, materialize/morph motion, haptics, concentric geometry, scroll-edge effects, sidebar/sheet patterns
mobile-design-android	Android 16	M3 Expressive	Spring-based motion (spatial vs effects), 35 shapes with morphing, 48 color roles, 30 typography styles, ButtonGroup/FABMenu/Toolbar, dynamic color, edge-to-edge, predictive back, adaptive layouts

How to Use These Skills

Option A: Using skills.sh (Recommended)

# Install both skills
npx skills add https://github.com/ivan-magda/mobile-design-skills

# Install only one
npx skills add https://github.com/ivan-magda/mobile-design-skills --skill mobile-design-ios
npx skills add https://github.com/ivan-magda/mobile-design-skills --skill mobile-design-android

Then use in your AI agent:

Design an iOS fitness tracker dashboard using the mobile design ios skill

Use the mobile design android skill and design a food delivery home screen

Option B: Claude Code Plugin

Personal Usage

/plugin marketplace add ivan-magda/mobile-design-skills
/plugin install mobile-design-skills@mobile-design-skills

Project Configuration

To automatically provide these skills to everyone working in a repository, configure .claude/settings.json:

{
  "enabledPlugins": {
    "mobile-design-skills@mobile-design-skills": true
  },
  "extraKnownMarketplaces": {
    "mobile-design-skills": {
      "source": {
        "source": "github",
        "repo": "ivan-magda/mobile-design-skills"
      }
    }
  }
}

Option C: Claude Projects

Upload the SKILL.md file for your target platform to a Claude Project's knowledge base.

Option D: Manual Install

1. Clone this repository
2. Install or symlink the skill folder(s) following your tool's skill installation docs
3. Ask your AI tool to use the skill for mobile design tasks

Where to Save Skills

• Codex: Where to save skills
• Claude: Using Skills
• Cursor: Enabling Skills

How to verify: Your agent should reference the design thinking section and platform-specific guidelines from SKILL.md before generating any UI.

Contributing

Contributions are welcome. When editing skills: