expo-design-system agent skill by expo
Builds and maintains a design system in an Expo app, covering design tokens, components with variant, size, and state props, and shared component extraction.
At a glance
| Publisher | Expo Official |
|---|---|
| Repository | expo/skills (25 listed skills) |
| Category | Frontend and Design |
| License | MIT |
| Last commit | October 17, 2026 (repository) |
| SKILL.md | 369 lines, 2,622 words |
| Bundled files | 4 files, including references |
| Quality score | 79/100 · C Passes all seven graded checks |
| Security scan | Not scanned |
| README badge | Get the listing badge and raise the score |
Before you install
Read from the skill's files at the directory's October 19, 2026 snapshot: what ships with it, what its code reads, and the terms it is published under.
- Bundled scripts: none.
- Commands in SKILL.md: its code blocks run
npx, which fetches or runs software from outside the skill folder. - License: MIT, an open-source or open-content license.
Install expo-design-system
The skills CLI works with Claude Code, Codex, Cursor and other agents; the other routes copy the folder by hand.
npx skills add https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-design-systemtmp="$(mktemp -d)"
git clone --depth 1 https://github.com/expo/skills.git "$tmp/repo"
mkdir -p .claude/skills
cp -R "$tmp/repo/"plugins/expo/skills/expo-design-system .claude/skills/
rm -rf "$tmp"python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
--repo expo/skills \
--path plugins/expo/skills/expo-design-systemexpo/skills is third-party code. Read SKILL.md and any bundled scripts before you install it.
How the author describes it
Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when creating or organizing theme files and design tokens (theme.ts / theme/), extending an existing theme or styling library (NativeWind, Tamagui, Restyle, Unistyles) in its own idiom, standardizing styles so screens (including AI-generated ones) look consistent and polished, fixing an app that looks AI-generated or generic instead of native (the named native-slop tells), building an in-app component library, or auditing an app for design-system drift (hardcoded colors, spacing, fonts). For platform styling specifics (semantic colors, HIG rules, native controls) use expo-native-ui; for folder layout of a new app use expo-project-structure.
From the description field of SKILL.md. Agents read this line to decide when to load the skill.
Sections in SKILL.md
- References
- Adopt Before You Build
- The Theme
- Colors
- Spacing
- Typography
- Radius
- Shadows
- Motion
- Reusable Components
- The component contract
- Composition over configuration
- When to extract - and when not to
- Where Decisions Live
- Self-Critique Pass
- Named Failures: Native Slop
Files in the skill folder
SKILL.mdagents/openai.yamlreferences/audit.mdreferences/native-slop.md
Suede Skill Check: 79/100 · C
Report snapshot · · graded-v2
The rubric totals 100 points; published scores are capped at 99. Security scan: not scanned.
Source revision: 7ddc1f579699. Report version 26cd24b8ae0d. Badge URLs follow the latest listing; save the report to keep this version.
Download report · Request a fresh review
What to review next
- Description length: 1 of 5 points. 5 for 150–600 characters; 3 for 100–900; 1 for 50–1,024.
- Boundary clause: 0 of 4 points. 4 when the description says when not to use the skill (“Not for …”, “Do not use …”, “Use … instead”).
- Example request: 0 of 3 points. 3 when the description quotes an example request (3–60 characters in quotation marks).
Add declarations and bundled files when they describe the skill’s actual needs. Update the source, then request a fresh review with the changed commit or PR.
expo-design-system passes the required frontmatter check and all seven graded checks, which cover the SKILL.md format, a declared license and a commit in the last year. Those checks earn 56 of the score’s points; the rest come from description quality, instruction depth, bundled files, maintenance and curated-list citations. How the score works.
See the checks and points
| Check | Result |
|---|---|
| Frontmatter parses and declares a name and a description | Pass |
| Name uses lowercase letters, digits and hyphens, 64 characters or fewer | Pass |
| Name matches the skill's folder name | Pass |
| Description is between 50 and 1,024 characters | Pass |
| Description says when an agent should use the skill | Pass |
| SKILL.md body is 500 lines or fewer | Pass |
| A license is declared in the frontmatter or the repository | Pass |
| Repository has a commit in the last 12 months | Pass |
| Score component | Points |
|---|---|
| Structural checks | 56 of 56 |
| Description length | 1 of 5 |
| Boundary clause | 0 of 4 |
| Example request | 0 of 3 |
| Instruction depth | 7 of 7 |
| Reference files | 3 of 3 |
| Bundled scripts | 0 of 2 |
| Recent maintenance | 9 of 9 |
| Curated-list citations | 3 of 7 |
| Tool permissions declared | 0 of 2 |
| Compatibility declared | 0 of 2 |
Show the listing and raise the score
expo-design-system is listed with 79/100 · C. This badge links to its Suede listing. Skills scoring 80–99 add a numeric and a letter quality shield; the largest open points for expo-design-system are boundary clause (4), description length (4) and example request (3). Send your repository and the points you want to raise, then request a fresh review after updating the skill.
[](https://skills.suedeai.ai/directory/expo/skills/expo-design-system/)<a href="https://skills.suedeai.ai/directory/expo/skills/expo-design-system/"><img src="https://skills.suedeai.ai/directory/badge.svg" alt="Suede Skills Directory: listed" height="20"></a>Where this skill is cited
expo/skills appears in 2 curated lists: heilcheng/awesome-agent-skills, travisvn/awesome-claude-skills.