expo-design-system
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.
Target: Mobile development. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Expo Design Systems
- References
- Adopt Before You Build
- The Theme
- Colors
- Spacing
- Typography
- Radius
Make every screen in an app draw from one visual source of truth: a token theme and a small set of reusable components. This skill defines where tokens live, what they cover, how reusable components are shaped, and when a repeated view earns promotion into the system. Sibling skills own the layers around this one: expo-native-ui - platform styling rules (HIG, semantic colors, controls, shadows syntax). Follow it for what values look native; follow this skill for where values live and how they're reused. expo-project-structure - folder skeleton for new apps. For Tailwind projects, keep tokens in global.css as CSS variables and follow the styling library's own setup guidance. The scales and naming in this skill still apply; only the storage format changes. Consult these resources as needed: In an app that already has screens, the first move is detection, not construction. Before writing any token file: 1. Look for a declared system. Check package.json for a styling library - NativeWind/Tailwind, Tamagui, Restyle, Unistyles, styled-components. Then look for a token file: theme.ts, src/theme/, constants/theme.ts, or constants/Colors.ts (the create-expo-app default). 2. If one exists, i
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- expo/skills
- Source file
- plugins/expo/skills/expo-design-system/SKILL.md
- Fixed revision
- a9e5bd3fa00b4e61f632e43f85da73aee1942582
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: Expo Skills · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-09T14:01:42.054Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.