New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Mobile Design

by timusus in timusus/Shuttle2

UI/UX design, critique and audit for Shuttle Music on Android (Compose, Material 3 Expressive) and iOS (SwiftUI, HIG, Liquid Glass) — every form factor (phone, foldable, tablet, desktop window, car…

Apache-2.0Auto-check passedMobile

Install Mobile Design

skills CLI
$ npx skills add timusus/Shuttle2 --skill mobile-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install timusus/Shuttle2 mobile-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/timusus/Shuttle2.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/mobile-design .claude/skills/mobile-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
mobile-design
GitHub stars
229
Token cost
~2.3k tokens
SKILL.md length
1,101 words
Files
9
Skills in repo
13
Repo updated
First seen
Licence
Apache-2.0

At a glance

UI/UX design, critique and audit for Shuttle Music on Android (Compose, Material 3 Expressive) and iOS (SwiftUI, HIG, Liquid Glass) — every form factor (phone, foldable, tablet, desktop window, car…

  • Works in 8 steps: Conventional behaviour, distinctive… → Parity of intent, not of look. Same… → Artwork is the hero, and artwork colour… → …
  • Reviewing a screen
  • SKILL.md covers Ground truth (read before…, Commands, Principles (the whole skill in… and shape — the design plan, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Mobile Design is an agent skill from timusus/Shuttle2. UI/UX design, critique and audit for Shuttle Music on Android (Compose, Material 3 Expressive) and iOS (SwiftUI, HIG, Liquid Glass) — every form factor (phone, foldable, tablet, desktop window, car, watch) and native surfaces (widgets, Dynamic Island, media session, Auto/CarPlay). Use when designing or reviewing a screen, component or flow, planning a redesign, checking iOS/Android parity, judging whether something "feels native", or before any non-trivial UI change. Triggers on "design", "redesign", "critique"…

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files (for example `adaptive.md`, `android.md` and `competitors.md`).

It sits in Mobile, covering Mobile UI design, iOS development and UI design. It works with iOS, Android and SwiftUI. The repository describes itself as: Shuttle Music: a music player for Android and iOS. Plays local files and streams from Jellyfin, Emby, Plex and Navidrome/Subsonic, with Chromecast, Android Auto, EQ and replay… The licence is Apache-2.0.

When your agent uses it

  • Reviewing a screen
  • Planning a redesign
  • Checking iOS/Android parity
  • Judging whether something feels native

Example prompts

  • “feels native”
  • “design”
  • “redesign”
  • “/mobile-design”

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. Conventional behaviour, distinctive look. Follow platform and music-genre conventions for
  2. Parity of intent, not of look. Same capability and information on both platforms; each built
  3. Artwork is the hero, and artwork colour is Shuttle's signature. Shuttle pioneered theming the
  4. Tokens, never literals. No raw N.dp, Color(0x…), RoundedCornerShape(n.dp), .padding(13),
  5. Every form factor is a first-class layout, not a stretched phone. Decide per layout tier
  6. Accessibility is the floor, not a feature: 48dp/44pt targets, 4.5:1 text contrast, 200% text,
  7. Fewer, better controls. Each screen has one primary action; settings and customisation are
  8. Evidence over opinion. No design is "done" without screenshots at the matrix in

What it can do on your machine

Read from SKILL.md and the folder at commit 116c579. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Mobile Design loads about 2.3k tokens when it runs. Until then it costs about 157 tokens; SKILL.md has 1,101 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~157
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from timusus/Shuttle2 at commit 116c579, republished under its Apache-2.0 licence (© timusus). 1,101 words, ~2,320 tokens.

Download SKILL.mdSave it as .claude/skills/mobile-design/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.
name
mobile-design
description
UI/UX design, critique and audit for Shuttle Music on Android (Compose, Material 3 Expressive) and iOS (SwiftUI, HIG, Liquid Glass) — every form factor (phone, foldable, tablet, desktop window, car, watch) and native surfaces (widgets, Dynamic Island, media session, Auto/CarPlay). Use when designing or reviewing a screen, component or flow, planning a redesign, checking iOS/Android parity, judging whether something "feels native", or before any non-trivial UI change. Triggers on "design", "redesign", "critique", "make it feel native", "polish", "tablet/foldable layout", "widget", "Dynamic Island", "parity".
user_invocable
true

Mobile design (Shuttle Music)

A design skill for a two-platform music player. It is a router: read this file, then load only the references the task needs. Exact token values (spacing, type scale, radii, colours) live in the repo's design docs, not here — this skill says how to decide, those docs say what the values are.

Ground truth (read before designing)

WhatWhere
Android design language (M3 Expressive spec, tokens, component list, approval gate)docs/design/design-language.md
iOS design language (HIG-first tokens, glass, motion)docs/design/ios-design-language.md
App shell, navigation, player state model, layout tiersdocs/architecture/app-shell.md
Parity audit and redesign inventorydocs/architecture/parity-audit.md, redesign-inventory.md
Android tokens and componentsandroid/designsystem/.../theme/, .../component/, debug catalog/
iOS tokens and componentsios/S2/Theme/, ios/S2/Components/
Goldens (per component and per screen)docs/design/catalog/**, docs/design/<screen>/**
Layout tiers in codeAndroid ui/shell/adaptive/ShellLayout.kt; iOS ios/S2/Theme/LayoutTier.swift

If a reference here conflicts with those docs, the docs win (they record decisions); file a /note if the doc looks wrong.

Commands

Pick the mode from the request; each lists the references to load.

ModeUse whenLoad
shapeNew screen/feature/flow, or a redesign. Produces a design plan before any code.craft-floor, platform file(s), adaptive, music, competitors
critique"Does this look right / feel native?" on a screen that exists. Screenshot-led.craft-floor, evaluate, platform file
auditSystematic sweep of a module or screen for token, a11y, adaptive and platform-conformance defects. A whole-app audit is four required passes — screenshot scorecard, foundations sweep in code against the ground-truth docs, native surfaces, feature expectations — defined in evaluate.md; the scorecard alone is not an audit.craft-floor, evaluate, platform file, adaptive; a whole-app audit also loads native-surfaces, competitors
parityCompare one feature across iOS and Android.parity section below, both platform files
surfacesWidgets, Live Activities, controls, tiles, Auto/CarPlay, Wear/Watch, media session.native-surfaces
polishSmall refinements to a finished screen (spacing rhythm, motion, optical alignment).craft-floor, platform file

References: craft-floor.md · android.md · ios.md · adaptive.md · music.md · native-surfaces.md · evaluate.md · competitors.md

Principles (the whole skill in eight lines)

  1. Conventional behaviour, distinctive look. Follow platform and music-genre conventions for structure and behaviour (navigation, back, sheets, gestures, insets, a11y) — users read a deviation there as broken, not distinctive. Deviate only when you can name the convention, the reason, and the accessible standard alternative. Identity lives in the visual and motion layer: artwork-driven colour, type, a few signature motions. An Android screen that looks like an iOS port (or vice versa) has failed; so has one that looks like a stock Google app.
  2. Parity of intent, not of look. Same capability and information on both platforms; each built from its own idioms (see Parity).
  3. Artwork is the hero, and artwork colour is Shuttle's signature. Shuttle pioneered theming the app from colours extracted from album art and was known for it — it is the brand's one owned idea. Covers lead, chrome recedes, colour comes from the art with guaranteed contrast. When deciding where to "spend boldness", spend it here first (see music.md → Artwork colour).
  4. Tokens, never literals. No raw N.dp, Color(0x…), RoundedCornerShape(n.dp), .padding(13), Font.system(size:) in screens. Missing token → add it to the design system, don't inline it.
  5. Every form factor is a first-class layout, not a stretched phone. Decide per layout tier (adaptive.md), at the shell, not ad hoc in screens.
  6. Accessibility is the floor, not a feature: 48dp/44pt targets, 4.5:1 text contrast, 200% text, screen reader labels, reduced motion and transparency honoured.
  7. Fewer, better controls. Each screen has one primary action; settings and customisation are pruned, not accumulated (see the anti-patterns in competitors.md).
  8. Evidence over opinion. No design is "done" without screenshots at the matrix in evaluate.md, judged by a separate strict pass.
Show full SKILL.md (503 more words)Show less

shape — the design plan

Write the plan (in the issue or a scratch file) before code. Then re-read it against the brief and the craft floor, revise, and only then build. The plan has:

  1. Job and context — who, doing what, on which surfaces; the one primary action.
  2. Reference — the closest prior art in competitors.md and in our own goldens, and what we take or reject from each.
  3. Information hierarchy — what is seen first, second, third; what is hidden behind a menu.
  4. Layout per tier — an ASCII wireframe for Compact, Medium, Expanded+ and tabletop (Android) / compact and regular widths (iOS). Name the canonical layout used (adaptive.md).
  5. Platform translation — a two-column table: Android component/idiom | iOS component/idiom.
  6. States — loading, empty, error, offline/unavailable-source, partial (downloading), long text, huge library, no artwork.
  7. Motion — what moves, which motion token/spring, and the reduced-motion fallback.
  8. Tokens needed — existing tokens used, and any new token proposed (with the reason).
  9. Verification — which goldens/flows will capture it (see evaluate.md).

Spend boldness in one place per screen (usually the artwork treatment or one signature motion); keep everything else quiet and standard.

Parity

For one feature, fill this table from code and screenshots of both apps; every row must be "same intent, native idiom" or an explicit, recorded divergence.

AspectAndroid idiomiOS idiom
Top-level navigationNavigation bar → rail (NavigationSuite)Tab bar → sidebar (sidebarAdaptable)
Mini playerDocked above nav bar; expands via sheetTab bar bottom accessory; minimises on scroll
Full player dismissDrag down + predictive back collapses into mini playerDrag down / swipe; no back button
Secondary actionsOverflow menu / modal bottom sheetContext menu with preview / .confirmationDialog
Row actionsLong-press → selection mode; swipe only where Material allowsSwipe actions + context menu
SheetsModal bottom sheet with drag handle.sheet with detents
Primary emphasisFilled/tonal buttons, button groups, FAB/toolbarProminent/glass buttons, toolbar items
SearchSearch bar / SearchView expanding to full screen.searchable, search tab
TypographyGoogle Sans Flex roles, spSF / Dynamic Type text styles
IconsMaterial Symbols (rounded, filled when selected)SF Symbols with effects
Colour from artMaterialKolor scheme from seed, tonal surfacesArtwork tint/gradient, glass over art
HapticsHapticFeedbackConstants on confirm/toggle/drag.sensoryFeedback on the same moments
FeedbackSnackbarInline confirmation / HUD-free state change

Flag in a parity report: missing capability on one side; an idiom borrowed from the other platform; the same idiom done less well (the usual Android problem — compare screenshots side by side).

Output contract

  • shape: the plan above, then implementation briefs (via /brief) per platform; never one brief spanning both platforms' UI code.
  • critique / audit: findings table — severity | file:line or screenshot | rule | fix — ranked, only genuine problems, plus the evaluate.md scorecard. A whole-app audit reports all four passes and its feature-gap list. File each non-trivial finding with /note (label design), with cropped screenshot evidence embedded in the issue (evaluate.md → Filing findings).
  • parity: the table above with a verdict per row, and filed gaps.
  • Visual claims cite the screenshot they came from and whether it was a golden, emulator/simulator or device.

© timusus, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 8 other files in .claude/skills/mobile-design of timusus/Shuttle2.

  • SKILL.md
  • adaptive.md
  • android.md
  • competitors.md
  • craft-floor.md
  • evaluate.md
  • ios.md
  • music.md
  • native-surfaces.md

Open the folder on GitHubat commit 116c579

Compare with similar skills

Mobile Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Mobile Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mobile Design this skilltimusus/Shuttle2229—~2.3kAutomated safety check: PassApache-2.0
SwiftUI Design SkillWholiver/swiftui-design-skill210—~2.8kAutomated safety check: PassMIT
Developing Mobile Appstelagod/code-abyss244—~258Automated safety check: PassMIT
Accessible Mobile DeveloperFerroxLabs/wayland608—~3.6kAutomated safety check: PassApache-2.0
Phoneagentrounak/PhoneAgent798—~2.2kAutomated safety check: PassMIT
Expo UIarcboxlabs/linkcode155—~1.2kAutomated safety check: PassMIT

Similar skills

  • SwiftUI Design Skill

    Wholiver/swiftui-design-skill

    Guides the agent to design distinctive SwiftUI interfaces for iOS and macOS, with six anti-generic rules, a design direction workflow and a five-dimension review.

    210 GitHub stars~2.8k tokensUpdated 5 mo ago
    MobileAuto-check passed

  • Developing Mobile Apps

    telagod/code-abyss

    Mobile development knowledge reference covering iOS (SwiftUI), Android (Jetpack Compose), React Native, and Flutter.

    244 GitHub stars~258 tokensUpdated 2 mo ago
    MobileAuto-check passed

  • Accessible Mobile Developer

    FerroxLabs/wayland

    Mobile accessibility development expertise covering iOS VoiceOver and Android TalkBack integration, accessibility APIs for SwiftUI and Jetpack Compose, touch target sizing, gesture alternatives…

    608 GitHub stars~3.6k tokensUpdated yesterday
    MobileAuto-check passed

  • Phoneagent

    rounak/PhoneAgent

    Control a connected iPhone, iOS simulator, Android emulator, or Android device from macOS through PhoneAgent's JSON-RPC bridge.

    798 GitHub stars~2.2k tokensUpdated 1 mo ago
    MobileAuto-check passed

  • Expo UI

    arcboxlabs/linkcode

    Framework (OSS). An agent skill from arcboxlabs/linkcode.

    155 GitHub stars~1.2k tokensUpdated 9 days ago
    MobileAuto-check passed

  • Simdeck

    NativeScript/SimDeck

    A skill your agent uses for simulator lifecycle, app install/launch, live viewing, UI inspection, touch/keyboard automation, screenshots, recordings, logs, pasteboard, hardware controls, and…

    152 GitHub stars~3.6k tokensUpdated 26 days ago
    MobileAuto-check passed

More from timusus/Shuttle2

All 13 skills in this repo

  • Android Coroutine Testing

    timusus/Shuttle2

    Comprehensive guidance for writing deterministic tests for Android code using Kotlin coroutines.

    229 GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

  • Debug Receivers

    timusus/Shuttle2

    Drive the S2 debug build's playback and queue over ADB broadcasts — play the whole library, play/pause, skip, seek, remove a queue item, toggle shuffle/repeat, dump playback state as JSON, reimport…

    229 GitHub stars~1.9k tokensUpdated yesterday
    Auto-check passed

  • Deploy Android

    timusus/Shuttle2

    Deploy the Android app to the Play Store via GitHub Actions.

    229 GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

  • Reply Reviews

    timusus/Shuttle2

    Weekly Play Store review flow for S2: fetch new reviews, draft replies, get owner approval, then post.

    229 GitHub stars~1k tokensUpdated yesterday
    Auto-check passed

  • Check

    timusus/Shuttle2

    Run lint + unit tests, investigate and fix failures. An agent skill from timusus/Shuttle2.

    229 GitHub stars~449 tokensUpdated yesterday
    Auto-check passed

  • Commit

    timusus/Shuttle2

    Analyse working tree changes, group them into logical atomic commits, and create well-structured conventional commits with module scopes.

    229 GitHub stars~1.9k tokensUpdated yesterday
    Auto-check: notes

Works with

Categories

Questions about Mobile Design

What does Mobile Design do?

UI/UX design, critique and audit for Shuttle Music on Android (Compose, Material 3 Expressive) and iOS (SwiftUI, HIG, Liquid Glass) — every form factor (phone, foldable, tablet, desktop window, car…. Mobile Design is an agent skill from timusus/Shuttle2. UI/UX design, critique and audit for Shuttle Music on Android (Compose, Material 3 Expressive) and iOS (SwiftUI, HIG, Liquid Glass) — every form factor (phone, foldable, tablet, desktop window, car, watch) and native surfaces (widgets, Dynamic Island, media session, Auto/CarPlay).

When should I use Mobile Design?

Mobile Design fits situations like: reviewing a screen; planning a redesign; checking iOS/Android parity; judging whether something feels native.

How do I install Mobile Design in Claude Code?

Run `npx skills add timusus/Shuttle2 --skill mobile-design -a claude-code`. Or copy the skill folder (.claude/skills/mobile-design in timusus/Shuttle2) into .claude/skills/mobile-design in your project. Claude Code loads it when a task matches its description.

How do I install Mobile Design in Codex?

Run `npx skills add timusus/Shuttle2 --skill mobile-design -a codex`. Or copy the skill folder (.claude/skills/mobile-design in timusus/Shuttle2) into .agents/skills/mobile-design in your project. Codex loads it when a task matches its description.

Can I use Mobile Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add timusus/Shuttle2 --skill mobile-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mobile-design, .gemini/skills/mobile-design, .github/skills/mobile-design and .opencode/skills/mobile-design in your project.

What does Mobile Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Mobile Design is instructions for the agent only.

Does Mobile Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Mobile Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Mobile Design use?

Mobile Design is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mobile Design use?

About 2.3k tokens (SKILL.md is roughly 9.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Mobile Design?

Skills that share tags, products or a category with Mobile Design: SwiftUI Design Skill (Wholiver/swiftui-design-skill, 210 stars), Developing Mobile Apps (telagod/code-abyss, 244 stars), Accessible Mobile Developer (FerroxLabs/wayland, 608 stars) and Phoneagent (rounak/PhoneAgent, 798 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mobile Design?

timusus (a GitHub user) maintains it in timusus/Shuttle2, which has 229 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 6, 2026.

Source: timusus/Shuttle2 on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.