surface-separation
From the author
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-separation -a claude-code
Installs to .claude/skills/surface-separation/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Download .zip
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 84
Security100
Provenance66
Maintenance100
Licence100
Adoption38
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- elevation-and-depthdembrandt/dembrandt-skillsShadows and layering that lift elements above the surface. Use when designing cards, dropdowns, modals, tooltips or any floating element.Other★ 159
- interface-craftcbrock84/headcountRaises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Use this when a screen works but looks unfinished or default, when a layout feels crowded or arbitrary, when a page has no clear focal point, or when an interface needs to feel trustworthy rather than merely functional.Design★ 2.1K
- uitw93/WazaProduces distinctive production UI and screenshot-grounded visual polish. Use when building or restyling pages, components, or typography. Not for backend logic or data pipelines.Design★ 7.4K
- design-systemcbrock84/headcountBuilds and maintains the design system a product is assembled from — tokens for color, type, spacing and elevation, component contracts, and the rules that keep them coherent as the product grows. Use this when starting a new interface, when screens have drifted apart visually, when the same component exists three times in slightly different forms, or when a token or component needs adding without breaking what exists.Design★ 2.1K
- grid-layouttonone-ai/tononeDesign a layout system — spacing scale, grid columns, and layout primitives. Use when asked to "design a spacing system", "set up a layout grid", or "build layout primitives".Design★ 76
- designhashgraph-online/awesome-codex-pluginsUse for standard or complex new work before coding or planning. Also handles vague goals — clarifies before designing.Design★ 1.4K
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in