new-component

/new-component

You are about to add a new component to appCN — a shadcn-philosophy component library for React Native + Expo. Read this entire skill before asking the user any questions.

Read these first (if you haven't this session)

1. CLAUDE.md — architecture, monorepo map.
2. DESIGN.md — taste layer + the SOP this skill operationalizes.
3. AGENTS.md — agent-specific rules.

Step 0 — Gather the spec from the user

Ask only what's missing. You need:

• Slug (kebab-case, e.g. bottom-sheet).
• Category — base (broad mobile primitive) or ai (featured AI collection). If unclear, default to base and ask.
• One-line description.
• Anatomy — 2–4 sentences: what's it made of, when to reach for it.
• The delight detail — the one non-obvious motion / haptic / behavior that earns the component's place. If the user can't articulate it, push back. Components without a delight detail don't get merged.
• Props sketch — even rough is fine; you'll refine in step 2.

Step 1 — Author packages/ui/src/{components,ai}/<slug>.tsx

File shape (mirror the existing components):

header doc comment   ← what it is + the delight detail, in one breath
imports              ← react, react-native, reanimated, ../lib/cn, ../lib/motion, optional ../lib/haptics
cva blocks           ← <name>Variants / <name>TextVariants (only if there are variants)
Props interface      ← exported, named <Name>Props
component            ← exported, named <Name>
local sub-components ← Dot, Caret, icons… below the main component
named exports        ← incl. variants

Non-negotiables (DESIGN.md):

• NativeWind classes only (no StyleSheet).
• Reanimated for motion, gesture-handler for gestures.
• Pull durations / easings / springs / PRESS_SCALE from ../lib/motion.
• Pull haptics from ../lib/haptics if any tactile feedback is needed.
• accessibilityRole + label + hitSlop on every interactive surface.
• Honor useReducedMotion() — fall back to crossfade or settled state.
• Dark-mode first; use token classes (bg-primary, text-muted-foreground) only.
• Icons: draw small glyphs from Views/borders (see prompt-input.tsx). Don't add an icon library.