Build and audit design token themes and reusable components in Expo apps.
npx skills add https://github.com/expo/skills --skill expo-design-system
Please help me install this Agent Skill. Skill: expo-design-system Source: https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-design-system Command: npx skills add https://github.com/expo/skills --skill expo-design-system
Expo apps often accumulate inconsistent styling: hardcoded hex colors, arbitrary spacing values, and duplicated view code scattered across screens. This Skill establishes a single visual source of truth - a token theme plus a small set of reusable components - and provides audit tooling to measure and fix design-system drift in existing apps.
src/theme/ structure covering colors (platform semantic colors via Platform.select), spacing on a 4-point grid, typography ramps, radius, boxShadow-based shadows, and motion durations.src/components/.references/audit.md with grep-based checks, a per-100-SLOC scoring rubric, an incremental adoption plan, and templates for documenting or proposing components.#5B21B6 and padding: 13, run the audit to score the drift, derive tokens from the app's real values, and migrate one screen at a time until the audit comes back clean.Use the expo-design-system skill to create the src/theme token files and audit my screens for hardcoded style values.
High-intent search queries and answers about installing and using this skill.
Place all tokens under src/theme/ with files for colors, spacing, typography, radius, shadows, and motion, re-exported from one index.ts entry point. Use platform semantic colors via Platform.select and a 4-point spacing grid, and never hardcode values outside the theme.
Run the grep-based checks in references/audit.md to find hex colors, raw fontSize, non-scale spacing, and legacy shadow props outside the theme directory. Score each category as escapes per 100 source lines to prioritize migration.
Yes. If a styling library already exists in package.json, it is the source of truth and should be extended in its own idiom rather than adding a second theme. For Tailwind projects, tokens live in global.css as CSS variables.
Extract only when the view appears in two or more screens, has a nameable role like Card or EmptyState, and its props API is smaller than its implementation. Move it from inline JSX to the screen folder, then to src/components/.
The skill mandates boxShadow strings for all shadows and bans legacy shadowColor/shadowOffset/elevation props, per the expo-native-ui rules. Define two or three elevation levels as tokens in theme/shadows.ts.
Vinicius-B-LeiteScaffold screens and routing configurations for Expo Router React Native projects.
soham2008xyzStandardize Expo Router user interfaces for native iOS and Android apps.
Git-FgExplain perceptual and cognitive design principles with a decision checklist.
tamaguiGuide Tamagui design system usage with tokens, themes, and component patterns.