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 | $0.00092 | $0.02429 |
| Sonnet 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 12d 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.
- 12d 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 (1,600 stars, last pushed 6d ago), licensed MIT. It adds 184 tokens to every session and 4,859 once invoked, about $0.0009 per session on Opus 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.
excalidraw
Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .excalidraw files and exports to PNG/SVG via Kroki API or locally using…
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…
ui-path-radar
UI path tracer for SwiftUI/UIKit apps. 5-layer audit with 34 issue categories and 19 automated checks: discover entry points, trace flows, detect dead ends and broken promises, evaluate UX impact, verify data wiring. Supports targeted trace, diff against previous audits, and handoff to planning skills. Triggers…
flutter-ui
Build Flutter UI from Figma MCP or image input. Scans src for design tokens (colors, sizes, text styles), existing components, and naming conventions before writing a single line of code. Never hard-codes values.
html-slides
A workflow for creating a presentation as one self-contained HTML file sized for a 1920×1080 screen. It supports several visual styles and can export to PPTX when requested.