Goal
Validate React UI behavior through live interaction, visible state changes, and rapid feedback to ensure a reliable and intuitive user experience.
Rule Behavior
1️⃣ Build UI Flows by Running the App
- Observe how users interact in real time
- Validate button -> state -> DOM transitions immediately
- Keep change scope small to detect breakage early
- Fix friction before styling because broken UX loses users
2️⃣ State Management That Makes Sense
- Track what triggers state updates, not just where state lives
- Ask Agent to show unnecessary re renders or hidden triggers
- Derive state from props or context when possible
- Avoid storing values that can be computed
3️⃣ Visual Debugging of Interactions
- Simulate clicks, typing, and tabbing to reveal edge cases
- Log state transitions where behavior changes unexpectedly
- Detect stale state by identifying UI parts that do not update
4️⃣ Intent Driven Component Behavior
- Comment expected behavior clearly for Agent and reviewers
- Validate runtime matches intended UX outcomes
- Reject changes that look correct but do not behave correctly
5️⃣ Controlled Experiments for New Features
- Create isolated components to test complex interactions
- Validate lists, forms, and conditional UI states
- Keep temporary debugging code separate from production paths
6️⃣ Dependency Hygiene
- Ask why each library is required before installing
- Confirm core behavior still works after version updates
- Remove unused imports and packages during refactors
7️⃣ Confidence Before Optimization
- Correctness before performance tuning
- Identify hydration and SSR mismatches at runtime
- Ensure transitions and interactions feel smooth
Examples
- "Simulate button click and track state updates."
- "Show components that re render unnecessarily."
- "Detect stale state when form field updates."
Tool Prompts
- "Run this interaction and show DOM and state changes."
- "Explain why this component re renders multiple times."
- "Trace focus order and keyboard accessibility."
- "Test SSR hydration and show mismatched markup."
Quick Implementation Wins
- Add logging to critical interaction handlers
- Use React DevTools during test runs for clarity
- Create minimal test harness for complex forms