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 makifbaysal/tasktrooper --skill mobile-ui-uxgit clone --depth 1 https://github.com/makifbaysal/tasktrooperWrote 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/makifbaysal/tasktrooper/mobile-ui-ux)<a href="https://agentmods.dev/skills/makifbaysal/tasktrooper/mobile-ui-ux"><img src="https://agentmods.dev/badge/skills/makifbaysal/tasktrooper/mobile-ui-ux/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/makifbaysal/tasktrooper/mobile-ui-ux"><img src="https://agentmods.dev/badge/skills/makifbaysal/tasktrooper/mobile-ui-ux.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.00064 | $0.01720 |
| Opus 5.5 | $0.00026 | $0.00688 |
| Sonnet 5.5 | $0.00013 | $0.00344 |
| Haiku 4.5 | $0.00006 | $0.00172 |
Grade A, and why
mobile-ui-ux 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 8d 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 — 148 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Mobile UI/UX
Overview
A screen that compiles and passes its widget test has not been designed. The two most common mobile failures are a web-style layout wearing a mobile skin (centred everything, modal-on-modal, a custom tab bar that doesn't match the platform) and a happy-path-only build with no loading/empty/error state.
Core principle: follow the platform's own conventions first, build from theme tokens and the atomic component library, and design every state — not just the one the task's screenshot shows.
Platform conventions
| Concern | iOS | Android |
|---|---|---|
| Touch target | 44×44pt | 48×48dp |
| Top-level navigation | tab bar, 3–5 items | nav bar, 3–5 items → nav rail ≥600dp |
| Back | edge swipe, never overridden | system/predictive back; BackHandler/PopScope, never onBackPressed |
| Text | Dynamic Type text styles | Material type roles, in sp |
| Alerts | critical only | critical only |
| Non-critical feedback | — | snackbar |
Destructive actions carry a destructive role plus a confirmation or an undo window — never a silent delete either platform.
Hierarchy
- One primary action per screen, placed in the thumb zone (bottom half on a phone held one-handed).
- Emphasise with size → weight → colour, in that order; de-emphasise secondary content rather than shouting the primary one louder.
Spacing
- A 4/8 token scale (
xs 4, sm 8, md 16, lg 24, xl 32or the repo's own theme extension) — never a magic numeric literal in a widget/view. - Tighter spacing inside a group than between groups.
Typography
- Theme text styles only (
Theme.textTheme, Material type roles,Fontsemantic styles) — never a fixed/hardcoded size. - Body text ≥16px (Flutter/Android) / ≥17pt (iOS); nothing below 11pt/12sp anywhere in the UI.
- Never a fixed height on a container that holds text — a fixed height clips text at larger font scales.
Colour
- Roles, not hex:
ColorScheme/Theme.of(context).colorScheme, Material colour roles, asset-catalog semantic colours — neverColor(0x…)/Colors.*outside the theme files. - Contrast ≥4.5:1 body, ≥3:1 large text; status is never colour-only (pair with an icon or text).
- Dark mode comes from the theme, never a per-widget override. Material 3 dark surfaces are never pure black — use the theme's elevated-surface colour.
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.
- 8d ago First seen · 148 lines · 64 tokens per session scan A eb711384918c
mobile-ui-ux is a skill published in the GitHub repository makifbaysal/tasktrooper (113 stars, last pushed yesterday), licensed Apache-2.0. It adds 64 tokens to every session and 1,720 once invoked, about $0.0003 per session on Opus 5.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-10-05.
Other skills, from other repositories
wireframe
Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages. Use when asked to wireframe, sketch a screen, draft a layout, make a low-fi mockup, or publish wireframes.
gamified-app
A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level ribbon, bottom tab bar. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style…
design-critique
Give a structured product design critique — user job clarity, hierarchy, affordance, error states, accessibility, and consistency — focused on what to change, in what order, and why.
wireframe-mobile-flow
A lo-fi multi-screen MOBILE flow wireframe — three or four phone frames laid out in a row on a board, showing a connected user flow (Onboarding → Home feed → Item detail → Confirm). Grey-box content inside each device, dashed connector arrows + numbered step labels between screens, and a couple of annotation callouts.…
mobile-app
A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page. Built by copying the seed assets/template.html and pasting one screen archetype from references/layouts.md. Use when the brief asks for "mobile app", "iOS app", "Android app", "phone screen", or "app UI".
mobile-onboarding
A three-screen mobile onboarding layout: an opening screen, a value explanation, and a sign-in or continue screen. It includes phone-style status details, progress dots, and a main button.