React.
Hooks best practices. Component composition. Memoization. Context optimization. Concurrent features. The full React 18+ stack.
React 18/19, Zustand, Tailwind, Framer Motion.
React is easy to write badly. This skill covers what makes the difference: composition over boolean props, when to lift state vs colocate, the actual rules of hooks (and why), context optimization (the re-render footgun), and concurrent features (Suspense boundaries, useTransition, deferred values). Plus Zustand for state, Tailwind cn() patterns, and Framer Motion for choreography.
Four recipes.
Composition over props
Compound components (Tabs.Tab, Card.Header). Render props for behavior reuse. Children-as-data for layout. Avoid the isLoading + isError + isEmpty boolean explosion.
State management decision
useState for component-local. useReducer for component-local with complex transitions. Zustand for cross-component shared. Context only for theming/auth (never for fast-changing data).
Concurrent features
Suspense for code-split routes. useTransition for non-urgent updates. useDeferredValue for expensive derivations. Server Components for data-fetching-should-not-be-in-a-hook.
Tailwind cn() pattern
clsx + tailwind-merge in one helper. Conditional classes without string concat. Variant systems via cva (class-variance-authority). Avoid arbitrary values when possible.
It composes.
Skills compose into workflows. React is rarely the only skill you will use — it pairs naturally with these others in the library.
One command.
Installs only stryx-react (skip the other 19) into ~/.claude/skills/stryx-react/.
Free for all use.
Stryx Labs License v1.0. Use React in personal, commercial, internal, and production work. No attribution required.