Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Appllama/appllama-skills --skill appllama-app-design-skillgit clone --depth 1 https://github.com/Appllama/appllama-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/appllama/appllama-skills/appllama-app-design-skill)<a href="https://agentmods.dev/skills/appllama/appllama-skills/appllama-app-design-skill"><img src="https://agentmods.dev/badge/skills/appllama/appllama-skills/appllama-app-design-skill/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/appllama/appllama-skills/appllama-app-design-skill"><img src="https://agentmods.dev/badge/skills/appllama/appllama-skills/appllama-app-design-skill.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00184 | $0.04859 |
| Opus 5.5 | $0.00074 | $0.01944 |
| Sonnet 5.5 | $0.00037 | $0.00972 |
| Haiku 4.5 | $0.00018 | $0.00486 |
Grade A, and why
appllama-app-design-skill scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 344 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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):
- Expo + Expo Router, React Native, TypeScript.
react-native-reanimatedfor motion,react-native-gesture-handlerfor gestures,@shopify/flash-list(or FlashList v2) for any list that can grow.expo-imagefor images (and SF Symbols viasource="sf:name"on iOS),expo-video/expo-audio(never the deprecatedexpo-av).react-native-safe-area-contextfor insets. Never hard-code notch numbers.process.env.EXPO_OSoverPlatform.OSfor compile-time platform checks.
What ships with it
5 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 344 lines · 184 tokens per session scan A be47c957ad09
appllama-app-design-skill is a skill published in the GitHub repository Appllama/appllama-skills (3,433 stars, last pushed 1mo ago), licensed MIT. It adds 184 tokens to every session and 4,859 once invoked, about $0.0007 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
mobile-figma-designer
This skill should be used when the user wants Claude Code to create, improve, audit, or structure mobile app interfaces in Figma using Figma MCP. It is best for iOS or Android MVP screens, onboarding, paywalls, home screens, practice flows, settings, empty states, design systems, and handoff-ready mobile UI.
compose-graphics
Advanced Compose visuals - Material 3 Expressive motion physics, AGSL shaders (Android 13+), Canvas/DrawScope generative, graphicsLayer effects.
swiftui-graphics
Advanced SwiftUI visuals - Metal shaders (.colorEffect, .layerEffect, .distortionEffect), .visualEffect, Liquid Glass (iOS 26), Canvas, holographic and CRT effects.
swiftui-motion
SwiftUI animation foundations - withAnimation, transitions, matchedGeometryEffect, PhaseAnimator, KeyframeAnimator, springs, gestures.
mobile-principles
Mobile-specific UX principles - touch targets, hover-less doctrine, thumb zones, safe areas, gestures, mobile perf budgets. Cross-platform (web mobile, iOS, Android).
ui-enhancer-radar
Systematic iOS/SwiftUI UI audit with design intent interview, 14-domain analysis (including Color Audit with adaptive Color Profile, iPad Sheet Sizing caller-side audit, Button Hit Region three-factor interaction audit, and Silent Picker menu-presentation audit), element compaction, cross-view consistency checks…