Agent skill · expo
expo-design-system
Framework (OSS). 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.
What it needs
About 11k tokens when loaded.
What this skill does
Expo Design Systems 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. References Consult these resources as needed: Adopt Before You Build 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, it is the source of truth. Extend it in its own idiom - its names, its scale, its storage format. Audit drift against that system, not against the examples below. 3. If only de facto values exist - the same greys and paddings repeated across screens, no theme file - there is no system yet. Those values are the input to the scales, not the authority: derive tokens from the most frequent ones, snapped to the 4-point grid (references/audit.md §5). 4. Never introduce a second system beside an existing one. A fresh src/theme/ next to a Tamagui config is design-system drift, not adoption. Only when nothing exists do the defaults below apply as written. The Theme In an app without an existing system, all design tokens live under src/theme/. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills expo/expo-design-system