showcase

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Start your response with:

──────────── ✨ SHOWCASE ─────────────
》》》 Entering showcase mode...

Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic.

回复需以以下内容开头：

──────────── ✨ SHOWCASE ─────────────
》》》 Entering showcase mode...

让界面突破常规极限。这不只是视觉特效——而是要发挥浏览器的全部能力，让界面的任何部分都呈现非凡体验：可处理一百万行数据的表格、从触发控件变形而来的对话框、实时验证并提供流式反馈的表单，以及富有电影级质感的页面转场。

MANDATORY PREPARATION

强制准备

Users start this workflow with

/showcase

. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.

Consult the motion reference for timing, easing, choreography, and reduced-motion expectations. Consult the elevation system when ambitious effects depend on convincing depth, layering, or state transitions. Consult the ai slop detection so “extraordinary” stays specific to the product instead of becoming expensive trend cargo culting.

EXTRA IMPORTANT FOR THIS SKILL: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate.

用户通过

/showcase

启动此工作流。该 skill 激活后，需加载

$frontend-design

——其中包含设计原则、反模式以及 Context Gathering Protocol。继续之前必须遵循该 protocol；如果尚不存在设计上下文，则必须先加载

$setup

。

查阅 motion reference，了解时序、缓动、编排以及 reduced-motion 预期。

当高难度效果依赖可信的深度、层次或状态转场时，查阅 elevation system。

查阅 ai slop detection，确保“非凡”仍然与产品本身高度相关，而不是沦为盲目堆砌昂贵趋势。

此 skill 尤其重要：上下文决定“非凡”的含义。创意作品集上的 particle system 令人惊艳；同样的 particle system 放在设置页面上却会令人尴尬。但一个拥有即时 optimistic saves 和动画状态转场的设置页面？同样非同凡响。理解项目的个性和目标，再决定何种方案合适。

Propose Before Building

动手构建前先提出方案

This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST:

Think through 2-3 different directions — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like.
ask the user directly to clarify what you cannot infer. to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity).
Only proceed with the direction the user confirms.

Skipping this step risks building something embarrassing that needs to be thrown away.

该 skill 最容易出现偏差。绝对不要直接开始实现。你必须：

思考 2-3 个不同方向——考虑不同技术、野心程度和美学方法。对每个方向简要描述最终效果和体验。
直接向用户询问你无法推断的信息。 向用户展示这些方向，并在编写任何代码前获得用户的选择。说明各项取舍（浏览器支持、性能成本、复杂度）。
只有在用户确认某个方向后再继续实现。

跳过此步骤可能导致成果令人尴尬，最终不得不推倒重来。

Iterate with Browser Automation

使用 Browser Automation 迭代

Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone.

技术含量高的效果几乎不可能一次成功。你必须主动使用 browser automation 工具预览成果，对结果进行视觉验证并持续迭代。不要臆测效果看起来是否正确——要实际检查。预期需要多轮打磨。“技术可运行”与“看起来非凡”之间的差距，靠的是视觉迭代，而非仅仅写出代码。

Assess What "Extraordinary" Means Here

判断这里的“非凡”意味着什么

The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: what would make a user of THIS specific interface say "wow, that's nice"?

合适的技术野心完全取决于具体项目。在选择技术前先问：什么会让这个特定界面的用户说出“哇，太棒了”？

For visual/marketing surfaces

对视觉或营销类界面

Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor.

页面、hero section、landing page、作品集——这里的“惊艳”通常是感官层面的：滚动驱动的显现效果、shader 背景、电影级页面转场，以及响应鼠标位置的生成式艺术。

For functional UI

对功能型 UI

Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics.

表格、表单、对话框、导航——这里的“惊艳”体现在使用感受上：借助 View Transitions 从触发按钮变形而来的对话框、通过 virtual scrolling 以 60fps 渲染 10 万行的数据表格、拥有即时 streaming validation 的表单，以及采用 spring physics 的拖放交互。

For performance-critical UI

对性能敏感型 UI

The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates.

这里的“惊艳”看不见，却能被感知：搜索过滤 5 万个条目时毫无闪烁；复杂表单从不阻塞 main thread；image editor 以近实时速度完成处理。界面就是永不迟疑。

For data-heavy interfaces

