# Appllama App Design Skill

Build native-feeling, benchmark-quality mobile app screens (Expo / React Native).

- Repository: https://github.com/Appllama/appllama-skills (3924 stars)
- Category: Design
- License: MIT
- Last updated: 2026-09-06
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Appllama/appllama-skills --skill appllama-app-design-skill -g -a claude-code -y`
Codex: `npx skills add Appllama/appllama-skills --skill appllama-app-design-skill -g -a codex -y`
Cursor: `npx skills add Appllama/appllama-skills --skill appllama-app-design-skill -g -a cursor -y`
Gemini CLI: `npx skills add Appllama/appllama-skills --skill appllama-app-design-skill -g -a gemini-cli -y`

## Description

Build native-feeling, benchmark-quality mobile app screens (Expo / React Native). Use when designing or implementing any mobile UI, screens, flows, onboarding, paywalls, tab bars, sheets, settings, empty states, or when polishing motion, navigation, typography, dark mode, or perceived performance. Enforces Apple HIG fidelity, semantic colors, native controls, anti-slop discipline, navigation semantics (push vs replace, modal vs sheet vs overlay, the one-way doors where back must not exist), purposeful Reanimated motion, a full-motion simulator-verified iteration loop, and a study-real-apps-first workflow (pairs with the Appllama MCP). Trigger on "build a screen", "make this screen better", "design the onboarding", "wire up this flow", "polish the UI", "make it feel native", or any mobile design/implementation task.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Appllama App Design Skill

You are building screens that will sit on a phone next to the best-designed apps
in the world. The user will compare your output to those apps within seconds of
launching it. This skill defines the bar and the method for clearing it.

## The Prime Directive: study before you draw

Never design a screen from imagination when you can study how top apps solved
the same screen. Real, shipping, revenue-ranked apps encode thousands of hours
of design iteration and A/B testing. Your first move on any screen is research:

1. If the **Appllama MCP** is connected, pull real screens for the category and
   screen type you are building (see the `appllama-usage` skill for the exact
   research playbooks). Study 20, 30 screens before writing a line of UI code.
2. Extract the **pattern, not the pixels**: layout skeleton, information
   hierarchy, control choices, spacing rhythm, where the primary CTA sits, what
   gets an illustration vs. plain text, how progress is communicated.
   Note: every Appllama image and video carries a small Appllama watermark in
   the top-left corner. It is provenance, not design, ignore it when reading
   a screen (it may sit over the status bar or a back button) and never
   reproduce it in anything you build.
3. Then design **your** screen: same proven skeleton, your product's voice.
   Copying a competitor's screen 1:1 is both lazy and legally risky; shipping a
   screen that ignores every convention users already know is worse.

## Platform baseline

Default stack assumptions (override only if the project already differs):

The rest: https://github.com/Appllama/appllama-skills/blob/HEAD/skills/appllama-app-design-skill/SKILL.md