Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

mobile-app-ui-design — Claude Code skill: how to install and use

Provides mobile UX and UI guidelines for coding agents. Helps generate mobile screens, components, and design flows that follow structured layout rules.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -a claude-code
Open on GitHub

What mobile-app-ui-design does

This skill guides AI assistants through structured mobile screen generation. It enforces a 60/30/10 color distribution where a neutral base occupies sixty percent, secondary elements take thirty percent, and the accent color stays at ten percent for call-to-action elements. Typography gets constrained as well: a maximum of four font sizes and two weights per screen, with monospace variants dedicated to numbers and stats.

Layouts adhere to an 8-point grid system with all spacing values divisible by 4 or 8. The workflow places primary interactions in the bottom thumb zone and requires tap targets of at least 44×44pt. Shadows are tinted to match the background color instead of relying on harsh black shades. It also guides the model through four specific UI states: empty, loading, error, and success.

Because the instructions strictly enforce spacing multiples of 4 and 8, projects with custom arbitrary paddings will require manual adjustments.

What it helps with

  • structure mobile screen flows around the thumb reach zone
  • apply a 60/30/10 color system with background-tinted shadows
  • generate visual UI prototypes for Flutter, React Native, or SwiftUI
  • design empty states, error notices, and loading layouts

Example prompts for the agent

  • Design an onboarding flow for a personal budgeting app using SwiftUI styles.
  • Reorganize this checkout screen: move primary actions to the bottom thumb zone and apply 8pt spacing.
  • Create a fitness dashboard layout with monospace metrics and a 60/30/10 palette.

How to install mobile-app-ui-design

1Skills CLI (Vercel)

npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -a claude-code

2Manually: put the files in place

~/.claude/skills/mobile-app-ui-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/mobile-app-ui-design/

Similar

vue-expert https://github.com/Jeffallan Guides Vue 3 work with the Composition API, Nuxt 3, Pinia, and Vite. Use it for components, PWAs, and Quasar or Capacitor apps. Claude Code CX Codex Cursor +1 4,500installs ads-apple AgriciDaniel Audits Apple Ads campaigns, AdServices and AdAttributionKit tracking, keyword structure, and bids. Useful for reviewing App Store acquisition and MMP reconciliation. Claude Code CX Codex Cursor +1 3,700installs telegram-mini-app sickn33 Skill for developing Telegram Mini Apps—web applications that run inside Telegram with a native-like experience. Covers Telegram Web App API, TON ecosystem, user authentication, and monetization through Telegram Stars. Claude Code CX Codex Cursor +1 1,700installs e2e tester-army Writes, runs, and debugs web and mobile end-to-end tests with the e2e test runner, combining agent goals with exact Playwright assertions and device checks. Claude Code CX Codex Cursor +1 1,200installs edge-to-edge Google LLC Migrates Jetpack Compose apps to adaptive edge-to-edge layouts and fixes content blocked by system bars or the keyboard. Claude Code CX Codex Cursor +1 3,200installs navigation-3 Google LLC A reference skill for Jetpack Navigation 3: the move from Navigation 2 plus ready recipes for deep links, multiple back stacks, scenes, Hilt and ViewModel. Claude Code CX Codex Cursor +1 3,200installs vercel-react-native-skills vercel A rules pack for React Native and Expo work: lists, animations, navigation, native modules. Load it so your agent makes mobile changes the same way every time. Claude Code CX Codex Cursor +1 253,900installs animate-expo emilkowalski Builds React Native and Expo animations using Reanimated and Gesture Handler. Helps keep motion on the UI thread and avoid dropped frames on physical devices. Claude Code CX Codex Cursor +1 135,900installs

Questions about mobile-app-ui-design

How do I install mobile-app-ui-design in Claude Code?

Run npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -a claude-code in your terminal.

What does the mobile-app-ui-design skill do?

It instructs the coding agent to apply mobile UI conventions, such as 8-point grid spacing, thumb-zone placement, and strict typography limits when generating mobile views.

What constraints does this skill enforce on screen layouts?

It restricts screens to four font sizes, requires touch targets of at least 44×44pt, and mandates spacing values divisible by 4 or 8.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor