用途：depth 用于创建或改进界面的视觉深度，让图层、表面和交互状态显得有意为之、可读且符合物理直觉，而不至于变成过度修饰的噪音。它属于 better-react-web-ui 技能集，来源为 aladicf/better-react-web-ui。
主要能力：评估界面中高度结构、表面处理、交互状态和克制程度的问题；规划深度系统，包括 3–5 个语义高度层级、表面角色（基础、凸起、凹陷、按下、拖拽）、层叠方式与需要削减的效果；系统化构建高度系统、凸起与凹陷元素、两部分阴影逻辑、按下与拖拽状态、重叠与分层，以及通过表面颜色实现的扁平深度。
使用方式：技能要求先阅读 frontend-design 并遵循其 Context Gathering Protocol，复用已有上下文，只询问关键缺口。若无法从代码库推断，需直接向用户确认。随后按评估、规划、构建、验证的流程执行，并参考高度系统、表面分离和图像处理相关指引。
适用场景：React Web 界面中需要区分页面元素与浮层、表达按下与拖拽等物理状态、通过重叠澄清信息层级，或用表面颜色替代阴影表达深度时。
限制与原则：不要对所有组件使用同一种投影；不要在颜色或间距更合适时添加重阴影；不要让按钮、卡片、面板和模态框高度相同；不要让写实感压过清晰度；不要使用无语义含义的深度效果。深度应解释表面、状态和分层，效果不应比含义更响。验证时关注图层清晰度、状态清晰度、一致性和克制程度。具体安装命令与代码示例暂未提供。