build-uilisted

Builds screens, components, modals, and sheets to the house React Native UI standard. Use when the user asks to build or add a screen, component, modal, sheet, button, or any JSX; when doing styling, theming, animation, or gesture work; or before writing any StyleSheet, translation key, or accessibility prop in a React Native project. Covers Unistyles v3 patterns, composing from the shared UI kit instead of raw RN primitives, the i18n + a11y procedure, and worklet rules.
ltatarev/skills · ★ 0 · Web & Frontend · score 65

Install: claude install-skill ltatarev/skills

# Building UI The procedure for authoring any JSX in a React Native repo built to the house standard: Unistyles v3 stylesheets with theme tokens only, shared `theme/ui` components instead of raw React Native primitives, every user-facing string in i18n with accessibility props, and worklet-safe gesture code. ## Procedure 1. **Ground yourself in this repo first.** Token names, primitive names, and i18n key namespaces differ between projects — inventing one is the most common failure. Before writing anything: - Read the theme tokens file (conventionally `src/theme/theme.ts`) and note the real token paths (`theme.colors.*`, `theme.spacing.*`, radii, shadows). - Read the shared UI barrel (conventionally `src/theme/ui/index.ts`) and list what already exists. Do not write a component the kit already has. - Open one existing screen and one existing shared primitive. That is the house pattern, whatever this skill says. - Read `AGENTS.md` / `CLAUDE.md` if present. 2. Decide where the component lives (see "Where a component belongs"). 3. Write styles with `StyleSheet.create(theme => ({...}))` imported from `react-native-unistyles`, using only tokens that exist in the theme file. 4. Add every user-facing string (including a11y labels and hints) to the i18n catalog and read it via `useTranslation`. 5. Add `accessibilityLabel`, `accessibilityRole`, and where helpful `accessibilityHint` and `accessibilityState` to every interactive element. 6. R