--- title: "Expo Design System: review, setup & limitations · Undominated.ai" canonical: https://undominated.ai/skills/expo-expo-design-system/ description: "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." --- # Expo Design System: review, setup & limitations · Undominated.ai > 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. [← Explore all skills](/skills/) 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. [See setup guidance ↓](#setup)[Original source ↗](https://github.com/expo/skills/tree/d4f484024fec15196bfd3c272e953e3f983972cf/plugins/expo/skills/expo-design-system) SOURCE REVIEW Reviewed 2026-10-07 Evidence 6 linked sources Publisher Expo Licence [MIT ↗](https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/LICENSE) Revision d4f484024fec [Read what was—and wasn’t—checked ↓](#review) “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.” [Expo · upstream description ↗](https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/plugins/expo/skills/expo-design-system/SKILL.md) Our analysis follows below. 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. ### A good fit for - Standardizing styling across AI-generated Expo screens - Auditing an existing app for hardcoded colors and spacing drift ### Weigh up before choosing - What looks native (palettes, HIG rules, controls) is delegated to the sibling expo-native-ui skill; this skill governs where values live, not which values to pick. - Tailwind/NativeWind projects must translate token storage to CSS variables, and color examples assume the expo-router Color API from recent SDKs; confirm against the app's SDK version. 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. [Upstream setup instructions ↗](https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md) DOCUMENTED COMMAND npx skills add https://github.com/expo/skills/tree/d4f484024fec15196bfd3c272e953e3f983972cf/plugins/expo/skills/expo-design-system --skill expo-design-system Copy command ↗ Copying 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 ### Compatibility Agent Skills-compatible coding agents · Expo and React Native projects ### Project source reads; optional theme-file edits - Read screens, components and existing theme files - Write theme and shared-component files when authorized - Run read-only grep audits across the codebase ### Cost model The instruction package is MIT-licensed; agent usage and app hosting have their own costs. 04 / FOLLOW THE EVIDENCE ## The source trail. Our notes are separate from the original resource. Check upstream before adopting a new version. - [Skill definition at reviewed revision ↗](https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/plugins/expo/skills/expo-design-system/SKILL.md) Checked 2026-10-07 https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/plugins/expo/skills/expo-design-system/SKILL.md Supports: summary, upstreamDescription, whySelected, bestFor, limitations, review, compatibility, access - [Reviewed reference or helper: references/audit.md ↗](https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/plugins/expo/skills/expo-design-system/references/audit.md) Checked 2026-10-07 https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/plugins/expo/skills/expo-design-system/references/audit.md Supports: review, whySelected, limitations - [Upstream license or licensing declaration ↗](https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/LICENSE) Checked 2026-10-07 https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/LICENSE Supports: license - [Publisher installation and project documentation ↗](https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/README.md) Checked 2026-10-07 https://github.com/expo/skills/blob/d4f484024fec15196bfd3c272e953e3f983972cf/README.md Supports: install, compatibility, access - [Skills installer source formats and selective installation ↗](https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md) Checked 2026-10-07 https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md Supports: install - [Installer implementation: full commit SHA fallback ↗](https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/src/git.ts) Checked 2026-10-07 https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/src/git.ts Supports: install KEEP COMPARING ## Other approaches to consider. Related by category or shared topics. These are alternatives to inspect, not a measured quality order. [### Expo Web to Native Migration ↗ Migrates a web React codebase to a native Expo app screen by screen: native shell first, whole web UI shippable in DOM components on day one, then strangler-order nativization with device verification.](/skills/expo-expo-web-to-native/)[### Vercel React Native Skills ↗ Provides React Native and Expo patterns for scrolling, animations, native navigation and dependency layout.](/skills/vercel-labs-react-native-skills/)[### Expo Router Navigation ↗ File-based routing for Expo Router apps: route groups, NativeTabs, native stacks, headers and search bars, modals and form sheets, with SDK-version-aware option names.](/skills/expo-expo-router/) [AI Tools ↗](/tools/)[Skills ↗](/skills/)[Agents ↗](/agents/)[MCP Servers ↗](/mcp-servers/)[Workflows ↗](/workflows/) ## Continue your investigation - [Choose a toolkit](/tools/) - [Inspect execution hosts](/agents/) - [Check tool access](/mcp-servers/) - [Check project dependencies](/check-repo/)