Agent skill · Appllama
appllama-app-design-skill
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.
What it needs
About 12k tokens when loaded.
What this skill does
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): Expo + Expo Router, React Native, TypeScript. react-native-reanimated for motion, react-native-gesture-handler for gestures, @shopify/flash-list (or FlashList v2) for any list that can grow. expo-image for images (and SF Symbols via source="sf:name" on iOS), expo-video / expo-audio (never the deprecated expo-av). react-native-safe-area-context for insets. Never hard-code notch numbers. process.env.EXPOOS over Platform.OS for compile-time platform checks. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills Appllama/appllama-app-design-skill