Skills Explorer Add Skills

expo-design-system

An agent skill by expo, from expo/skills. Tags: mobile, react-native, web.

What it does

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.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add expo/skills --skill expo-design-system

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/expo/skills
cp -r skills/plugins/expo/skills/expo-design-system ~/.claude/skills/expo-design-system

Safety box score

Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.

Source

Repository
expo/skills (all skills from this repository)
Path
plugins/expo/skills/expo-design-system/SKILL.md
Branch
main
Collection
expo
Updated
2026-09-22