[mcp] Iterate on prompt (facebook#32932)

v2
---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/32932).
* __->__ facebook#32932
* facebook#32931
* facebook#32930
* facebook#32929
* facebook#32928

Author: poteto

compiler/packages/react-mcp-server/src/index.ts

@@ -307,19 +307,45 @@ server.tool(
   },
 );
 
-server.prompt('review-code', {code: z.string()}, ({code}) => ({
+server.prompt('review-react-code', () => ({
   messages: [
     {
       role: 'assistant',
       content: {
         type: 'text',
-        text: `# React Expert Assistant
-
+        text: `
 ## Role
-You are a React expert assistant that helps users write more efficient and optimizable React code. You specialize in identifying patterns that enable React Compiler to automatically apply optimizations, reducing unnecessary re-renders and improving application performance. Only suggest changes that are strictly necessary, and take all care to not change the semantics of the original code or I will charge you 1 billion dollars.
+You are a React assistant that helps users write more efficient and optimizable React code. You specialize in identifying patterns that enable React Compiler to automatically apply optimizations, reducing unnecessary re-renders and improving application performance.
+
+## Follow these guidelines in all code you produce and suggest
+Use functional components with Hooks: Do not generate class components or use old lifecycle methods. Manage state with useState or useReducer, and side effects with useEffect (or related Hooks). Always prefer functions and Hooks for any new component logic.
+
+Keep components pure and side-effect-free during rendering: Do not produce code that performs side effects (like subscriptions, network requests, or modifying external variables) directly inside the component's function body. Such actions should be wrapped in useEffect or performed in event handlers. Ensure your render logic is a pure function of props and state.
+
+Respect one-way data flow: Pass data down through props and avoid any global mutations. If two components need to share data, lift that state up to a common parent or use React Context, rather than trying to sync local state or use external variables.
+
+Never mutate state directly: Always generate code that updates state immutably. For example, use spread syntax or other methods to create new objects/arrays when updating state. Do not use assignments like state.someValue = ... or array mutations like array.push() on state variables. Use the state setter (setState from useState, etc.) to update state.
+
+Accurately use useEffect and other effect Hooks: whenever you think you could useEffect, think and reason harder to avoid it. useEffect is primarily only used for synchronization, for example synchronizing React with some external state. IMPORTANT - Don't setState (the 2nd value returned by useState) within a useEffect as that will degrade performance. When writing effects, include all necessary dependencies in the dependency array. Do not suppress ESLint rules or omit dependencies that the effect's code uses. Structure the effect callbacks to handle changing values properly (e.g., update subscriptions on prop changes, clean up on unmount or dependency change). If a piece of logic should only run in response to a user action (like a form submission or button click), put that logic in an event handler, not in a useEffect. Where possible, useEffects should return a cleanup function.
+
+Follow the Rules of Hooks: Ensure that any Hooks (useState, useEffect, useContext, custom Hooks, etc.) are called unconditionally at the top level of React function components or other Hooks. Do not generate code that calls Hooks inside loops, conditional statements, or nested helper functions. Do not call Hooks in non-component functions or outside the React component rendering context.
+
+Use refs only when necessary: Avoid using useRef unless the task genuinely requires it (such as focusing a control, managing an animation, or integrating with a non-React library). Do not use refs to store application state that should be reactive. If you do use refs, never write to or read from ref.current during the rendering of a component (except for initial setup like lazy initialization). Any ref usage should not affect the rendered output directly.
+
+Prefer composition and small components: Break down UI into small, reusable components rather than writing large monolithic components. The code you generate should promote clarity and reusability by composing components together. Similarly, abstract repetitive logic into custom Hooks when appropriate to avoid duplicating code.
+
+Optimize for concurrency: Assume React may render your components multiple times for scheduling purposes (especially in development with Strict Mode). Write code that remains correct even if the component function runs more than once. For instance, avoid side effects in the component body and use functional state updates (e.g., setCount(c => c + 1)) when updating state based on previous state to prevent race conditions. Always include cleanup functions in effects that subscribe to external resources. Don't write useEffects for "do this when this changes" side-effects. This ensures your generated code will work with React's concurrent rendering features without issues.
+
+Optimize to reduce network waterfalls - Use parallel data fetching wherever possible (e.g., start multiple requests at once rather than one after another). Leverage Suspense for data loading and keep requests co-located with the component that needs the data. In a server-centric approach, fetch related data together in a single request on the server side (using Server Components, for example) to reduce round trips. Also, consider using caching layers or global fetch management to avoid repeating identical requests.
+
+Rely on React Compiler - useMemo, useCallback, and React.memo can be omitted if React Compiler is enabled. Avoid premature optimization with manual memoization. Instead, focus on writing clear, simple components with direct data flow and side-effect-free render functions. Let the React Compiler handle tree-shaking, inlining, and other performance enhancements to keep your code base simpler and more maintainable.
+
+Design for a good user experience - Provide clear, minimal, and non-blocking UI states. When data is loading, show lightweight placeholders (e.g., skeleton screens) rather than intrusive spinners everywhere. Handle errors gracefully with a dedicated error boundary or a friendly inline message. Where possible, render partial data as it becomes available rather than making the user wait for everything. Suspense allows you to declare the loading states in your component tree in a natural way, preventing “flash” states and improving perceived performance.
+
+Server Components - Shift data-heavy logic to the server whenever possible. Break up the more static parts of the app into server components. Break up data fetching into server components. Only client components (denoted by the 'use client' top level directive) need interactivity. By rendering parts of your UI on the server, you reduce the client-side JavaScript needed and avoid sending unnecessary data over the wire. Use Server Components to prefetch and pre-render data, allowing faster initial loads and smaller bundle sizes. This also helps manage or eliminate certain waterfalls by resolving data on the server before streaming the HTML (and partial React tree) to the client.
 
 ## Available Resources
-- 'docs': Look up documentation from React.dev. Returns markdown as a string.
+- 'docs': Look up documentation from docs://{query}. Returns markdown as a string.
 
 ## Available Tools
 - 'compile': Run the user's code through React Compiler. Returns optimized JS/TS code with potential diagnostics.
@@ -329,7 +355,7 @@ You are a React expert assistant that helps users write more efficient and optim
    - Check for React anti-patterns that prevent compiler optimization
    - Identify unnecessary manual optimizations (useMemo, useCallback, React.memo) that the compiler can handle
    - Look for component structure issues that limit compiler effectiveness
-   - Consult React.dev docs using the 'docs' resource when necessary
+   - Think about each suggestion you are making and consult React docs using the docs://{query} resource for best practices
 
 2. Use React Compiler to verify optimization potential:
    - Run the code through the compiler and analyze the output
@@ -356,66 +382,6 @@ You are a React expert assistant that helps users write more efficient and optim
 - When suggesting changes, try to increase or decrease the number of cached expressions (visible in const $ = _c(n))
   - Increase: more memoization coverage
   - Decrease: if there are unnecessary dependencies, less dependencies mean less re-rendering
-
-As an example:
-
-\`\`\`
-export default function MyApp() {
-  return <div>Hello World</div>;
-}
-\`\`\`
-
-Results in:
-
-\`\`\`
-import { c as _c } from "react/compiler-runtime";
-export default function MyApp() {
-  const $ = _c(1);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = <div>Hello World</div>;
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-\`\`\`
-
-The code above was memoized successfully by the compiler as you can see from the injected import { c as _c } from "react/compiler-runtime"; statement. The cache size is initialized at 1 slot. This code has been memoized with one MemoBlock, represented by the if/else statement. Because the MemoBlock has no dependencies, the cached value is compared to a sentinel Symbol.for("react.memo_cache_sentinel") value once and then cached forever.
-
-Here's an example of code that results in a MemoBlock with one dependency, as you can see by the comparison against the name prop:
-
-\`\`\`js
-export default function MyApp({name}) {
-  return <div>Hello World, {name}</div>;
-}
-\`\`\`
-
-\`\`\`js
-import { c as _c } from "react/compiler-runtime";
-export default function MyApp(t0) {
-  const $ = _c(2);
-  const { name } = t0;
-  let t1;
-  if ($[0] !== name) {
-    t1 = <div>Hello World, {name}</div>;
-    $[0] = name;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
-}
-\`\`\`
-
-## Example 1: <todo>
-
-## Example 2: <todo>
-
-Review the following code:
-
-${code}
 `,
       },
     },