abramov_skill

Overview

This skill generates JavaScript and React code in the style of Dan Abramov, emphasizing predictable state management, composition, and developer experience. It guides you toward small, testable components, clear state ownership, and explicit data flows. Use it to shape component structure, hooks, reducers, and error handling with pragmatic patterns that avoid impossible states.

How this skill works

The skill inspects component responsibilities, state shape, and data flow to propose refactors and code examples that favor composition over inheritance. It suggests colocating state, employing useReducer or custom hooks for complex logic, and adding ErrorBoundary and memoization where it matters. Outputs are concrete code snippets, design rationale, and short refactor steps to make state predictable and easy to reason about.

When to use it

• Designing or refactoring React components to improve state locality and predictability
• Implementing complex state transitions that benefit from useReducer and explicit actions
• Creating reusable logic via custom hooks with clear inputs and outputs
• Optimizing performance hotspots after profiling (lists, expensive computations)
• Adding error boundaries and robust loading/error states to UI surfaces

Best practices

• Keep state as flat and as local as possible; lift only when multiple components need it
• Make impossible states impossible by using single status fields instead of multiple booleans
• Prefer composition and compound component patterns over prop drilling or inheritance
• Use pure functions for reducers and extract side effects into effects or thunks
• Memoize only measured bottlenecks; avoid premature optimization
• Write small, focused custom hooks for reusable behavior and test them independently

Example use cases

• Refactor a form from scattered booleans to a single status-based reducer with explicit actions
• Turn prop-drilled layout into a composable Layout with Header, Sidebar, and Content children
• Extract local persistence logic into a useLocalStorage hook with safe JSON parsing
• Implement an async data loader using a useAsync hook that exposes status, value, and error
• Wrap risky UI features with an ErrorBoundary and a fallback UI to prevent entire app crashes