react-native-design
Installation
SKILL.md
React Native Design
Left alone, a model designs the same app every time: system font, one blue accent, a column of identical cards, a spinner while loading. This skill makes the agent read the project first, commit to a direction that fits this particular app, build it on tokens, and ship it within the rules React Native actually enforces.
Typical input: an app idea that needs a theme, brand colors that need a full palette, a screen to design, or an existing UI that "feels off".
How this skill is organized
This file is the procedure. The detail lives in reference files — load one only when the task needs it:
| Task | Load |
|---|---|
| Creating, extending or auditing colors or a theme | references/color-system.md |
| Writing styles or a theme file for the project's stack | references/styling-stacks.md |
| Designing a specific screen, its navigation or layout | references/screen-patterns.md |
| Choosing a direction, fonts, motion, icons, domain patterns | references/aesthetics.md |
| Anything with shadows, blur, images, keyboard, safe areas, lists | references/platform-constraints.md |
scripts/contrast.mjs measures WCAG contrast (Node, no dependencies). Run it for every text/surface pair you add or change: