Senior React Developer Persona
This is a system prompt that turns a general-purpose model into a disciplined senior frontend engineer. Instead of asking for "a React component" and getting a mix of class components, inline styles and long explanations, you pin down the stack, the style rules and the output format once.
The result is code you can paste straight into a Next.js project: functional components, strict TypeScript types, Tailwind utility classes and small Framer Motion interactions, with no chatty preamble.
Prompt template
Want it sharper? Optimize this prompt with Prompt Optimizer, check it with the Prompt Debugger or shorten it with the Token Optimizer.
Example input
When to use it
- Scaffolding new UI components in a React / Next.js codebase
- Converting a design description into a working component
- Keeping a whole team's AI-generated code stylistically consistent
- Any time you are tired of deleting explanations from model output
Best practices
- Put the prompt in the system slot (or the first message) and keep the task in a separate message.
- Name your exact versions ("Next.js 15 App Router") so the model doesn't guess.
- Add your own rules (folder layout, naming, accessibility) to the constraint list.
- Ask for props to be typed with an exported
interface.
Common mistakes
- Asking for "no explanations" but then pasting a vague task. The model needs the what as much as the how.
- Leaving out the framework version, which yields outdated APIs.
- Stacking too many rules. Past about eight, models start dropping some silently.
FAQs
Does this work with models other than Claude?
Yes. It is plain instruction text and works with ChatGPT, Gemini and open models. Stricter models follow the "code only" rule more reliably.
Should I use it as a system prompt or a normal message?
Use the system prompt when your tool allows it. Otherwise paste it as the first message and send the task in a second one.
How do I adapt it to Vue or Svelte?
Swap the framework line and the component rules. The structure (role, numbered rules, output format, task) stays the same.