appllama-design-skill

# Appllama 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. 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 FlashLis...