design-modelisted

## Overview Cursor Design Mode lets users point, click, draw, and speak to direct UI changes — giving you spatial context, component identity, and visual relationships. This skill teaches you to use that context effectively: make targeted, precise edits instead of broad rewrites. ## When to Use - User selected element(s) in the integrated browser - User drew an annotation highlighting a region - User gave voice instruction about a visual change - You received DOM context, layout data, or element identity from Design Mode - Task involves CSS, layout, spacing, color, typography, or component styling - User says "make this look like X" or "fix this button" with visual context ## Process When Design Mode provides visual context: ``` 1. IDENTIFY — What exact element(s) were selected? Which component file owns them? 2. SCOPE — Change ONLY what was pointed at. Don't refactor surrounding code. 3. PRESERVE — Keep existing styles, classes, and behavior. Only modify what was asked. 4. TARGETED — Make the minimal CSS/JSX change that achieves the visual result. 5. VERIFY — After edit, confirm the change renders correctly (hot-reload shows result). ``` ## Key Principles ### Precision Over Ambition Design Mode gives you a SPECIFIC element. Don't: - Refactor the entire component when only one style was requested - Change the component's API when only its appearance was pointed at - Touch logic when only visuals were selected DO: - Find the exact file and line for the selected eleme