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 JuanMarchetto/agent-skills --skill mobile-design-systemgit clone --depth 1 https://github.com/JuanMarchetto/agent-skillsWrote 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/juanmarchetto/agent-skills/mobile-design-system)<a href="https://agentmods.dev/skills/juanmarchetto/agent-skills/mobile-design-system"><img src="https://agentmods.dev/badge/skills/juanmarchetto/agent-skills/mobile-design-system/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/juanmarchetto/agent-skills/mobile-design-system"><img src="https://agentmods.dev/badge/skills/juanmarchetto/agent-skills/mobile-design-system.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.00086 | $0.02238 |
| Opus 5 | $0.00043 | $0.01119 |
| Sonnet 5 | $0.00017 | $0.00448 |
| Haiku 4.5 | $0.00009 | $0.00224 |
Grade A, and why
mobile-design-system 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 7d 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 — 221 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Mobile Design System
A unified mobile design system covering UX patterns, React Native implementation, visual design process, and platform conventions for iOS and Android.
When to Use This Skill
Activate this skill when the task involves:
- Building mobile apps with React Native, Flutter, or SwiftUI
- Designing mobile screens -- layouts, flows, onboarding, dashboards
- Implementing touch interactions -- gestures, swipe actions, pinch-to-zoom
- Reviewing mobile UX -- auditing touch targets, thumb zones, accessibility
- Following platform conventions -- iOS Human Interface Guidelines, Material Design
- Creating responsive mobile-first web apps or Progressive Web Apps
- Optimizing mobile performance -- images, loading states, Core Web Vitals
- Mobile accessibility -- screen readers, contrast, Dynamic Type, VoiceOver/TalkBack
Core Philosophy
Mobile UI is about touch, speed, and focus. There are no hover states. Screens are small. Users operate one-handed, often distracted, on unreliable networks. Every design decision must account for these constraints.
Three questions before designing any screen:
- What is the user trying to accomplish? Reduce friction to that goal.
- How should this make the user feel? Trust, delight, confidence, calm.
- What should they notice first? Establish clear visual hierarchy.
Foundational Rules
Touch Targets (Non-Negotiable)
All interactive elements must meet minimum touch target sizes:
| Platform | Minimum | Optimal | Spacing |
|---|---|---|---|
| iOS (HIG) | 44x44 pt | 56x56 pt | 8pt |
| Android (Material) | 48x48 dp | 56x56 dp | 8dp |
| Web (WCAG 2.1 AAA) | 44x44 px | 48x48 px | 8px |
Never create buttons, links, or icon buttons smaller than these minimums. Use minHeight and minWidth rather than fixed dimensions so content can grow with Dynamic Type.
Thumb Zones
Mobile screens have three ergonomic zones for one-handed use:
- Easy zone (bottom center): Place primary actions here -- CTAs, tab bars, submit buttons
- Stretch zone (middle): Content area, form fields, secondary actions
- Difficult zone (top corners): Destructive actions, infrequent navigation, settings
What ships with it
7 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.
- 7d ago First seen · 221 lines · 86 tokens per session scan A 0ebbf00f004d
mobile-design-system is a skill published in the GitHub repository JuanMarchetto/agent-skills (5 stars, last pushed 5mo ago), licensed MIT. It adds 86 tokens to every session and 2,238 once invoked, about $0.0004 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-09-03.
Other skills, from other repositories
clone-website
Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases…
omh-apple-design
This is a Hermes-native apple-design workflow skill.
platform-conventions
Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use responsive-design; for matching competitor patterns use jakobs-law (interaction-design).
unicli
Comprehensive guide to Uni-CLI — the open Agent-Computer Interface runtime for real software. Trigger when the user needs to fetch data from websites (Twitter, Bilibili, HackerNews, GitHub, Reddit, Bloomberg, Zhihu, WeChat, and hundreds more); interact with news, finance, social, academic, shopping, or video…
unicli-smart-search
Route search queries to the best platform via unicli. Use when searching across websites, social media, tech forums, news, finance, shopping, or academic sources.
unicli-browser
Control broker-owned hidden, existing-Chrome, or remote browser targets with explicit Agent identity, visibility, profile partitions, and lifecycle.