Does it support complex UI layering like modals and tooltips?

Yes, it includes an Overlay Stacking Diagram feature that visualizes how multiple elevated surfaces interact and cast shadows on one another.

Does this skill generate code or visual designs?

It generates HTML artifacts that serve as wireframe specimens and diagrams, allowing developers to visualize and agree on shadow and shape tokens before implementation.

What is the primary purpose of the Elevation & Shape skill?

It is designed to evaluate and standardize the Z-axis strategy of a UI, specifically focusing on how shadows, surface layering, and border radii contribute to visual hierarchy.

How does it help with brand consistency?

By analyzing corner treatments and radii against the project brief, it ensures the 'softness' or 'sharpness' of the UI matches the intended brand personality.

Elevation & Shape Design Critique

Name: Elevation & Shape Design Critique
Author: metedata

bymetedata

0•

デザインツール

Standardizes UI depth, shadow systems, and border radius treatments through automated design critiques and interactive HTML wireframes.

The Elevation & Shape skill is a specialized design critique tool for Claude Code that helps developers and designers establish a coherent visual language for depth and form. By generating structured elevation diagrams and shape specimens, it ensures that Z-axis strategies—such as shadow scales and surface layering—align with brand identity and functional hierarchy. This skill is essential during the compositional phase of UI design, providing a systematic way to evaluate how surfaces interact, how shadows communicate importance, and how corner treatments influence overall brand tone before moving into high-fidelity color systems.

主な機能

010 GitHub stars

02Produces 3D stacking diagrams to visualize complex UI layer interactions and overlays

03Evaluates shadow systems for consistency, light source logic, and hierarchical clarity

04Generates interactive HTML elevation diagrams showing shadow scales and surface levels

05Defines standardized border-radius scales and corner treatment rules for design consistency

06Maps shape language to brand tone, from sharp enterprise styles to soft consumer aesthetics

ユースケース

01Establishing a design system's elevation and shadow tokens during early-stage UI development

02Reviewing and refining the layering logic for complex web applications with many modals and overlays

03Synchronizing shape language across buttons, cards, and inputs to ensure a cohesive brand identity

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-elevation-shape

For use in Claude.ai and ChatGPT

Download Skill