Airbnb DLS Expo React Native Design System Best Practices

Opinionated, strict design system engineering for Expo / React Native apps on the New Architecture, targeting both web and native iOS. Contains 63 rules across 11 categories, prioritized by impact. Derived from Airbnb's Design Language System (DLS), the Unistyles v3 documentation, and the React Native ecosystem (Reanimated, Gesture Handler, Skia, FlashList, Expo SDK). The styling engine is Unistyles v3; the component API follows the Airbnb DLS pattern of variant props over style escape hatches.

Mandated Architecture Alignment

This skill is the infrastructure layer — it teaches how to BUILD the design system itself, the React Native counterpart to ios-design-system. All code examples follow the same non-negotiable constraints:

• Feature modules import @clinic/design-system + domain; never another feature's internals
• The design system owns the Unistyles theme (tokens, breakpoints) and exports a curated public surface
• Reuse before you build: read the index, extend a variant, promote on the second use — never a parallel local component
• Components expose variant and slot props (Airbnb DLS); no raw style escape hatch
• Animation and gestures run on the UI thread (Reanimated worklets + Gesture Handler)
• Lists use FlashList; the body-chart drawing surface uses React Native Skia
• One source feels native on both web and iOS: Unistyles _web pseudo-states and Platform splits, never a forked web stylesheet
• Targets the New Architecture (Fabric/JSI), Expo SDK 53+ / React Native 0.81+

Scope & Relationship to Sibling Skills