overdrive by pbakaus/impeccable
npx skills add https://github.com/pbakaus/impeccable --skill overdrive──────────── ⚡ OVERDRIVE ───────────── 》》》 进入超速模式...
将界面推向超越常规的极限。这不仅仅是视觉效果——而是利用浏览器的全部能力,让界面的任何部分都感觉非凡:一个能处理百万行的表格,一个从其触发器变形而来的对话框,一个能实时验证并提供流式反馈的表单,一个感觉像电影般的页面过渡。
调用 /frontend-design —— 它包含设计原则、反模式以及上下文收集协议。在继续之前请遵循该协议——如果尚不存在设计上下文,你必须先运行 /teach-impeccable。
对本技能尤为重要:上下文决定了“非凡”的含义。创意作品集上的粒子系统令人印象深刻。同样的粒子系统放在设置页面上就很尴尬。但是,一个具有即时乐观保存和动画状态过渡的设置页面呢?那也很非凡。在决定什么是合适的之前,先了解项目的个性和目标。
这个技能最有可能出错。不要直接跳入实现。你必须:
跳过此步骤可能导致构建出令人尴尬、需要丢弃的东西。
技术上雄心勃勃的效果几乎不可能一次成功。你必须积极使用浏览器自动化工具来预览你的工作,直观地验证结果并进行迭代。不要假设效果看起来是对的——要检查它。预计需要多轮优化。“技术上可行”和“看起来非凡”之间的差距是通过视觉迭代来弥合的,而不仅仅是代码。
正确的技术抱负完全取决于你正在处理的内容。在选择技术之前,问问自己:什么会让使用这个特定界面的用户说“哇,这真不错”?
页面、英雄区域、落地页、作品集——“哇”通常是感官上的:滚动驱动的揭示效果、着色器背景、电影般的页面过渡、响应光标变化的生成艺术。
表格、表单、对话框、导航——“哇”在于它的感觉:通过视图过渡从触发按钮变形而来的对话框、通过虚拟滚动以 60fps 渲染 10 万行的数据表格、感觉瞬间完成的流式验证表单、具有弹簧物理效果的拖放操作。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
“哇”是无形的但能被感受到:无闪烁地过滤 5 万个项目的搜索、从不阻塞主线程的复杂表单、近乎实时处理的图像编辑器。界面从不犹豫。
图表和仪表板——“哇”在于流畅性:通过 Canvas/WebGL 进行 GPU 加速渲染以处理海量数据集、数据状态之间的动画过渡、自然稳定的力导向图布局。
共同点:实现的某些方面超出了用户对 Web 界面的期望。技术服务于体验,而不是反过来。
按你试图实现的目标组织,而不是按技术名称。
@starting-style(所有浏览器)—— 仅用 CSS 为从 display: none 到可见的元素添加动画,包括进入关键帧。animation-timeline: scroll())—— 仅 CSS,无需 JS。视差、进度条、揭示序列全部由滚动位置驱动。(Chrome/Edge/Safari;Firefox:仅标志支持 —— 始终提供静态回退方案)。transition() 或 View Transitions。@property(所有浏览器)—— 注册具有类型的自定义 CSS 属性,使得 CSS 通常无法插值的渐变、颜色和复杂值能够被动画化。注意:此技能是关于增强界面的感觉,而不是改变产品的功能。添加实时协作、离线支持或新的后端功能是产品决策,而不是 UI 增强。专注于让现有功能感觉非凡。
每种技术都必须优雅降级。没有增强功能的体验也必须良好。
@supports (animation-timeline: scroll()) {
.hero { animation-timeline: scroll(); }
}
if ('gpu' in navigator) { /* WebGPU */ }
else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ }
/* CSS-only fallback must still look good */
prefers-reduced-motion。提供美观的静态替代方案。“酷”和“非凡”之间的差距在于最后 20% 的打磨:弹簧动画的缓动曲线、交错揭示中的时间偏移、让过渡感觉有物理感的微妙次要运动。不要发布第一个可行的版本——发布那个感觉理所当然的版本。
切勿:
prefers-reduced-motion —— 这是一个无障碍要求,而不是建议。记住:“技术上的非凡”不是关于使用最新的 API。而是让界面做到用户认为网站做不到的事情。
每周安装数
12.8K
仓库
GitHub 星标数
13.4K
首次出现
10 天前
安全审计
安装于
codex12.6K
opencode12.6K
github-copilot12.6K
gemini-cli12.5K
cursor12.5K
kimi-cli12.5K
Start your response with:
──────────── ⚡ OVERDRIVE ─────────────
》》》 Entering overdrive 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.
Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first.
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.
This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST:
Skipping this step risks building something embarrassing that needs to be thrown away.
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.
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"?
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.
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.
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.
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.
Organized by what you're trying to achieve, not by technology name.
@starting-style (all browsers) — animate elements from display: none to visible with CSS only, including entry keyframesanimation-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)transition() or View Transitions for DOM-based charts.@property (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate.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.
Every technique must degrade gracefully. The experience without the enhancement must still be good.
@supports (animation-timeline: scroll()) {
.hero { animation-timeline: scroll(); }
}
if ('gpu' in navigator) { /* WebGPU */ }
else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ }
/* CSS-only fallback must still look good */
prefers-reduced-motion — always. Provide a beautiful static alternative.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 :
prefers-reduced-motion — this is an accessibility requirement, not a suggestionRemember: "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.
Weekly Installs
12.8K
Repository
GitHub Stars
13.4K
First Seen
10 days ago
Security Audits
Gen Agent Trust HubPassSocketWarnSnykPass
Installed on
codex12.6K
opencode12.6K
github-copilot12.5K
gemini-cli12.5K
cursor12.5K
kimi-cli12.5K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装