Skills For Real React/React Native Engineers

Skills

39 in the Claude listing

• Atomic designStructure the UI library (core-ui) with Atomic Design — atoms, molecules, organisms, templates — where composition flows one way (higher composes lower).
• commentsClean-code comments — explain why not how, delete redundant and dead comments, prefer self-explaining code.
• Component architectureDefines component structure, prop typing, responsibility separation, and ref handling patterns.
• Compound componentsBuild flexible components as a compound/composer set — namespaced parts (Tabs.Item, WizardCard.Provider) that share one context, exposed via Object.assign or an object literal.
• Css animationsPure-CSS web animations best practices — interruptible transitions vs.
• Error handlingClean-code error handling — exceptions over error codes, wrap third-party APIs at a boundary, don't use catch as an if, don't return or pass null.
• formattingClean-code formatting — vertical ordering (stepdown/newspaper), declaring near use, team-enforced tooling.
• functionsClean-code functions — small, do one thing, one abstraction level, few arguments, no side effects, command-query separation, plus DRY and refactor discipline.
• Gsap performanceGSAP performance — animate transform/opacity only, extract duration/easing constants, will-change, force3D, ScrollTrigger perf, prefers-reduced-motion.
• Gsap reactGSAP with React/Next.js — the useGSAP hook, scope, contextSafe, automatic cleanup, plugin registration, never animating React state, SSR.
• Gsap scroll triggerGSAP ScrollTrigger — trigger/start/end, scrub, pin, toggleActions, snap, batch, responsive matchMedia, cleanup.
• Gsap textGSAP SplitText type/text animations — split into chars/words/lines, staggered reveals, line masking, font readiness, revert for a11y, reduced motion.
• Gsap timelinesGSAP 3 timelines — sequencing, defaults, labels, relative position, stagger, repeat/yoyo, control methods, nesting.
• hooksRules for custom hooks — naming, logic extraction, and separation of view and logic.
• howUse for "how does X work", code walkthroughs before changing something, and placement / ownership / layering questions ("where should this live", "which package owns this", "is this the right layer").
• listsStrict performance rules for lists — FlashList, stable renderItem, extracted item components, and naming patterns.
• Meaningful namesClean-code naming — intention-revealing, honest, distinct, pronounceable, searchable names with no type encoding.
• Native feelOpinionated rules for making an Expo + TypeScript app feel genuinely native on both platforms — a strict spacing/design-token system, Platform.OS/Platform.select branching, expo-haptics (impact/select
• Nextjs routingNext.js App Router patterns — route structure, layouts, server vs client components, dynamic routes, loading/error states, metadata, and navigation.
• Objects and dataClean-code objects vs.
• orchestrationTiered multi-agent orchestration — an expensive model plans and synthesizes while specialized subagents do the work in their own isolated contexts.
• performanceEnforces rendering performance best practices — memoization, stable references, and avoiding unnecessary re-renders.
• projectMonorepo project structure — Turborepo layout with packages/core-*, packages/platform-*, packages/feature-*, and deployable apps (mobile, web, backend, e2e), dependency direction, package boundaries,
• React navigationReact Navigation setup, typed routes, navigator structure, deep linking, and navigation actions.
• Reanimated coreReanimated core — useSharedValue, useAnimatedStyle, useDerivedValue, useAnimatedReaction, useAnimatedProps, worklet rules, UI vs JS thread, runOnUI/runOnJS, and the .value-only-in-worklets rule.
• Reanimated gesturesReanimated + gesture-handler v2 — Gesture.Pan/Tap/Pinch, GestureDetector, driving shared values, withDecay, runOnJS, gesture composition, activeOffset/failOffset.
• Reanimated layout animationsReanimated layout animations — entering/exiting presets, custom builders, LinearTransition/CurvedTransition, Keyframe, LayoutAnimationConfig, itemLayoutAnimation.
• Reanimated text and numbersReanimated animated text and numbers — the useAnimatedProps + TextInput (ReText) pattern, animated counters, per-character staggered reveals, tabular figures, blur/opacity mount reveal.
• Reanimated timingReanimated timing — withTiming vs withSpring vs withDecay, Easing, spring configs, withSequence/withDelay/withRepeat, cancelAnimation, reduced motion, recommended constant configs.
• skiaOpinionated rules for @shopify/react-native-skia in Expo + TypeScript — the declarative <Canvas> API (Circle/Rect/Path/Group/Paint/gradients/Blur), driving animation from Reanimated shared values with
• tailwindTailwind CSS conventions — utility-first, semantic theme tokens used directly (so light/dark flips in one place, not a dark: on every element), no arbitrary values, class ordering, cn() for conditiona
• teachExplain a body of work plainly so a person actually understands it.
• Type safetyStrict TypeScript typing — type over interface, no any, no as casts, narrow literal unions, discriminated unions, constructive modeling, exhaustive switch with never, satisfies, branded types, boundar
• Ui interactionsCross-platform interaction polish — press/tap feedback (scale 0.96), haptics, hover, focus rings, disabled/loading, minimum hit area, no transition:all, will-change.
• Ui motionCross-platform motion polish — interruptible animations, split & stagger enter, subtle exit, contextual icon cross-fade, skip-animation-on-load.
• Ui surfacesCross-platform surfaces polish — concentric border radius, optical alignment, shadows vs.
• Ui typographyCross-platform (React web + React Native) typography polish — text-wrap balance/pretty, font smoothing, tabular numbers, Dynamic Type, adjustsFontSizeToFit, letter spacing, layout-shift avoidance.
• unslopCut AI tells from writing and put a real voice back in.
• whyInvestigate why code is the way it is — design rationale, rejected alternatives, the incident or customer that forced a threshold.