Surfaces and depth skill.
Teaches Claude Code, Codex, Cursor and other AI coding agents the physical layer of UI: one depth ladder, precise shadows and hairlines, matching corner radii, and buttons and inputs with real material.
Depth that looks expensive is usually quiet: one shade lighter, one thin line, one soft shadow. Depth that looks cheap piles borders, rings, glows and gradients onto every box. This skill gives your agent a single elevation system, with one recipe per level for dark and light themes that it reuses across cards, dialogs, menus, buttons and inputs.
- Skill
wensity-surfaces- Plan
- Included with Wensity Pro
- Loads when
- Making or restyling anything raised: cards, panels, dialogs, menus, buttons, fields, sidebars
- Works in
- Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI, OpenCode
- Format
- Agent Skills (SKILL.md), plain files in your project
- Pack
- One of the Wensity design skills for AI coding agents
Install
1. Sign in once. The CLI asks for an API token from your dashboard and saves it, so you never paste it into a chat.
pnpm dlx wensity@latest login
npx wensity@latest login
yarn dlx wensity@latest login
bunx wensity@latest login
2. Add the skill. It goes into every agent the CLI finds in your project.
pnpm dlx wensity@latest skills add wensity-surfaces
npx wensity@latest skills add wensity-surfaces
yarn dlx wensity@latest skills add wensity-surfaces
bunx wensity@latest skills add wensity-surfaces
Surfaces and depth comes with Wensity Pro, together with every Pro skill, component, block and template.
Get ProWhen it loads
You never call a skill by name. Your agent reads the short description at the top of every installed skill and loads this one when the work calls for it. Requests like these bring it in:
- The cards and buttons look flat and cheap. Give them proper depth.
- Clean up all the borders and shadows on this page.
- Make the inputs and buttons feel more solid.
What it covers
- The depth ladder
- Four levels from the page to modals, each with one recipe for dark and light themes.
- Shadows and hairlines
- Two-layer shadows that look real, and borders that separate without boxing everything in.
- Radius
- A scale that grows with size, and concentric corners when one rounded thing sits inside another.
- Buttons and inputs
- Primary, secondary and ghost buttons and fields, with fill, border, pressed and focus states matched to a flat or a raised design direction.
- Glass, media and icons
- When backdrop blur earns its cost, how to frame images, and one consistent icon style.
- Texture and overlays
- Fine grain on large dark gradients instead of pattern wallpapers, scrims behind modals, and sticky headers over scrolling content.
Stack four layers
A project card on the page, a share dialog above it and the dialog's menu on top. On which side can you still tell which layer is closest to you?
Without the skill
Spring catalogue
42 photos, 3 layouts. Edited by Ines 2 hours ago.
Share Spring catalogue
People with access can edit.
Without the skill: Every layer is the same grey box with the same heavy shadow, so the dialog, the menu and the card all sit at one height. The field inside the dialog is yet another box.
With the skill
Spring catalogue
42 photos, 3 layouts. Edited by Ines 2 hours ago.
Share Spring catalogue
People with access can edit.
With the skill: Each layer has its own level: the card lifts a little, the menu more, the dialog most, over a scrim. On dark the higher layers also get lighter. The field inside the dialog is a tone step, not one more box.
Build a shadow from two layers
The same invoice card with one wide grey shadow and with two tuned layers. Change the page colour, then pull the layers apart to see what each one does.
Without the skill
Invoice 2041
$4,280.00
Harbor Studio, due Nov 28
Without the skill: One wide grey shadow with no offset. It smudges evenly on every side, so the card looks pressed into the page instead of resting on it, and grey goes dirty on colour.
With the skill
Invoice 2041
$4,280.00
Harbor Studio, due Nov 28
With the skill: A tight layer where the card meets the page and a soft, wider one pulled in at the sides. Both are dark ink falling downward, so they hold on any page colour.
Key rules
- One depth system
- Each level has one recipe. Things inside a level use a tone step, not another shadowed box.
- No cards in cards
- A bordered box around something already grouped by space only adds weight.
- Radius follows size
- Bigger surfaces get bigger corners, and neighbors never differ by a pixel or two.
- Glass needs something behind it
- Over a flat background, blur is just a slower grey box.
- No glow
- Colored blurred halos around buttons and cards are replaced by a precise shadow and a highlight.
- Pressed is immediate
- Every button shows a clear fill, a visible focus ring and an instant pressed state.
Line up nested corners
A rounded photo inside a rounded card. Drag the padding and watch the two corner curves: they look right only when they share a centre.
Without the skill
Booksellers of Lisbon
A walking route through 9 shops, 3.2 km
Without the skill: The photo copies the panel's corner, so the gap pinches at each corner. The more padding, the worse it looks.
With the skill
Booksellers of Lisbon
A walking route through 9 shops, 3.2 km
With the skill: The photo's corner shrinks as the padding grows, so both curves share one centre and the gap stays even.
Move glass over a busy photo
Drag the panel across a bookshop under a bright skylight. Glass only earns its place when the text on it stays readable over every part of the picture.
Without the skill
Livraria Bertrand
Rua Garrett 73, Chiado. The oldest bookshop still open.
Open until 22:00
Drag the panel, or focus it and use the arrow keys. Hold Shift to move further.
Without the skill: A faint white wash with a light blur lets every book spine and lamp show through, so the white text vanishes over the skylight and fights the shelves everywhere else.
With the skill
Livraria Bertrand
Rua Garrett 73, Chiado. The oldest bookshop still open.
Open until 22:00
Drag the panel, or focus it and use the arrow keys. Hold Shift to move further.
With the skill: Tinted glass with a stronger blur calms the busy picture behind it, and a hairline with a top highlight gives it an edge. The text stays readable over the skylight and the shelves alike.
Files
Everything installs as plain files in your project, in a folder named after the skill.
SKILL.md- The depth ladder, the recipes and the checklist.
Works well with
Color and dark mode
ProOKLCH role tokens, true neutral greys, one accent, both themes, and a script that checks contrast and gamut.
Motion and animation
ProWhen to animate, six duration tiers, four curves, springs without overshoot, reduced motion and 18 recipes.
Accessibility and UI states
ProEvery interaction and data state, plus keyboard, touch, zoom, forced colors and screen readers.