Standardize design tokens and component architecture across web and React Native.
npx skills add https://github.com/zzoohub/mealio --skill design-system-zzoohub
Please help me install this Agent Skill. Skill: design-system Source: https://github.com/zzoohub/mealio/tree/main/.claude/skills/design-system Command: npx skills add https://github.com/zzoohub/mealio --skill design-system-zzoohub
Design teams struggle with inconsistent UI and token drift across web and React Native. This skill provides a formalized approach to tokens, semantic layering, and reusable patterns to unify design language and accelerate development.
Define your initial token set and starter components following the patterns in this guide.
High-intent search queries and answers about installing and using this skill.
To standardize design tokens for consistent UI, define a tiered token architecture and semantic layering. This creates a single source of truth for theming, outputting CSS variables for web and StyleSheet for React Native to unify your design language.
Semantic token layering maps raw design tokens to contextual meaning, like mapping a raw blue value to a 'primary-button' token. You need it to prevent token drift and enable theme remapping without altering component-level styles across platforms.
Structure headless and styled component patterns by separating logic from presentation. This approach builds reusable UI primitives that share behavior across web and React Native while accepting distinct style outputs for each platform.
Yes, you can use a single token set for web CSS variables and React Native styles. The architecture provides cross-platform guidance to maintain one source of truth for theming and layout across both environments.
UI token drift happens when teams apply raw values directly instead of semantic tokens. Fix it by adopting a formalized token architecture with tiered definitions and headless component patterns to unify design language across web and React Native.
yonatangrossGenerate design tokens, atomic components, and documentation templates for UI systems.
PolGubauConfigure Tailwind CSS v4 in Expo and React Native projects.
p-o-ke-naeBuild scalable Tailwind CSS v4 design systems with CSS-first theming.
Asymmetric-alImplement design tokens, theming infrastructure, and component architecture patterns.
