01
It starts by itself
screen added or changed. Runs in Claude Code routine.
- ↻ screen added or changed
pull_request paths: app/**
appllama · 5K installsAppllama App Design Skill skill
Runs by itself, when a screen is added or changed.
Each new screen is checked until it feels native.
Install the Appllama App Design Skill skill and make it a habit: follow https://gethabit.dev/skills/appllama/appllama-app-design-skill.md
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 3It runs by itself
5K installs3K starsMIT licenceSource on GitHub ↗
Appllama App Design Skill
by appllama · 5K installs
The skill
Builds phone screens that feel like real iPhone apps.
Only when you ask.
Better design
Each new screen is checked until it feels native. Your app looks more polished.
↻ Runs by itselfwhen a screen is added or changed
How the habit works.
You don't have to.
When does it start? How does it check its work? What does it remember?
One run, step by step.
Then it stops.
Stops after one screen or flow per run, with at most 2 fix rounds.
- 01
Study references
Pull real screens for the screen type with the Appllama MCP if connected and name the pattern.
- 02
Answer navigation
Decide push, replace, modal, sheet or overlay and what back does on iOS and Android.
- 03
Build natively
Implement with semantic colors, native controls, SF Symbols and the stated spacing and radius rules.
- 04
Run slop pre-flight
Count accent hues, radii, emoji in chrome, unexplained gradients and duplicate labels.
- 05
Simulator pass
Screenshot light, dark, safe areas and Dynamic Type XL in the simulator.
- 06
Full-motion pass
Record the whole flow and scrub it frame by frame for drops, flashes and jumps.
- 07
Fix and repeat
Fix each defect, relaunch and re-verify until none is found.
What it may do.
Nothing more.
It writes only in its own folder and asks you before anything goes out.
- Writes only inapp/**, components/**, assets/**, loops/native-screen-polish-loop/**
- Talks tono outside service
- Sendsnothing
- Your OKNothing goes out, so it needs no OK.
Is it for you?
Use it when it fits.
Read both lists. If the left one sounds like you, the Appllama App Design Skill skill helps.
Use it when
- ✓ You build a new mobile screen
- ✓ You polish onboarding or paywalls
- ✓ Your app feels like a web wrapper
Skip it when
- – You build a web-only app
- – You do not use Expo or React Native
Appllama App Design Skill skill, answered.
Can a screen be done from code review alone?
No. The skill requires seeing it run in the simulator, including a full-motion recording.
Should I copy a competitor's screen exactly?
No. Take the pattern, not the pixels.
Which stack does it assume?
Expo with Expo Router, React Native and TypeScript, unless the project already differs.
How do I install the Appllama App Design Skill skill?
Copy the prompt at the top into your agent. It installs the skill from appllama/appllama-skills and sets up the habit. Or run npx skills add appllama/appllama-skills --skill appllama-app-design-skill.
Is the Appllama App Design Skill skill free?
Yes. It is published under MIT. Habit is free too.
Appllama App Design Skill. Now as a habit.
Install the Appllama App Design Skill skill and make it a habit: follow https://gethabit.dev/skills/appllama/appllama-app-design-skill.md
All appllama skills →More design skills →
Works in
- Claude Code
- Codex
- Cursor
- ChatGPT
- Claude app
Made by appllama, published under MIT. Habit links to the original and never changes it. Is this your skill?