用途：把界面推到常规极限之外，让任意交互部件显得非凡，例如承载百万行的表格、由触发按钮变形而来的对话框、带流式反馈的实时校验表单、电影感的页面过渡。重点在提升界面的“感受”，而非改变产品功能，协作、离线等属于产品决策。
用法：用户以 /showcase 启动。技能激活后需加载 $frontend-design（含设计原则、反模式与 Context Gathering Protocol），并按该协议执行；若无设计上下文，必须先加载 $setup。还需参考动效（时序、缓动、编排、reduced-motion 预期）、elevation 系统（深度、分层、状态过渡）与 ai slop 检测。必须先提出 2-3 个方向，说明观感与取舍（浏览器支持、性能成本、复杂度），由用户确认后再写代码；随后用浏览器自动化预览、目视核对并多轮迭代。
主要能力：电影感过渡（View Transitions API、@starting-style、弹簧物理）；滚动驱动动画（animation-timeline: scroll()）；超越 CSS 的渲染（WebGL、WebGPU、Canvas 2D/OffscreenCanvas、SVG 滤镜链）；数据可视化（虚拟滚动、GPU 加速图表、动画数据过渡）；复杂属性动画（@property、Web Animations API）；性能（Web Workers、WASM）；设备交互（Web Audio API、设备 API，需用户手势或授权）。
限制：渐进增强不可妥协，需用 @supports 与 WebGL2 回退；目标 60fps，低于 50 简化；必须尊重 prefers-reduced-motion；重资源懒初始化、离屏暂停；在中端真机测试；不得无回退使用前沿 API、不得未经同意加声音、不得用技术野心掩盖弱设计。验证方式包括 wow、移除、设备、无障碍与场景测试。URL：https://www.skills.sh/aladicf/better-web-ui/showcase。