depth

Create or improve visual depth so layers, surfaces, and states feel intentional, readable, and physically believable without drifting into over-styled noise.

MANDATORY PREPARATION

Users start this workflow with /depth. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.

Assess Depth Problems

Analyze where the interface feels flat, confusing, or physically inconsistent:

1. Elevation structure:
   • Are all components using the same shadow regardless of job?
   • Is it hard to tell what sits on the page versus above it?