MOBILE DEVELOPMENT / Expo
Expo Design System
Builds a token theme (color, spacing, typography, radius, shadow, motion) plus variant/size/state component conventions inside an Expo app, with grep-based drift audits and a named gallery of AI-generated-looking anti-patterns.
“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.”
01 / THE REASONING
Why this made the selection.
- Adopt-before-you-build rule: extend an existing styling library in its own idiom and never introduce a second token system beside it, so adoption cannot become drift.
- The audit reference ships runnable grep checks for hardcoded colors, raw font sizes and off-scale spacing plus a scoring rubric and 20 named native-slop tells.
02 / THE REVIEW RECORD
What we actually inspected.
Source review has boundaries.
A clear record is more useful than a “safe” badge.
Material inspected
- plugins/expo/skills/expo-design-system/SKILL.md
- plugins/expo/skills/expo-design-system/references/audit.md
- LICENSE
Our findings
- The definition requires exactly one theme entry point and routes components through tokens while screens compose components.
- The audit reference flags off-scale spacing multiples on purpose under a nearest-step rule and tells the reader to substitute the project's own scale before running the greps.
- The component contract specifies variant/size/state prop conventions, composition over configuration, and an explicit when-to-extract rule.
Not established by this review
- No Expo app was built or restyled with this skill.
- The grep audit checks were read but not executed against a codebase.
The review applies to the material and revision named here. A newer upstream release can change its behavior.
03 / PUT IT TO WORK
Add a skill to your workflow.
DOCUMENTED COMMAND
npx skills add https://github.com/expo/skills/tree/d4f484024fec15196bfd3c272e953e3f983972cf/plugins/expo/skills/expo-design-system --skill expo-design-systemCopying does not execute this command. It may retrieve a newer version than the reviewed source.
- Install the complete skill directory with its references; a copied SKILL.md alone loses the audit and native-slop references.
- Choose the intended agent and project scope in the installer, then review its permissions before using the skill.
Before you start
- Node.js/npm for this installer
- An agent that supports the Agent Skills format
- An Expo project whose styling setup the skill can detect and extend
04 / FOLLOW THE EVIDENCE
The source trail.
Our notes are separate from the original resource.
Check upstream before adopting a new version.
https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/plugins/expo/skills/expo-design-system/SKILL.md
Supports: summary, upstreamDescription, whySelected, bestFor, limitations, review, compatibility, access
https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/plugins/expo/skills/expo-design-system/references/audit.md
Supports: review, whySelected, limitations
https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/LICENSE
Supports: license
https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/README.md
Supports: install, compatibility, access
https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md
Supports: install
https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/src/git.ts
Supports: install