expo-design-system Skill for Claude Code: Expo App Themes

Makes your agent build and audit a design system in an Expo app: a token theme, reusable components and rules for when to extract them.

Installs: 18.6K; on skills.sh
Stars: 4K; on GitHub
Files: 3; besides SKILL.md
Updated: Nov 2026; last repo commit

The skill tells your agent to look first and build second. In an app that already has screens, it checks for an existing styling system such as NativeWind, Tamagui, Restyle or Unistyles and extends that one. Only when nothing exists does it create a src/theme/ folder of tokens for color, spacing, typography, radius, shadow and motion.

It also sets a contract for reusable components with variants, sizes, states, a style override and accessibility labels, and three tests for when a repeated view deserves to become shared. Two reference files add a grep-based audit for drift and a list of 20 named mistakes common in AI-generated apps. It loads when you build or tidy an Expo app's visual layer.

Good for

Expo and React Native developers whose screens repeat the same colors and spacing
Teams that want one theme and a small set of shared components
Developers reviewing AI-generated app screens for common design mistakes

Install expo-design-system

Claude Code

Copy this prompt.

Install the expo-design-system skill in Claude Code. Run this command:

npx skills add https://github.com/expo/skills --skill expo-design-system

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

References
Adopt Before You Build
The Theme
Colors
Spacing
Typography
Radius
Shadows
Motion
Reusable Components
The component contract
Composition over configuration
When to extract - and when not to
Where Decisions Live
Self-Critique Pass
Named Failures: Native Slop

Key facts

Author: Expo team (expo)
Repo: expo/skills, folder plugins/expo/skills/expo-design-system
Installs on skills.sh: 18,561 as of 2026-11-02
GitHub stars: 4,005 for the whole expo/skills repo
License: MIT (frontmatter in SKILL.md; the repo README also says MIT)
Last repo commit: 2026-11-01
What is inside: 4 files including SKILL.md; 2 reference files (audit and native-slop) and an agents/openai.yaml file
skills.sh audits: Gen Agent Trust Hub: pass; Socket: pass; Snyk: pass

What it includes

Detect the existing system first
Checks package.json for a styling library and looks for a theme file. If one exists it is the source of truth, and the agent never adds a second system beside it.
Read · Adopt before you build
Tokens under src/theme/
Colors, spacing (a 4-point grid), typography, radius, shadows and motion live in one theme entry point. Repeated values become tokens, and hex colors are not hardcoded outside the theme.
Write · The theme
Variants, sizes, states, style override, accessibility
Each shared component defines its variants and sizes, handles pressed and disabled states, merges a style prop last and exposes accessibility roles and labels.
Write · Reusable components
Three conditions before a view is shared
A view moves to the shared components folder only when it appears in two or more screens, has a nameable role and has an API smaller than its implementation.
Read · When to extract
Screenshot and check four principles
After a screen change, check hierarchy, proximity, repetition and alignment, and fix problems in the theme or component, not with one-off tweaks.
Read · Self-critique pass
20 named tells of AI-built apps
A reference lists 20 named mistakes such as The Web Modal and Everything's a Card, with grep checks for the ones that can be searched.
Runs code · Native slop checks
Grep checks, scoring and adoption plan
A reference gives grep checks for hardcoded hex colors, font sizes, spacing, radius and legacy shadows, a scoring rubric and templates for documenting components.
Try: “Audit this Expo app for design system drift and give me a score.”
Runs code · Drift audit
Report an error in the skill to Expo
If the skill is wrong or out of date, SKILL.md describes a command that sends feedback through Expo's agent CLI, and a report when an agent repeatedly fails. It asks for specific, actionable reports.
Runs code · Submit feedback

From the official docs

Permissions

Low risk

It edits many of your screen and component files, and it describes one command that sends feedback to Expo. Commit first, and read the feedback text before you let the agent send it.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It can send feedback to Expo
SKILL.md tells the agent to report errors or outdated information, and to file a brief report if an agent repeatedly fails or you have to step in, with npx --yes @expo/agent-cli@latest feedback. The --yes flag skips the install prompt. Ask the agent to show the text before it sends anything.
It can restructure many files
Moving hardcoded values into a theme touches many screens. Commit first and review the diff.

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No switch. Ask only for an audit and read each command before it runs.
Talks to	The feedback command, if run, runs @expo/agent-cli through npx and sends a message to Expo
Scopes	Reads your source and package.json, and runs the grep checks in the reference files Creates or edits theme and component files in your project Can run npx --yes @expo/agent-cli@latest to send feedback to Expo

Questions

What does expo-design-system do?

It makes your agent set up and keep a design system in an Expo app. That means a theme of tokens, reusable components and an audit for drift. It tells the agent to follow an existing styling system if you have one.

How do I install it?

Use the install box at the top of this page. The Expo README also lists plugin routes for Claude Code and Codex that install the expo plugin instead of this one skill.

Does it work with NativeWind or Tamagui?

Yes in the sense that it detects them and extends them instead of adding a second system. For Tailwind projects it says to keep tokens as CSS variables in global.css.

Does it need other Expo skills?

It works alone, but it points to two siblings in the same repo: expo-native-ui for what values look native, and expo-project-structure for the folder layout. The repo README lists both.

Does it need an API key?

No. SKILL.md names no API key. It does describe a feedback command that runs through npx and sends a message to Expo.

Is it safe?

It rewrites parts of your app, so use version control and review the diff. The audit is a set of grep checks. The feedback command in SKILL.md is the part that sends text to Expo, so ask the agent to show you the text before it runs.

Information

updated Nov 2, 2026

Repository: expo/skills
Folder: plugins/expo/skills/expo-design-system

expo/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 6

expo-design-system SKILL.md · github.com
expo/skills README · github.com
expo-design-system audit.md · github.com
expo-design-system native-slop.md · github.com
expo-design-system on skills.sh · skills.sh
expo/skills · github.com