🧠 Cursor Rule — Front-End Development with JavaScript

Summary

Use Cursor to build predictable, maintainable JavaScript applications by validating UI flows through runtime execution, isolating rendering logic, preventing hidden state mutations, improving performance, and ensuring consistent DOM behavior across environments.

Objectives

• Improve clarity and correctness of UI logic
• Detect hidden state mutations and rendering inconsistencies
• Replace imperative patterns with predictable data-flow structures
• Reduce re-rendering costs and unnecessary DOM operations
• Validate behavior through Cursor's real-time execution logs

Principles

1. DOM updates must be intentional and easy to reason about.

2. State transitions should be explicit and validated through execution.

3. Derived values should not be recomputed unnecessarily.

4. Functions must avoid mutating shared objects or global state.

5. Rendering logic should be separated from event-handling logic.

Goal

Use Cursor to transform JavaScript UI code into modular, predictable, and runtime-stable logic through small, testable utilities and real-world reproduction snippets.

Rule Behavior

1️⃣ Extract UI Logic into Small, Testable Helpers

• Move conditional rendering, sorting, filtering, mapping into pure helper functions
• Cursor validates that helper outputs remain stable across states
• Reduces cognitive load and improves performance debugging

2️⃣ Stabilize UI State and Avoid Implicit Mutations

• Ask Cursor to detect array or object mutations that break rendering
• Replace push, splice, or direct assignments with immutable patterns
• Cursor can rewrite mutation-heavy code into predictable transforms

3️⃣ Replace Imperative DOM Code with Declarative Behavior

• Avoid manual DOM manipulation inside complex flows
• Shift toward functions that return UI descriptions instead of patching DOM nodes
• Cursor can rewrite noisy DOM code into clean, declarative structures

4️⃣ Profile Performance and Identify Hotspots

• Use Cursor to track repeatedly executed code paths
• Reduce redundant computations and unstable callback patterns
• Apply memoization only when it produces verifiable gains

5️⃣ Validate Event Flows Through Execution

• Cursor traces how event handlers modify state and UI
• Identify branching logic that behaves differently than expected
• Ensure side effects are isolated and predictable

🟥 Before (Anti-Pattern)

function updateList(items) {

items.sort((a, b) => a.value - b.value);

document.getElementById("list").innerHTML = items.map(i => "<li>" + i.label + "</li>").join("");

}

Issues:

• Mutates the items array
• Rebuilds entire DOM on every change
• Hard to test and reason about

🟩 After (Recommended Pattern)

function getSortedItems(items) {

return [...items].sort((a, b) => a.value - b.value);

}

function renderList(items) {

return items.map(i => "<li>" + i.label + "</li>").join("");

}

function updateList(items) {

const sorted = getSortedItems(items);

const html = renderList(sorted);

document.getElementById("list").innerHTML = html;

}

Benefits:

• No mutation
• Logic extracted into pure utilities
• Easier to test, validate, and optimize

Patterns

• Pure functions for transformations
• Immutable updates for lists and objects
• Declarative rendering helpers
• Event handlers that only trigger state transitions
• Derived values computed through small functions rather than inline logic

Cursor Execution Steps

1. Highlight mutation sources and state inconsistencies

2. Trace event flows and UI transitions

3. Benchmark execution to reveal hotspots

4. Rewrite procedural DOM updates into structured rendering helpers

5. Validate new behavior with runtime logs

Agent Prompts

"Extract rendering logic into a pure helper function."

"Show all hidden mutations inside this UI flow."

"Rewrite this event handler to avoid side effects."

"Trace how this component updates across three interactions."

"Identify repeated computations and suggest memoization targets."

Best Practices

• Prefer immutable transforms over in-place modification
• Keep rendering logic separate from event handlers
• Minimize direct DOM access
• Validate UI flows by simulating user interactions with Cursor
• Use small utilities to reduce complexity and improve testability

Notes

This rule applies to vanilla JavaScript, lightweight UI frameworks, and DOM-driven workflows. Cursor’s execution model is ideal for surfacing UI race conditions, mutation errors, and inconsistent render flows.