对数据密集型 UI

Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally.

The common thread: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around.

图表和 dashboard——这里的“惊艳”体现在流畅性上：借助 Canvas/WebGL 对超大数据集进行 GPU 加速渲染；数据状态之间采用动画化转场；force-directed graph layout 能够自然稳定。

共同点：实现的某个方面超越了用户对 web 界面的预期。技术服务于体验，而不是反过来。

The Toolkit

工具箱

Organized by what you're trying to achieve, not by technology name.

按你想实现的目标组织，而不是按技术名称组织。

Make transitions feel cinematic

让转场呈现电影级质感

View Transitions API (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations.
@starting-style
(all browsers) — animate elements from
```
display: none
```
to visible with CSS only, including entry keyframes
Spring physics — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver.

View Transitions API（同文档：所有浏览器；跨文档：不支持 Firefox）——在状态之间实现 shared element morphing。例如 list item 扩展为 detail page，或 button 变形成 dialog。这是最接近原生 FLIP 动画的方式。
@starting-style
（所有浏览器）——仅使用 CSS 将元素从
```
display: none
```
动画到可见状态，包括入场 keyframes。
Spring physics——以 mass、tension 和 damping 营造自然运动，而不是使用 cubic-bezier。可使用 motion（原 Framer Motion）、GSAP，或自行实现 spring solver。

Tie animation to scroll position

将动画与滚动位置关联

Scroll-driven animations (
```
animation-timeline: scroll()
```
) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback)

Scroll-driven animations（
```
animation-timeline: scroll()
```
）——纯 CSS，无需 JS。视差效果、进度条和渐显序列都由滚动位置驱动。（Chrome/Edge/Safari；Firefox：仅在启用 flag 后支持——务必提供静态 fallback。）

Render beyond CSS

实现超越 CSS 的渲染

