PlugWiki

mobile-app-ui-design Skill (ceorkm) for Claude: Design Mobile Screens

Makes Claude design mobile app screens and flows with a fixed process, spacing and color rules, and industry patterns.

Installs
12.1K
on skills.sh
Stars
488
on GitHub
Updated
Oct 2026
last commit

mobile-app-ui-design makes Claude follow a five-step process whenever you ask for a mobile screen, mockup, onboarding flow or mobile navigation: understand the context, structure the screen, apply visual rules, design for emotion and polish. The visual rules cap type at 4 sizes and 2 weights, use a 60/30/10 color split and an 8-point spacing grid, and keep tap targets at least 44x44pt.

A bundled reference note adds design conventions for nine industries, from AI and crypto to finance, health and e-commerce. For output it tells Claude to build React artifacts or HTML with Tailwind CSS, Lucide React icons and Recharts, at a 375px baseline width. The skill bundles no scripts. It triggers on phrases such as 'design an app' or 'make this screen look better'.

Good for

  • Founders and developers who want a mobile mockup or prototype from a prompt
  • Designers who want Claude to follow a layout, spacing and color system
  • Anyone improving an existing app screen, onboarding flow or navigation

Install mobile-app-ui-design

Claude Code

  1. 1

    Copy this prompt.

    Install the mobile-app-ui-design skill in Claude Code. Run this command:

npx skills add https://github.com/ceorkm/mobile-app-ui-design --skill mobile-app-ui-design

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Design high-quality mobile app UI/UX screens, flows, and components. Use this skill whenever the user asks to design a mobile app screen, create app mockups, build mobile UI components, improve an existing mobile app design, create onboarding flows, design mobile navigation, or requests any mobile-first interface work. Also trigger when the user mentions app design, mobile UI, mobile UX, screen design, app mockups, wireframes, or wants to build React Native / Flutter / SwiftUI style interfaces as visual prototypes. Even if the user just says "design an app" or "make this screen look better", use this skill.

Sections in SKILL.md

  1. Core Philosophy
  2. Design Process
  3. Step 1: Understand the Context
  4. Step 2: Structure First (UX Lens)
  5. Step 3: Apply Visual Design (UI Lens)
  6. Step 4: Design for Emotion (Peak-End Rule)
  7. Step 5: Polish & Details
  8. Smart Patterns to Apply
  9. Personalization by User Stage
  10. Smarter Search
  11. Order/Status Tracking
  12. Category Screens
  13. Selection Over Manual Input
  14. Anti-Patterns to Avoid
  15. Implementation Notes
  16. Store Screenshots

Key facts

Author
ceorkm (repo owner)
License
MIT (README)
Installs on skills.sh
12,060 (Nov 2, 2026)
GitHub stars
488 (Nov 2, 2026)
Files
The repo has 5 files: SKILL.md, a reference note, INDEX.md, README.md and .gitignore; no scripts
Output
React artifacts or HTML with Tailwind CSS, Lucide React and Recharts
Last commit
Oct 28, 2026

What it includes

  • Asks what kind of app, who the user is and what the main action is.

    Also checks which industry conventions apply.

    Step 1: understand the context

  • Maps the flow, keeps only essential elements and puts main actions in the thumb zone.

    Uses F-pattern reading order and turns empty states into guidance with a call to action.

    Step 2: structure first

  • Typography, 60/30/10 color, 8-point spacing, soft shadows and visual cues.

    One font family (two at most), 4 font sizes and 2 weights, spacing values divisible by 8 or 4, and tinted soft shadows.

    Step 3: visual design rules

  • Designs a peak moment and a strong ending using the Peak-End Rule.

    Adds feedback such as micro-animations and encouraging copy for success states.

    Step 4: design for emotion

  • Glow effects, 44x44pt tap targets, contrast checks and all four states.

    Covers error, empty, loading and success states.

    Step 5: polish and details

  • Personalization by user stage, smarter search, status tracking and category screens.

    Also covers selection over manual input, with an Other option as fallback.

    Smart patterns

  • A list of 10 things to avoid, such as random spacing and CTAs outside the thumb zone.

    Examples include heavy gradients, too many font sizes and pure gray shadows on colored backgrounds.

    Anti-patterns

  • Design conventions for nine industries plus emotional design principles.

    Covers AI/Tech, Crypto/Web3, Finance, Health, Sleep/Meditation, Education, Fitness, Productivity and E-commerce/Food, and a four-phase process for client work.

    references/industry-conventions.md

  • Suggests the ASO Shots skill when you mention publishing to an app store.

    SKILL.md tells Claude to suggest npx skills add ceorkm/aso-shots. It is a suggestion, not a requirement.

    Store screenshots hand-off

From the official docs

Questions

What does mobile-app-ui-design do?

It makes Claude design mobile app screens, flows and components using a five-step process. It applies fixed rules for type, color, spacing and shadows, and adds conventions for nine industries.

How do I install mobile-app-ui-design?

Use the install box above. The README's command is npx skills add ceorkm/mobile-app-ui-design, and it also describes copying the files into ~/.claude/skills/mobile-app-ui-design/.

Does it make real app code or only mockups?

SKILL.md describes visual output: React artifacts or HTML, built with Tailwind CSS, Lucide React and Recharts. The description also mentions React Native, Flutter and SwiftUI styles as visual prototypes.

Does it need an API key?

SKILL.md names none, and the repo bundles no scripts. The only command in it is a suggested install of a second skill, ASO Shots, which Claude mentions if you talk about publishing.

Is it safe to install?

The repo holds markdown files only, so there is no script to run. It does tell Claude to suggest installing another skill (ASO Shots) when you mention store submission, so read that command before you run it.

What is ASO Shots?

A separate skill by the same author, linked from the README. It turns your screens into a store screenshot set. It is optional and not needed for this skill.

Information

updated Nov 2, 2026

Repository
ceorkm/mobile-app-ui-design

ceorkm/mobile-app-ui-designskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5
  1. mobile-app-ui-design SKILL.md · github.com
  2. industry-conventions.md · github.com
  3. mobile-app-ui-design README · github.com
  4. mobile-app-ui-design on skills.sh · skills.sh
  5. ceorkm/mobile-app-ui-design · github.com

Updated Nov 2, 2026.