Build Native-Quality Mobile Screens With appllama-skills

An agent that can scaffold a React Native screen is not the same as one that can make it feel native. The 3k-star Appllama/appllama-skills repository ships two skills that turn Appllama — a design library of top-grossing mobile apps, with their real screens, flows, and UI patterns plus revenue and download context — into a working method: study every screen of the apps that already win, extract the category's design language, then build screens that hold up next to them.

Why This Skill Matters

The two skills are designed as a pair. appllama-usage is the research engine — how to use the Appllama MCP like a design director, with the full tool map and playbooks for building an app from scratch, improving an existing screen, and flow and element research. appllama-app-design-skill is the build bar: native-feeling Expo / React Native screens with Apple HIG fidelity, semantic colors, native controls, anti-slop discipline, navigation that behaves (push vs replace, sheets and overlays, the one-way doors where back must not exist), a strict motion bar (should it animate at all, springs that carry the finger's velocity, nothing on the JS thread), generated image assets, and a full-motion simulator loop in which whole flows are recorded and scrubbed frame by frame, not screenshots. The README's one-line split: usage decides what to study, design decides how to build, and both insist the loop only ends in a simulator with a screen you can't fault.

Installation

One command from your project root; the README says it works with Claude Code, Cursor, Codex, and 70-plus other agents:

npx skills@latest add appllama/appllama-skills

The README's variations: -a claude-code -a cursor -y installs for specific agents with no prompts, and -g installs user-wide instead of per-project. If you only want the build bar, --skill appllama-app-design-skill installs that skill alone (the same flag installs only appllama-usage for the research engine). The manual route is a clone plus a copy of skills/* into .claude/skills/ per project, ~/.claude/skills/ user-wide, or your harness's equivalent.

The research half runs on the Appllama MCP at https://mcp.appllama.io/mcp. Add it as a custom connector in Claude, Cursor, Codex, or any MCP client and approve the connection with your Appllama account. Per the README, MCP access is part of Pro, credits reset in full on the 1st of each month, every call spends one credit, and get_credits is always free.

Real Workflow: A Habit Tracker That Survives the Simulator

With the MCP connected and both skills installed, the README's first example ask is:

Build me a habit tracker. Study the top-grossing habit apps first and don't stop until every screen survives the simulator comparison.

That one prompt exercises the whole pair: appllama-usage pulls the category's winning screens and flows through the MCP, appllama-app-design-skill builds against its bar, and the simulator loop is the stopping condition rather than a screenshot. The README's other example asks map to narrower jobs — "Make this screen better" with a screenshot, code, or a "Copy Screen ID" reference from appllama.io; an onboarding question ("how long, what does each step earn, and where does the paywall sit"); wiring up a checkout flow — deciding which screens push and which present as sheets, and making sure nobody can go back into the paywall after paying; and an animation review that asks what should be deleted, what is on the wrong thread, and what is missing velocity.

Tips

• appllama-app-design-skill stands on its own: the README says the native-quality build bar, anti-slop discipline, and full-motion simulator loop work with or without the Appllama MCP connected. It is sharper with it; appllama-usage runs on it.
• Budget the credits: every MCP call spends one, and get_credits is free, so check before a long session.
• The "Copy Screen ID" reference from appllama.io is a documented input for the improve-a-screen flow, alongside a screenshot or code.
• Skills are plain directories, so the manual install is just a copy into your agent's skills folder — the README spells out the per-project and user-wide Claude paths.
• The license is MIT, but the README notes the Appllama name, llama, and logo are trademarks of Antmind Ventures Private Limited and the license does not grant rights to use them.

When Not to Use This

The research engine is a paid dependency: appllama-usage runs on the Appllama MCP, which the README places under Pro. Without an account, install only the design skill and bring your own references. And the bar is Expo / React Native — the only stack the design skill's row names. If your app is not in that stack, the research half still describes what wins, but the build half is not written for you.

See the leaderboard for more skills.