Prompts
A generic React prompt gets you a generic component. These get you a real one.
Ask an AI assistant to "build a React component" and you get something that compiles but ignores your existing patterns, state architecture and accessibility requirements. These prompts name the actual decision points instead.
Last updated Aug 15 · 12 min read
Why React prompts need more structure than a feature description
A vague React request produces a component that technically works and ignores everything else — existing conventions, the right state-management choice, accessibility. The React prompt library names the actual decision points instead: component generation with real prop contracts, hook extraction, performance passes, and migration briefs that reference genuine React APIs.
Refactoring: extracting hooks and decomposing god components
Tangled component logic that has grown past a maintainable size benefits from extracting a custom hook from tangled logic — genuinely separating concerns rather than just moving code around. A component that has become a "god component" doing too much benefits from decomposing it into a proper tree with clear boundaries between pieces.
Performance: diagnosing before reaching for memo
The instinct to wrap everything in memo() without first understanding why a component re-renders leads to code that is harder to read without measurably improving performance. Diagnosing unnecessary re-renders before reaching for memo forces the diagnosis first. Virtualising a genuinely large list is covered separately by this prompt, and debouncing search input the modern way — with useDeferredValue rather than a manual setTimeout — is covered by a dedicated prompt.
State architecture: choosing the right home for state
Deciding whether state belongs lifted to a parent, in Context, or in a dedicated store is a real architectural decision most "add state management" requests skip entirely — choosing the right state home forces that decision explicitly. And fixing prop drilling correctly, without reflexively reaching for Redux the moment it becomes annoying, is covered by this prompt.
Modern React: Actions, Suspense, and View Transitions
Migrating a form to React 19's Actions model is a genuine API change, not a cosmetic one — this migration prompt covers it directly. Designing Suspense boundaries for a data-heavy page — that prompt — decides where loading states actually belong. And implementing a transition with the View Transitions API, covered by this prompt, uses a genuinely newer browser capability most generic advice has not caught up to.
Testing, accessibility, and hydration debugging
Behavior-driven Testing Library tests — this prompt — test what a user actually experiences, not implementation details. A real accessibility audit for a component catches issues a purely visual review misses. And debugging a hydration mismatch — a specifically tricky class of bug in server-rendered React — has a dedicated diagnostic prompt.
Design systems: component APIs built to be reused, not just to work
Designing a component API specifically for a design system — this prompt — thinks about consumers beyond the current page. Building a compound component with Context, covered by this prompt, and a polymorphic component with asChild, covered by this one, are two patterns that show up constantly in real design-system code and rarely in generic tutorials.
When React work needs a real engineering team
Prompts help write better individual pieces of code. A full application build, a design system, or a genuinely complex migration is a bigger engineering effort. That's exactly what Scult's software team builds, or book a meeting to talk through your project.
Need this built into your business?
The free tools and prompts on this site handle the small, solved problems. If what you need is bigger — custom software, built and maintained for you — that's Scult's day job.
