Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Appllama App Design Skill

An opinionated playbook that makes Claude build benchmark-quality, native-feeling Expo/React Native screens and verify them in the simulator.

Design & UIAdvanced★ 126⑂ 5AI score 9/10Last updated: Aug 23, 2026

What it does

  • Sets a hard quality bar for designing and implementing Expo Router / React Native screens that feel genuinely native.
  • Enforces 12 native-fidelity laws: semantic colors in both themes, native controls, SF Symbols, borderCurve: 'continuous', spacing rhythm, safe areas / Dynamic Island, haptics as punctuation.
  • Defines navigation semantics: push vs replace vs dismissTo, modal vs formSheet vs overlay, and the "one-way doors" (sign-in, onboarding done, purchase) where back must not re-enter old state.
  • Gives an ordered motion method — frequency gate → purpose → cheapest tool → properties → spring/curve → thread — with exact values (SETTLE 400/1.0, SNAP 400/0.8, Easing.bezier(0.23, 1, 0.32, 1)).
  • Adds mechanical "anti-slop" checks that kill AI-default styling: one accent hue, one grey family, one radius scale, no emoji in chrome, no unjustified gradients.
  • Requires a simulator loop plus a full-motion pass: screen-record the flow (xcrun simctl io booted recordVideo) and scrub it frame by frame before calling a screen done.

Who it's for

  • Mobile/frontend engineers shipping Expo + React Native + TypeScript apps.
  • Anyone whose AI-generated UI keeps getting filed as "template-looking".
  • Teams standardizing quality for onboarding, paywalls, tab bars, and sheets.
  • Developers who want motion and gestures (Reanimated 4, gesture-handler) done properly.

Examples

  1. "Design the onboarding" → study reference patterns, replace on completion so back can't re-enter, verify light/dark, record and scrub the flow.
  2. "Make this screen feel native" → swap to semantic color tokens, continuous corners, 44pt tap targets, collapse to a single locked accent.
  3. "Add a bottom sheet" → use an Expo Router formSheet route with detents instead of a hand-rolled sheet, then test drag, mid-drag cancel, and velocity hand-off to a spring.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/Appllama/appllama-skills/HEAD/skills/appllama-app-design-skill/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/appllama-app-design-skill folder from the GitHub repo Appllama/appllama-skills into my ~/.claude/skills/appllama-app-design-skill/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Appllama/appllama-skills.git /tmp/appllama-skills && mkdir -p ~/.claude/skills && cp -r /tmp/appllama-skills/skills/appllama-app-design-skill ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/Appllama/appllama-skills.git
  3. Create the skills directory: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r appllama-skills/skills/appllama-app-design-skill ~/.claude/skills/
  5. Confirm the references/ folder came along — the motion, navigation, and performance details live there.
  6. Restart Claude Code and run /skills to confirm it's loaded.
  7. In an Expo project, try a prompt like "polish this screen so it feels native" to trigger it.
  8. Optional: connect the Appllama MCP for real reference screens, and install Xcode so the iOS Simulator loop actually works.
View source on GitHub ↗License: MIT