Mobile Design Skills

AI agent skills for designing platform-native iOS and Android interfaces that don't look AI-generated.

Background
Philosophy
Features
Installation
Usage
Project Structure
Contributing
License

Background

AI coding assistants tend to produce generic mobile UIs: stock navigation, default colors, uniform shapes, no thought given to motion. These two skills push the output from "template app" toward "intentionally designed" by teaching agents the current platform design languages and the specific anti-patterns that mark amateur work.

One skill covers iOS 26 Liquid Glass. The other covers Android 16 Material 3 Expressive. Both follow the Agent Skills open format, so they work with Claude, Cursor, Copilot, Codex, and any assistant that supports it.

Philosophy

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

What they cover:

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

What they leave out on purpose:

Implementation code (use platform SDK docs for SwiftUI, UIKit, and Compose APIs)
Cross-platform frameworks like React Native and Flutter

Features

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

Each skill includes a Design Thinking section that forces a clear direction before any UI is generated, detailed platform guidelines, inline accessibility requirements, and an explicit list of the anti-patterns that mark AI-generated work on that platform.

Installation

Pick whichever path fits your AI tool.

Option A: 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

Option B: Claude Code plugin

For personal use:

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

To provide the 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

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

Where to save skills for common tools:

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

Usage

Once a skill is installed, reference it in your prompt. The agent loads SKILL.md and applies its design thinking and platform guidelines before generating any UI.

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

The description field in each skill's front matter also lets supporting agents trigger it automatically when you ask to build, style, or redesign an iOS or Android interface.

To confirm a skill is active, check that the agent references the Design Thinking section and the platform-specific guidelines from SKILL.md before producing a UI.

Project Structure

.claude-plugin/
  plugin.json          Claude Code plugin manifest
  marketplace.json     Claude Code marketplace catalog
mobile-design-ios/
  SKILL.md             iOS 26 Liquid Glass (SwiftUI, UIKit)
mobile-design-android/
  SKILL.md             Android 16 M3 Expressive (Jetpack Compose)
AGENTS.md              Repo-level agent onboarding
CLAUDE.md              Symlink to AGENTS.md
README.md
LICENSE

Each SKILL.md is self-contained, with no external references directory.

Contributing

Contributions are welcome. When editing skills:

Keep each SKILL.md under 500 lines. Favor density over volume.
Write anti-patterns to describe what the mistake looks like, not just what's wrong.
Ground every guideline in official platform documentation (Apple HIG, Material Design guidelines).
Keep accessibility guidance inline with the design guidelines, not bolted on in a separate section.

mobile-design-skills