WebGL (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express.
WebGPU (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2.
Canvas 2D / OffscreenCanvas — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas.
SVG filter chains — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable.

WebGL（所有浏览器）——shader 效果、post-processing、particle system。可使用 Three.js、OGL（轻量）、regl。用于实现 CSS 无法表达的效果。
WebGPU（Chrome/Edge；Safari 部分支持；Firefox：仅在启用 flag 后支持）——下一代 GPU compute。功能比 WebGL 更强大，但浏览器支持有限。始终回退到 WebGL2。
Canvas 2D / OffscreenCanvas——自定义渲染、pixel manipulation，或通过 Web Workers + OffscreenCanvas 将高强度渲染完全移出 main thread。
SVG filter chains——使用 displacement map、turbulence、morphology 实现有机扭曲效果，并可由 CSS 制作动画。

Make data feel alive

让数据鲜活起来

Virtual scrolling — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones.
GPU-accelerated charts — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers.
Animated data transitions — morph between chart states rather than replacing. D3's
```
transition()
```
or View Transitions for DOM-based charts.

Virtual scrolling——对于包含数万个项目的表格或列表，只渲染可见行。简单场景无需库；复杂场景可使用 TanStack Virtual。
GPU-accelerated charts——对于过大的数据集，使用 Canvas 或 WebGL 渲染数据可视化，而不是 SVG/DOM。可使用 deck.gl 或基于 regl 的自定义 renderer。
Animated data transitions——在图表状态之间进行变形，而不是直接替换。可使用 D3 的
```
transition()
```
，或为基于 DOM 的图表使用 View Transitions。

Animate complex properties

为复杂属性添加动画

@property
(all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate.
Web Animations API (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography.

@property
（所有浏览器）——注册带类型的自定义 CSS property，使渐变、颜色以及 CSS 通常无法插值的复杂值都可以制作动画。
Web Animations API（所有浏览器）——由 JavaScript 驱动动画，同时具备 CSS 的性能。可组合、可取消、可逆，是复杂 choreography 的基础。

Push performance boundaries

突破性能边界

Web Workers — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank.
OffscreenCanvas — render in a Worker thread. The main thread stays free while complex visuals render in the background.
WASM — near-native performance for computation-heavy features. Image processing, physics simulations, codecs.

Web Workers——将计算移出 main thread。繁重的数据处理、图像操作、搜索索引——任何会导致 jank 的任务都应移出主线程。
OffscreenCanvas——在 Worker thread 中渲染，让 main thread 保持空闲，同时在后台完成复杂视觉效果。
WASM——为计算密集型功能提供接近原生的性能。适用于图像处理、physics simulation、codec 等场景。

Interact with the device

与设备交互

Web Audio API — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start.
Device APIs — orientation, ambient light, geolocation. Use sparingly and always with user permission.

NOTE: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary.

Web Audio API——空间音频、音频响应式可视化、声音反馈。需要用户手势才能启动。
Device APIs——设备方向、环境光、地理位置。应谨慎使用，并且始终需要获得用户许可。

注意：此 skill 关注的是提升界面的 FEEL，而不是改变产品的功能。添加实时协作、离线支持或新的后端能力属于产品决策，而不是 UI 增强。专注于让现有功能呈现非凡体验。

Implement with Discipline

有纪律地实现

Progressive enhancement is non-negotiable

渐进式增强不可妥协

Every technique must degrade gracefully. The experience without the enhancement must still be good.

css

@supports (animation-timeline: scroll()) {
  .hero { animation-timeline: scroll(); }
}

javascript

if ('gpu' in navigator) { /* WebGPU */ }
else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ }
/* CSS-only fallback must still look good */

每项技术都必须优雅降级。没有增强效果时，体验仍应保持良好。

css

@supports (animation-timeline: scroll()) {
  .hero { animation-timeline: scroll(); }
}

javascript

if ('gpu' in navigator) { /* WebGPU */ }
else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ }
/* CSS-only fallback must still look good */

Performance rules

性能规则

Target 60fps. If dropping below 50, simplify.
Respect
```
prefers-reduced-motion
```
— always. Provide a beautiful static alternative.
Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport.
Pause off-screen rendering. Kill what you can't see.
Test on real mid-range devices, not just your development machine.

目标为 60fps。如果降至 50 以下，应进行简化。
始终尊重
```
prefers-reduced-motion
```
。提供美观的静态替代方案。
仅在资源接近视口时才对其进行延迟初始化（WebGL context、WASM module 等）。
暂停屏幕外渲染。停止所有不可见内容的渲染。
在真实的中端设备上测试，而不仅仅是在开发机上测试。

Polish is the difference

打磨决定最终差距

The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable.

NEVER:

Ignore
```
prefers-reduced-motion
```
— this is an accessibility requirement, not a suggestion
Ship effects that cause jank on mid-range devices
Use bleeding-edge APIs without a functional fallback
Add sound without explicit user opt-in
Use technical ambition to mask weak design fundamentals — fix those first with other skills
Layer multiple competing extraordinary moments — focus creates impact, excess creates noise

“很酷”与“非凡”之间的差距，存在于最后 20% 的打磨中：spring animation 的缓动曲线、staggered reveal 的时间偏移，以及让转场富有物理感的微妙次级运动。不要交付第一个能够运行的版本——应交付那个让人觉得一切都水到渠成的版本。

绝不：

忽略
```
prefers-reduced-motion
```
——这是无障碍要求，不是建议
交付会在中端设备上造成 jank 的效果
使用没有可用 fallback 的前沿 API
未经用户明确选择启用就添加声音
用技术野心掩盖薄弱的设计基础——应先使用其他 skill 修复这些问题
叠加多个彼此竞争的非凡时刻——聚焦才能形成冲击力，过度只会制造噪声

Verify the Result

验证结果

The wow test: Show it to someone who hasn't seen it. Do they react?
The removal test: Take it away. Does the experience feel diminished, or does nobody notice?
The device test: Run it in a narrow browser, a medium-width browser, and a laptop/desktop browser. Still smooth?
The accessibility test: Enable reduced motion. Still beautiful?
The context test: Does this make sense for THIS brand and audience?

Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do.

Wow test：把它展示给从未见过的人看。他们会产生反应吗？
Removal test：将它移除。体验是否明显受损，还是根本没有人在意？
Device test：分别在窄屏、中等宽度和笔记本/桌面浏览器中运行。依然流畅吗？
Accessibility test：启用 reduced motion。依然美观吗？
Context test：这对于当前的品牌和受众而言合理吗？

请记住：“技术上的非凡”并不意味着使用最新的 API，而是让界面实现用户原本认为网站不可能做到的事情。