Appllama App Design Skill
Build native-feeling, benchmark-quality mobile app screens (Expo / React Native).
Install
npx skills add Appllama/appllama-skills --skill appllama-app-design-skill -g -a claude-code -y- Repository
- Appllama/appllama-skills3.9k
- Category
- Design
- Updated
- 2mo ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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.
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:
- If the Appllama MCP is connected, pull real screens for the category and
screen type you are building (see the
appllama-usageskill for the exact research playbooks). Study 20, 30 screens before writing a line of UI code. - 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.
- 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):
