skills.rest
yogvidwankhede
yogvidwankhedeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

surface-and-depth

Standardize UI elevation and surface styling with token-based shadow systems.

1|Updated Jul 26, 2026
Search Tags:#design#ui#css#dark-mode#shadows#gradients#elevation
One-click install
npx skills add https://github.com/yogvidwankhede/vishwakarma --skill surface-and-depth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: surface-and-depth
Source: https://github.com/yogvidwankhede/vishwakarma/tree/main/.claude/skills/surface-and-depth
Command: npx skills add https://github.com/yogvidwankhede/vishwakarma --skill surface-and-depth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the issue of undifferentiated, flat, or physically incoherent UI design by providing a rigorous system for shadows, elevation, glass, and gradients.

Core Features & Use Cases

  • Elevation System: Implements a four-level depth hierarchy using contact and ambient shadows to create realistic spatial relationships.
  • Dark Mode Optimization: Provides specific rules for surface lightness and inset highlights to ensure depth is perceptible in dark themes.
  • Gradient & Glass Correction: Offers arithmetic-based guidance for creating smooth, non-banding gradients and performant, legible glass effects.

Quick Start

Apply the surface and depth design contract to the current component to ensure shadows and elevation levels follow the established lighting model.

Frequently Asked Questions about surface-and-depth

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a coherent UI elevation system for cards and modals?▼

A coherent UI elevation system standardizes depth using a four-level hierarchy of contact and ambient shadows, ensuring realistic spatial relationships across cards, modals, and dropdowns in both light and dark themes.

How do I fix CSS gradient banding for smooth interface surfaces?▼

Fixing CSS gradient banding involves applying arithmetic-based guidance to calculate color interpolation, ensuring visually smooth, non-banding surface gradients across interface components.

Does the glass effect work with backdrop-filter performance guardrails?▼

Glass effects use backdrop-filter performance guardrails to maintain legibility and rendering speed, ensuring performant, visually coherent translucent surfaces without degrading interface responsiveness.

What's the best way to standardize surface styling across light and dark themes?▼

Standardizing surface styling applies a token-based system to enforce specific shadow offsets and surface lightness steps, creating physically coherent interfaces that adapt seamlessly across light and dark modes.

Related Skills

Explore More Design & Creative Skills→
Pabloprogramador23Pabloprogramador23

reversa-design-system

Extract design tokens from CSS, Tailwind themes, and screenshots into a design-system reference.

Community
Advanced
47thtechcorner47thtechcorner
21

threejs-lighting

Configure Three.js lighting systems and shadow rendering pipelines.

Community
Intermediate
yonetim258852yonetim258852

elevation-and-depth

Apply elevation and depth design tokens to UI components for visual hierarchy.

Community
Advanced
dylantarredylantarre
38

shadow-scale

Generate layered shadow elevation tokens as CSS variables, Tailwind config, or JSON.

Community
Basic