Tips
- Include the exact requirement or error
- Provide relevant surrounding code
- State the runtime or framework version
- Test the suggested change before production
React Component Generator
Creates a practical react result with clear structure, useful constraints, and verification guidance for developers.
Customise this prompt
The Prompt
Act as a senior software engineer specializing in react. Context: the user needs help with {component}, {props}, {states}, {accessibility_goal} and expects a solution suitable for the stated project. Task: analyze the supplied requirement, identify important assumptions, then produce a practical implementation or review that solves the specific problem without changing unrelated behavior. Output format: start with a brief approach, then provide the relevant code or structured guidance, followed by tests or verification steps and a short explanation of important decisions. Constraints: keep the solution maintainable, secure, readable, and compatible with the supplied context; do not invent unavailable APIs or dependencies; clearly label assumptions; preserve existing behavior unless a change is explicitly requested; and flag anything that needs human verification.
Use Case
Use this when a developer needs help with react and wants a structured result instead of a generic code answer.
Expected Output
A practical react response with an approach, implementation or review, verification steps, and key decisions.
Example
component: CourseCard; props: title, image, price, enrollmentState; states: available, enrolled, sold out; accessibility_goal: keyboard-accessible action
The response gives a focused react result with clear assumptions, practical implementation guidance, verification steps, and notes about edge cases or risks that should be checked before use.
Variations
- Beginner-friendly explanation
- Production-focused version
- Minimal-diff implementation
FAQ
Yes, include the relevant code and surrounding context so the response can target the real implementation.
Usually no; provide the smallest set of files or functions needed to understand the task.
No; review, testing, dependency checks, and human validation are still required.
Last updated 28 Sep 2026