Expo Design System Skill for AI Coding Agents

What is the expo-design-system skill?

expo-design-system is a SKILL.md in the expo/skills repository, maintained by the Expo team. It teaches a coding agent to build one token theme for color, spacing, typography, radius, shadow and motion inside an Expo app, plus rules for shared button, card and text components.

The skill also sets a promotion rule for when a repeated screen view earns a place in the shared component set, and a self-critique pass that checks a built screen against the theme rather than accepting a one-off fix.

What changes in your agent's output

• One token entry point for color, spacing, typography, radius, shadow and motion, in place of scattered hex values and pixel counts across screens
• Semantic platform colors from the Color API in expo-router, so backgrounds and labels adapt to light and dark mode on their own
• Named text styles such as headline and body that mirror the platform's own text style ramp, in place of raw font sizes
• Shared buttons, cards and inputs that declare variant, size and state props, plus a style override that merges last
• A check for a declared styling library such as NativeWind or Tamagui before any new token gets created

The token categories it standardizes

Who it is for

Best for

• Expo and React Native apps that want one token theme instead of per-screen styling choices
• Fixing an app whose screens already read as AI-generated, using the skill's named native-slop tells
• Auditing an existing app for hardcoded colors, arbitrary spacing and inconsistent component props
• Teams already using NativeWind, Tamagui, Restyle or Unistyles who want that theme extended in its own idiom

Not for

• Keeping shared radius, border, height and state values identical across buttons, inputs, badges and pills, where the component family consistency skill holds that line across a whole system.
• Building a web token system with light and dark themes, RTL logical properties and WCAG contrast checks, where the theming components skill covers that CSS-based approach instead.
• Turning a brand brief into OKLCH color ramps and DTCG token scales for a brand foundation, where the brandkit skill builds that foundation from a brief.
• Styling native controls, safe layouts and platform-specific screens inside an Expo app, where the Expo native UI skill sets those platform rules.

How to install Expo Design System Skill for AI Coding Agents

npx skills@latest add expo/skills --skill '*'

1. Install the Expo skill set

   Run the command above from your project root. It installs every skill in the expo/skills repository, including expo-design-system, for agents such as Cursor, OpenCode, GitHub Copilot, Windsurf, Gemini, Cline, AMP, Factory Droid, Antigravity and Kiro CLI.

2. Claude Code or Codex instead

   In Claude Code, run claude plugin install expo@claude-plugins-official or /plugin install expo@claude-plugins-official. In Codex, run codex plugin add expo@openai-curated or open /plugins and install expo from the OpenAI-curated marketplace.

3. Restart the agent session

   Restart or refresh the session so the agent can discover the installed SKILL.md content, including expo-design-system.

4. Ask for it by name

   Prompt the agent, for example: Use expo-design-system to set up my theme tokens and a Button component with variants.

Check that it loaded

Ask the agent to add a themed component. It should reuse color, spacing and typography tokens from one entry point before writing the component, rather than setting hex values or font sizes directly on the screen.

Read the official instructions on GitHub

Key features

• Adopt before you buildBefore creating any token, the skill checks package.json and the app for a declared styling library such as NativeWind, Tamagui, Restyle or Unistyles. If one exists, the agent extends it in its own idiom instead of starting a second token system.
• One theme entry pointColor, spacing, typography, radius, shadow and motion tokens live under a single entry point such as theme/colors.ts, so a screen that needs spacing imports the token instead of a raw number.
• Semantic platform colorsColors come from the Color API in expo-router wrapped in Platform.select, so labels, separators and backgrounds resolve on-device and adapt to light and dark mode without a separate color table.
• Four-point spacing gridSpacing steps from xs through xxl are named by size, not by use, and layout gaps snap to the four-point grid instead of an arbitrary pixel value.
• Named text stylesTypography is defined as text style objects such as headline and body that mirror the platform's text style ramp, so screens reference a variant instead of a raw font size.
• A component contractEvery shared button, card or input declares its variants, sizes, pressed and disabled states, a style override that merges last, and an accessibility role, so a caller has no reason to fork the component just to change a color.
• A promotion rule for shared componentsA repeated view moves into the shared component set once it appears in two or more screens, has a nameable role and an API smaller than its implementation; otherwise it stays local to its own screen.
• Named native-slop tellsThe skill lists recognizable AI-generated app mistakes such as a custom web-style modal, every row boxed as its own card, and emoji used as icons, each paired with a native replacement.
• A drift auditA companion audit walks through grep checks, a scoring rubric and an adoption order for fixing an app where colors, spacing and component props have drifted away from the token theme.
• Self-critique after buildingAfter a screen is built, the agent screenshots it and checks hierarchy, spacing, repetition and alignment against the theme, tracing any visible defect back to a token or a component rather than patching the one screen.

Frequently asked questions