Build consistent UIs with design tokens and core components

This skill covers a React and React Native core component library and design-token system for building consistent UI. It enforces never hard-coding values and always using design tokens: spacing tokens mapping to 4px through 32px, semantic color tokens for primary and secondary text, tertiary or disabled text, brand accent color, and error or success states instead of hex or rgb values, and typography tokens mapping extra-small through 2xl sizes for font size alongside weight tokens like semibold. Core components documented include Box, a token-aware layout primitive; HStack and VStack for horizontal and vertical flex layouts; Text for typography with token props; Button with solid, outline, ghost, and link variants plus loading and disabled states; Input with a label and validation error display; and Card with header and body composition. Layout patterns cover full-screen layouts with a screen header and content area, form layouts stacking inputs with a submit button, and list-item layouts combining an avatar, title and subtitle, and a chevron inside a bordered horizontal stack. Anti-patterns explicitly called out include raw inline styles instead of token props, importing raw platform components instead of the core library's wrapped versions, and inline style objects instead of token-based props. It also shows the component-authoring pattern itself: typed props restricted to specific token values, such as padding limited to a union of token strings, and a variant-styles lookup applied via spread. Button variants map to specific intents - solid for primary actions, outline for secondary actions, ghost for tertiary or subtle actions, and link for inline actions - which keeps visual hierarchy consistent across a screen without each developer inventing their own convention.

Use it when building UI, working with design tokens, or using the component library - not for raw platform component usage or inline styling, which the skill explicitly treats as anti-patterns to avoid.

Given a UI requirement, it produces component usage matching the design system's token conventions for spacing, color, and typography, built from the core component set - Box, HStack and VStack, Text, Button, Input, and Card - rather than raw platform primitives or inline styles.

Integrates with sibling skills: a React UI patterns skill for UI state handling using these core components, a testing-patterns skill for mocking core components in tests, and Storybook for documenting component variants.

Frontend and mobile developers working in a codebase with this design-token-based component library who need consistent spacing, color, and typography usage instead of hard-coded values or raw platform components.