Set a surface apart by one means — border, elevation or fill — and keep opacity for state. Use when designing cards, panels, list rows, toolbars or any container.
Install
npx skills add dembrandt/dembrandt-skills --skill surface-separationnpx skills add dembrandt/dembrandt-skills --skill surface-separation -a claude-code -gnpx skills add dembrandt/dembrandt-skills --skill surface-separation -a codex -ggemini skills install https://github.com/dembrandt/dembrandt-skills.git --path skills/surface-separationgh skill install dembrandt/dembrandt-skills surface-separationgit clone --depth 1 https://github.com/dembrandt/dembrandt-skills /tmp/dembrandt__dembrandt-skills
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/dembrandt__dembrandt-skills/skills/surface-separation ~/.claude/skills/surface-separation # Claude Code
cp -R /tmp/dembrandt__dembrandt-skills/skills/surface-separation ~/.agents/skills/surface-separation # Codex, Cursor, Gemini CLI, Copilot, OpenCode