Mobile UI/UX

Reviewed 2026-10-14mediaPrompt / Rule# mobile # ios # android # react-native # flutter

Mobile-first design rules for iOS and Android apps (React Native, Flutter, native) from vudovn's AG Kit: touch targets, platform conventions, performance, plus a read-only audit script.

Security Reviewed

Mostly Markdown guidance plus a read-only standard-library Python audit script with no network, subprocess or file writes.

Install Mobile UI/UX in Google Antigravity

Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide

EasiestOption 1: paste this to your Antigravity agent

Install the "Mobile UI/UX" skill for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/mobile-design.md (source: https://github.com/vudovn/antigravity-kit/tree/main/.agents/skills/mobile-design).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself

1. Download the repository
```
git clone --depth 1 https://github.com/vudovn/antigravity-kit /tmp/ag-kit && git -C /tmp/ag-kit log -1 --format=%h -- .agents/skills/mobile-design
```
The last change to the skill folder at our review was 3d7f9e0 (2026-07-18); a different hash means the skill changed after our review.
2. Copy the skill into this project (workspace skill)
```
mkdir -p .agents/skills && cp -r /tmp/ag-kit/.agents/skills/mobile-design .agents/skills/
```
Run from your project root. Antigravity then reads .agents/skills/mobile-design/SKILL.md. The folder is 14 files, about 215 KB.
3. Or install it for all projects (global skill)
```
mkdir -p ~/.gemini/config/skills && cp -r /tmp/ag-kit/.agents/skills/mobile-design ~/.gemini/config/skills/
```
Use this instead of the previous step. For the Antigravity CLI the global folder is ~/.gemini/antigravity-cli/skills/.
4. Check that Antigravity sees it
Antigravity 2.0 app: start a new conversation and ask "What skills do you have?" (the app has no /skills command). Antigravity CLI: run /skills; in a session that was already open, run /skills reload first. The skill is listed as mobile-design.

AG Kit's README is written for Antigravity and documents `npx @vudovn/ag-kit init`, which installs the whole kit (47 skills, 20 agents, 13 workflows, 6 rules and a hook) into .agents/. For just this skill, copy the folder as above. Python 3 is only needed if you want the audit script. No API keys.

Using Claude Code, Cursor or Codex? See other assistants below.

What is Mobile UI/UX?

For anyone building a mobile app with an agent who keeps getting desktop thinking in a small window. mobile-design is a skill from AG Kit (vudovn/antigravity-kit, MIT, an Antigravity-first toolkit): a SKILL.md that makes the agent ask for platform, framework, navigation, state and offline needs, avoid a banned list of AI mobile defaults, read matching reference files, and fill in a checkpoint before it writes code. What we counted at commit 549ba3d (2026-08-31; the folder was last changed in 3d7f9e0 on 2026-07-18): 14 files and 220,810 bytes. SKILL.md is 396 lines / 1,948 words / 15,627 bytes; 12 reference files (touch psychology, performance, navigation, typography, colour, iOS, Android, backend, testing, debugging, decision trees, design thinking) add about 19,000 words; and scripts/mobile_audit.py (670 lines) is an optional audit script. The frontmatter says it is for React Native, Flutter or native apps and "NOT for web apps".

How to use Mobile UI/UX?

Copy the folder into Antigravity's skills folder and ask for mobile app work in normal words. Per SKILL.md, if your request is open-ended the agent must first ask whether the target is iOS, Android or both, which framework, which navigation pattern, what state management, offline needs and phone or tablet; it then reads the reference files for your platform and fills a CHECKPOINT block (platform, framework, files read, three principles, anti-patterns to avoid) before coding. For an existing project it can run `python scripts/mobile_audit.py <project_path>` and report the result.

Key features of Mobile UI/UX

✓Ask-before-assuming table: platform, framework, navigation, state, offline and target devices
✓Banned-list tables in four groups (performance, touch/UX, security, architecture), for example ScrollView for long lists, touch targets under 44pt/48dp, tokens in AsyncStorage
✓Platform quick reference: unify business logic and data, diverge on navigation, gestures, icons, pickers, sheets and type (SF Pro vs Roboto)
✓Fitts' law and thumb-zone guidance, and React Native and Flutter performance snippets (FlatList with memo and keyExtractor, const widgets, transform/opacity animations)
✓A mandatory CHECKPOINT block and a pre-development, per-screen and pre-release checklist
✓scripts/mobile_audit.py: scans .tsx, .ts, .jsx, .js and .dart files and prints issues, warnings and a PASS/FAIL status (--json for JSON)

When to use Mobile UI/UX

1Design the screens and navigation of a React Native or Flutter app with platform conventions in mind
2Review a list screen for the common React Native performance mistakes
3Audit an existing mobile project for touch-target, performance and navigation problems with the script
4Choose a framework, state and storage approach with the decision trees

Installation & Setup Guide

Agent Rules / Prompt Setup

Follow these steps (taken from the project's own docs) to configure Mobile UI/UX in your development environment.

Step 1: Claude Code and Cursorclaude

Not documented by the project. AG Kit's README says other tools may read its Markdown components but behaviour outside Antigravity is not guaranteed.

Usage Example & Verification

Prompt / Request Example

1) Our example (the AG Kit README gives no sample prompt for this skill): "Design the onboarding and home screens for a habit tracker in React Native. Use the mobile-design skill."
-> What should happen: SKILL.md makes the agent confirm platform, navigation, state and offline needs if you did not, read the reference files, and fill the CHECKPOINT block before writing code.

2) Our example: "Run the mobile design audit on ./app."
-> What should happen: the agent runs python scripts/mobile_audit.py ./app, which reads .tsx/.ts/.jsx/.js/.dart files (skipping node_modules, ios, android and build folders) and prints up to 10 issues and 15 warnings with a PASS or FAIL status.

