🧠 Cursor Rule — Use Reproduction Snippets

Summary

Debugging becomes significantly easier when issues are reduced to the smallest possible reproduction. Small, isolated snippets allow Replit Agent to detect incorrect logic, state transitions, async flaws, and edge-case behavior without noise from the full codebase.

Objectives

• Accelerate debugging by isolating failure conditions
• Remove unrelated code that hides the real issue
• Give the agent a precise, minimal context for accurate diagnosis
• Provide a consistent structure for reproducing UI, state, and async bugs

Principles

1. A minimal snippet should contain only the logic or state producing the bug.

2. Remove UI styling, irrelevant imports, or unrelated branches.

3. Rewrite complex flows into simple steps the agent can execute directly.

4. Prefer explicit, deterministic examples over large abstractions.

Implementation Pattern

Below is the recommended step-by-step workflow for creating high-quality reproduction snippets:

Step 1 — Identify the Failing Behavior

Determine whether the issue involves:

• Broken rendering logic
• Incorrect state transitions
• Async timing or Promise resolution
• API handling or unexpected data shape
• Side effects triggering errors

Step 2 — Extract Only the Relevant Code

Start removing everything that does not influence the bug.

Examples of removals:

• Unrelated components
• Styling and layout code
• External libraries that don’t contribute to the issue
• Extra configuration or routing files

Step 3 — Inline Mock Data and Functions

Instead of reproducing full API flows, use inline mocks such as:

'const mockData = { id: 1, value: null };'

or

'function fakeFetch() { return Promise.resolve({ ok: false }); }'

This ensures deterministic behavior.

Step 4 — Reproduce the Issue in the Simplest Possible Form

A good reproduction snippet should:

• Fail consistently
• Contain ≤ 20–30 lines of code
• Be runnable without additional setup
• Demonstrate the bug clearly

Step 5 — Validate the Snippet With Replit Agent

Ask the agent to:

• Run the snippet and show the error
• Trace execution order
• State what assumption is breaking
• Propose the minimal fix

Anti-Pattern (Before)

Providing the full repository or a large component tree:

'App.jsx with 15 nested components, API handlers, auth logic, styling imports, and unrelated pages.'

Problems:

• Hard to isolate the failure
• Agent must guess too much context
• Debugging becomes slow and noisy

Recommended Pattern (After)

A minimal reproduction snippet:

'function Example() {

const [value, setValue] = useState(null);

useEffect(() => {

async function load() {

const res = await fakeFetch();

setValue(res.ok ? "success" : "error");

}

load();

}, []);

return <div>{value}</div>;

}'

Benefits:

• Agent sees the failure path instantly
• Debugging becomes deterministic
• Solutions are more accurate and focused

Best Practices

• Keep reproduction snippets short and complete.
• Always inline data and simplify async behavior.
• Remove noise—focus only on the failing logic.
• Validate the snippet yourself before sending it to the agent.

Agent Prompts

"Here is a minimal snippet—run it and explain why it fails."

"Identify the exact line or assumption causing incorrect behavior."

"Rewrite this snippet to fix the bug while preserving behavior."

"Trace async execution order inside this reproduction example."

Notes

• The smaller the snippet, the faster the agent finds root causes.
• Snippets should demonstrate one failure at a time.
• Always confirm the snippet reproduces the bug before submitting it.