skills.rest
sombek
sombekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-design-system

Build and audit token-based design systems for Expo React Native apps.

Updated Sep 6, 2026
Search Tags:#theming#design system#component library#design tokens#react native#expo#style audit
One-click install
npx skills add https://github.com/sombek/fitness-guidance-app --skill expo-design-system-sombek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-design-system
Source: https://github.com/sombek/fitness-guidance-app/tree/main/mobile/.agents/skills/expo-design-system
Command: npx skills add https://github.com/sombek/fitness-guidance-app --skill expo-design-system-sombek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Expo apps often accumulate design-system drift: hardcoded hex colors, arbitrary spacing values, raw font sizes, and inconsistent component APIs scattered across screens. This Skill establishes a single visual source of truth - a token theme plus reusable components - and audits existing apps for drift. ## Core Features & Use Cases - Token Theme Setup: Creates a src/theme/ structure covering colors (platform semantic colors via Platform.select), spacing on a 4-point grid, typography ramps, radius, boxShadow strings, and motion durations. - Reusable Component Conventions: Defines the variant/size/state/style contract for shared primitives like Button and ThemedText, plus rules for when a repeated view earns promotion into src/components/. - Drift Auditing: Ships grep-based checks, a per-100-SLOC scoring rubric, and an incremental adoption plan in references/audit.md for migrating legacy apps without a big-bang rewrite. - Use Case: You inherit an Expo app with hardcoded styles everywhere. Run the audit to score drift per category, derive tokens from the most frequent values, then convert screens one at a time while tracking scores. ## Quick Start Use the expo-design-system skill to audit my app for hardcoded style values and set up a token theme under src/theme.

Frequently Asked Questions about expo-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a design token theme in an Expo app?▼

Create a src/theme/ directory with files for colors, spacing, typography, radius, shadows, and motion, re-exported through one index.ts entry point. Use platform semantic colors via Platform.select, a 4-point spacing grid, and named text styles mirroring the Apple type ramp.

How do I audit an Expo app for hardcoded style values?▼

Run grep checks for hex colors, raw fontSize, non-scale spacing values, borderRadius, and legacy shadow props outside the theme directory. Score each category as escapes per 100 source lines, then migrate incrementally starting with typography.

Does this work with NativeWind, Tamagui, or Restyle?▼

Yes. If a styling library already exists in package.json, it is the source of truth and should be extended in its own idiom rather than replaced. The token scales and naming still apply; only the storage format changes, such as CSS variables in global.css for Tailwind.

When should I extract a repeated view into a shared component?▼

Extract only when the view appears in two or more screens, has a nameable role like Card or EmptyState, and its props API is smaller than its implementation. Move stepwise from inline JSX to a screen-local component, then to src/components/.

Why should I avoid legacy shadow props in React Native?▼

Legacy shadowColor, shadowOffset, and elevation props are banned in favor of boxShadow strings, which work consistently across platforms. Define two or three elevation levels as boxShadow tokens in theme/shadows.ts.

Related Skills

Explore More Software Engineering Skills→
bmiit145bmiit145

expo-project-structure

Defines the recommended folder structure for new Expo apps using Expo Router.

Community
Basic
qodex-aiqodex-ai
39

mobile-app-interface

Designs native iOS interfaces and components with Expo and React Native using Apple's Human Interface Guidelines.

Official
Advanced
Git-FgGit-Fg

design-principles

Explain perceptual and cognitive design principles with a decision checklist.

Community
Intermediate
expoexpo
2.5k

expo-design-system

Build and audit design token themes and reusable components in Expo apps.

Official
Intermediate