3) Our example: "This screen renders 500 rows in a ScrollView. Fix it using the mobile-design rules."
-> What should happen: the banned list applies: replace it with FlatList and a memoized renderItem, a stable keyExtractor, and getItemLayout for fixed-height rows.

Security Review

Static review

Reviewed Date

2026-10-14

Audited Ref / Commit

549ba3dc2eb1d40fccb5b6d792eba4101c80cd69

Reviewer

antigravityskills.org (static code review)

Mostly Markdown guidance plus a read-only standard-library Python audit script with no network, subprocess or file writes.

Full review: scope, findings, risks

Audit Scope:vudovn/antigravity-kit at HEAD 549ba3d (2026-08-31): .agents/skills/mobile-design/SKILL.md in full, all 12 reference files (headings and URL scan, line and word counts), scripts/mobile_audit.py (header, imports, file handling, main) and a pattern scan for network, subprocess, eval and write calls, README.md (install, requirements, component counts), LICENSE. Compared SKILL.md, the audit script and three reference files against sickn33/antigravity-awesome-skills at bdacd76. The rest of AG Kit (agents, hooks, workflows, CLI, web app) was not reviewed. Nothing was run.

Key Findings:Skill with one read-only script. SKILL.md (allowed-tools: Read, Glob, Grep, Bash) tells the agent to read reference files, ask questions, fill a checkpoint and optionally run `python scripts/mobile_audit.py <project_path>`. mobile_audit.py (670 lines) imports only sys, os, re, json and pathlib; it opens project files read-only ('r' mode), walks the directory skipping node_modules, .git, dist, build, .next, ios, android and .idea, matches regular expressions in .tsx, .ts, .jsx, .js and .dart files, and prints a report; its only exit codes are 0 (no issues) and 1. It has no network, subprocess, eval or exec calls and writes no files. The reference files contain no commands to run and only example URLs.

Identified Operational Risks & Permissions:Low. The script reads your source files and prints text; the SKILL.md instruction to read many reference files is heavy on context. The kit's own installer (`npx @vudovn/ag-kit init`) and hooks were not reviewed.

