Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add anilcancakir/my-claude-code --skill mobile-app-design-masterygit clone --depth 1 https://github.com/anilcancakir/my-claude-codeWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/anilcancakir/my-claude-code/mobile-app-design-mastery)<a href="https://agentmods.dev/skills/anilcancakir/my-claude-code/mobile-app-design-mastery"><img src="https://agentmods.dev/badge/skills/anilcancakir/my-claude-code/mobile-app-design-mastery/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/anilcancakir/my-claude-code/mobile-app-design-mastery"><img src="https://agentmods.dev/badge/skills/anilcancakir/my-claude-code/mobile-app-design-mastery.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00152 | $0.01028 |
| Opus 5 | $0.00076 | $0.00514 |
| Sonnet 5 | $0.00030 | $0.00206 |
| Haiku 4.5 | $0.00015 | $0.00103 |
Grade A, and why
mobile-app-design-mastery scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 119 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Mobile App Design Mastery
Production-grade mobile UI design principles adapted from Refactoring UI for Flutter/native apps.
Core Mobile Design Workflow
1. Start with a Screen, Not a Shell
- Design the core functionality of a single screen first
- Don't start with navigation, tab bars, or app chrome
- Work in greyscale first—add color after hierarchy is clear
- Design for the primary device size, then adapt
2. Establish Mobile Systems
Spacing Scale (dp/logical pixels):
| Token | Size | Use Case |
|---|---|---|
| xs | 4 | Micro gaps, icon padding |
| sm | 8 | Tight, within components |
| md | 12 | Related elements |
| base | 16 | Standard padding |
| lg | 24 | Between sections |
| xl | 32 | Major separation |
| 2xl | 48 | Screen margins on tablets |
Touch Targets:
| Platform | Minimum Size |
|---|---|
| iOS | 44×44 pt |
| Android | 48×48 dp |
| Comfortable | 56×56 |
Type Scale (sp/pt):
| Size | Use Case |
|---|---|
| 11-12 | Captions, labels |
| 14 | Body text, default |
| 16 | Emphasized body |
| 18-20 | Subheadings |
| 24 | Screen titles |
| 28-34 | Large titles (iOS style) |
Shadow/Elevation Scale (dp):
| Level | Elevation | Use Case |
|---|---|---|
| 0 | 0 | Flat surfaces |
| 1 | 1-2 | Cards, tiles |
| 2 | 4 | Raised buttons, app bar |
| 3 | 8 | Bottom sheets, dialogs |
| 4 | 16 | Navigation drawers |
| 5 | 24 | Modals |
3. Build Mobile Hierarchy
Mobile screens have limited space—hierarchy is even more critical.
- Primary: Key action/content (one per screen)
- Secondary: Supporting info (visible but not competing)
- Tertiary: Metadata, timestamps (smallest/lightest)
Key principles:
- Size matters more on mobile—but don't overdo it
- Use weight and color before increasing size
- Emphasize by de-emphasizing competing elements
- Icons need softer colors to balance with text
4. Design for Touch
- Generous touch targets (minimum 44pt/48dp)
- Adequate spacing between interactive elements
- Visual feedback on press (ripples, scale, opacity)
- Swipe actions for common operations
What ships with it
6 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 119 lines · 152 tokens per session scan A 9084e6a88dfe
mobile-app-design-mastery is a skill published in the GitHub repository anilcancakir/my-claude-code (5 stars, last pushed 7mo ago), licensed MIT. It adds 152 tokens to every session and 1,028 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
ui-mobile
Mobile UI patterns - React Native, iOS/Android, touch targets.
ss-audit
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices.
liquid-glass-design
Patterns for implementing Apple's Liquid Glass — a dynamic material that blurs content behind it, reflects color and light from surrounding content, and reacts to touch and pointer interactions. Covers SwiftUI, UIKit, and WidgetKit integration.
android-edge-to-edge
Migrate a Jetpack Compose app to edge-to-edge display and fix system bar inset issues. Use when UI components are obscured by navigation/status bars, fixing IME insets, or enabling edge-to-edge for SDK 35+.
common-mobile-animation
Apply motion design principles for mobile apps covering timing curves, transitions, gestures, and performance-conscious animations. Use when implementing screen transitions, gesture-driven interactions, shared-element animations, or optimizing animation frame rates on iOS, Android, or Flutter.
common-mobile-ux-core
Enforce universal mobile UX principles for touch-first interfaces including touch targets, safe areas, and mobile-specific interaction patterns. Use when building mobile screens, handling touch interactions, or validating safe area compliance.