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 agentmods add skills/tmj-90/gaffer/mobile-uinpx skills add tmj-90/gaffer --skill mobile-uigit clone --depth 1 https://github.com/tmj-90/gafferWrote 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/tmj-90/gaffer/mobile-ui)<a href="https://agentmods.dev/skills/tmj-90/gaffer/mobile-ui"><img src="https://agentmods.dev/badge/skills/tmj-90/gaffer/mobile-ui.svg" alt="Measured on agentmods" 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 | $0.00111 | $0.01482 |
| Opus 5 | $0.00056 | $0.00741 |
| Sonnet 5 | $0.00022 | $0.00296 |
| Haiku 4.5 | $0.00011 | $0.00148 |
Grade A, and why
mobile-ui 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 4d 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 — 96 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Build store-credible native-feel mobile UI
Change the skin, never the skeleton. Build mobile UI that clears a native-feel bar and a store-readiness bar — without touching gameplay, navigation routes, state, scoring, or business logic. Where a redesign implies a structural change ("this should be a sheet, not a modal"), flag it as a proposal; do not silently implement it.
The three non-negotiable bars
A "premium" mobile surface must clear all three at once — failing any one ships as not-premium regardless of the others.
- Native feel. Every hybrid/RN screen reads as a mobile website until deliberately de-websified. Tells to close: centred modals (→ bottom sheets), fade transitions (→ slide/shared-element), missing swipe-back and hardware-back handling, no haptics on primary taps, fonts flashing, wrong scroll bounce, ignored safe-area insets, default launch screen.
- Maturity (indie → store-credible). Tidying a plateau makes the plateau more visible. Recommit: real type scale, brand chrome (not generic), activated margins, ambient life, and one named hero detail per screen — the deliberate moment the user remembers.
- Store readiness. Most "wouldn't get approved" intuition is a finite checklist: tap targets ≥ 44pt, privacy/permission strings present, real launch screen, Dynamic Type / large-text support, working hardware back (Android), opposite colour scheme, no placeholder content.
Steps
- Read the lore + brand/tokens first.
search_lore(Memory MCP) and anyBRAND.md/DESIGN.md/tokensfile. If a brand/design system exists, extend it in its idiom (Brand-Respecting Mode) — audit + close gaps; do not re-pitch the aesthetic. Confirm the stack (RN/Expo or React + Capacitor) and match its component conventions. - Audit the screen against the three bars: score native-feel per item, diagnose maturity, pre-screen store-rejection triggers. Note gameplay/logic surfaces to leave alone.
- Respect safe areas. Use the safe-area insets (
react-native-safe-area-context/ the env-inset equivalent) for top/bottom/notch; never hardcode status-bar heights. - Gestures + navigation feel native. Swipe-back, hardware back (Android), bottom sheets over centred modals, slide/shared-element transitions over fades. Keep the navigation routes and actions exactly as they are.
- Haptics + sound hooks on primary interactions (selection, confirm, error) via the platform haptics API — subtle, consistent, behind a tokenised hook.
- Tokens drive presentation — colour, type scale, spacing, motion, radius. No raw hex or magic numbers in components; scrolls hide scrollbars, use momentum, and disable global pull-to-refresh except where intended.
- Performance: keep the main interaction loop at 60fps; animate on the native driver
(
useNativeDriver: true/ Reanimated worklets); virtualise long lists (FlatList/FlashList); avoid layout thrash and oversized images. - Verify + evidence. Run the repo's tests + lint; a migration ends green — a
failing gameplay test means logic changed (roll back, never edit the test to pass). Add
tests for new visual contracts (component states, screen smoke tests). Record
test_outputviarecord-evidenceand submit for review.
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.
- 4d ago First seen · 96 lines · 111 tokens per session scan A 9bba515b97e0
mobile-ui is a skill published in the GitHub repository tmj-90/gaffer (2 stars, last pushed 4d ago), licensed Apache-2.0. It adds 111 tokens to every session and 1,482 once invoked, about $0.0006 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
apple-hig-designer
Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design…
app-ui-design
Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines. Covers Material Design 3, Human Interface Guidelines, color theory, typography, and 2025 trends.
mobile-developer
Expert knowledge in mobile app development for iOS, Android, and cross-platform solutions.
syncfusion-maui-toolkit-effects-view
Implements Syncfusion .NET MAUI Effects View (SfEffectsView) for modern touch interactions and visual feedback. Use when implementing ripple effects, touch feedback animations, selection indicators, scaling animations, or highlight overlays for buttons, cards, lists, or images. Covers touch effects, ripple animations…
syncfusion-maui-toolkit-segmented-control
Implements Syncfusion .NET MAUI Segmented Control (SfSegmentedControl). Use when working with segmented controls, segment buttons, tab-like selection, button groups, or filter buttons in MAUI applications. This skill covers installation, item population, selection indicators, appearance customization, layout…
syncfusion-maui-toolkit-button
Implements and customize Syncfusion .NET MAUI Button (SfButton) control. Use when working with MAUI buttons, SfButton implementation, button customization, or visual states. Covers button icons, background images, RTL support, custom button views, button styling, events, and checkable buttons.