Static review at commit 549ba3d (AG Kit release 2026.8.31) of .agents/skills/mobile-design; nothing was executed. The folder has 14 files: SKILL.md (396 lines; frontmatter name, description, when_to_use, allowed-tools Read, Glob, Grep, Bash, version 1.0.0), 12 Markdown reference files (about 19,000 words) and scripts/mobile_audit.py. The script is a code scanner: it imports sys, os, re, json and pathlib, collects .tsx/.ts/.jsx/.js/.dart files with os.walk, reads them with open(..., 'r') and reports findings (we counted 7 error-level and 50 warning-level report statements; its docstring claims 50+ checks). We found no urllib, requests, socket, subprocess, os.system, eval, exec or file-write calls. Exit code 1 when issues were found. The reference files contain two placeholder URLs (apps.apple.com and myapp.com examples), no commands to execute, no API keys. AG Kit as a whole also ships a hook and an installer that we did not review; copying only this folder avoids them. License: MIT (Copyright 2026 VUDOVN).

Operational Notes & Known Limitations

Known Limitations

•Mobile apps only: SKILL.md says "NOT for web apps"; for web UI use frontend-design, Impeccable or UI/UX Pro Max
•Heavy on reading: SKILL.md marks 6 reference files as critical and tells the agent not to start before reading the relevant ones, which uses a lot of context (the 12 reference files total about 19,000 words)
•Opinionated, React Native and Flutter centred code examples; native SwiftUI and Compose get platform notes, not full guides
•The audit is a pattern scan, not a build: it checks code text with regular expressions and does not run the app or test on a device; it only reads .tsx, .ts, .jsx, .js and .dart
•mobile_audit.py needs Python 3 (standard library only); SKILL.md says to run it, not read it
•AG Kit states Antigravity is its supported production runtime and that behaviour in other tools is not guaranteed; it does not document Claude Code or Cursor for this skill
•The sickn33/antigravity-awesome-skills copy is a modified version: its SKILL.md (9,548 bytes at bdacd76) is different from this one (15,627 bytes) and so is its audit script; the three reference files we compared byte for byte (platform-ios, touch-psychology, decision-trees) are identical. sickn33's README credits vudovn/antigravity-kit

Frequently Asked Questions

What is the mobile-design skill?

A skill from vudovn's AG Kit with mobile-first rules for iOS and Android apps: ask-before-assuming questions, a banned list of AI mobile defaults, platform conventions, performance guidance and an optional read-only audit script.

How do I install mobile-design in Antigravity?

Clone github.com/vudovn/antigravity-kit and copy .agents/skills/mobile-design into .agents/skills/ in your project, or into ~/.gemini/config/skills/ for all projects. Then ask "What skills do you have?" (CLI: /skills).

Is the mobile-design skill safe?

In our static review of commit 549ba3d it is Markdown plus one Python script that only reads project files (standard library, no network, no subprocess, no writes). Review it before running it on a private codebase.

Is it for web apps?

No. Its frontmatter says it is not for web apps; use frontend-design, Impeccable or UI/UX Pro Max for web UI.

Where does this page's source come from?

vudovn/antigravity-kit, which sickn33's README credits as the origin of its copy; the sickn33 version has a different SKILL.md and audit script, so we reviewed the original.

Supported Platforms

antigravity

View Source on GitHub

Keep exploring this topic

Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.

More media skills #mobile #ios #android #react-native Use cases

Related Skills

🎨

UI/UX Pro Max

@nextlevelbuilder

Comprehensive UI/UX design intelligence skill for AI coding assistants. Injects structured design tokens, color theory, typography scales, accessibility guidelines, and component patterns into Claude Code, Cursor, and Windsurf.

Tested in AntigravityStatic reviewinstalls packagesnetwork accesswrites files

mediaui

💻

Frontend Design (Anthropic)

@anthropics

Anthropic's official frontend-design skill: guidance for distinctive, intentional UI design, typography and copy that avoids templated AI defaults.

Tested in AntigravityStatic reviewinstructions onlyoffline

frontenddesign

💻

Impeccable

@pbakaus

Paul Bakaus's Impeccable design skill: one /impeccable skill with 24 design commands, live browser iteration and a 59-rule detector for AI-generated frontend patterns.

Tested in AntigravityStatic reviewruns scriptsnetwork accesswrites files

frontenddesign