mcpField
P
performance

performance

github.com/plugin87开发3.1k503 次安装3 天前更新
代码仓库

关于 performance

performance 是用于诊断和改进界面速度与稳定性的设计技能，并关注缓慢或卡顿界面对无障碍体验的影响。它依据 Core Web Vitals 指标预算，提供加载、布局偏移和动画方面的指导。

主要功能

  1. 01测量 LCP、INP 和 CLS 指标
  2. 02规划优先加载与代码拆分
  3. 03预留空间以避免布局偏移
  4. 04采用合成器友好的动画
  5. 05遵循减少动态效果偏好

适用场景

  1. 01在移动设备配置下诊断 Core Web Vitals
  2. 02减少页面加载时的布局偏移
  3. 03提升低性能设备上的交互响应

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill performance

安装后在 Claude Code 中输入/performance确认已加载。

详细介绍

技能：性能

步骤 0：套件是否存在？ 此技能会读取套件中的文件。请检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 只有出现 KIT_MISSING 时，才表示安装的只有技能文件夹，这是 npx skills add 的行为。请直接说明这一点，指引用户使用 npx ux-ui-agent-skills init 或安装插件，然后停止。不要猜测无法打开的文件内容。

让 UI 快速且稳定。将性能视为无障碍问题：缓慢、卡顿的 UI 会首先影响低端设备。

步骤

  1. 阅读 ${CLAUDE_SKILL_DIR}/../../../workflows/performance.md（Core Web Vitals 目标、加载策略、布局偏移、动画性能、设计系统运行时开销）。
  2. 根据预算进行诊断：LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1。在中端移动设备配置下测量（将网络限制为慢速 4G，并将 CPU 限制为 4×）。
  3. 加载：优先渲染首屏内容（SSR/Server Components），按路由和大型组件拆分代码；延迟加载首屏以下或需交互触发的内容（Astro islands / Qwik）；预加载一种关键字体字重；使用现代响应式图片。
  4. 消除布局偏移：让骨架屏尺寸与最终内容一致，通过 aspect-ratio 预留媒体空间（${CLAUDE_SKILL_DIR}/../../../tokens/sizing.json），绝不要在已有内容上方插入内容。
  5. 动画：仅使用 transform/opacity，谨慎使用 will-change，时长设为 100-300ms（${CLAUDE_SKILL_DIR}/../../../tokens/motion.json），遵循 prefers-reduced-motion。优先使用 CSS 状态样式而非 JS，以降低 INP；进行 tree-shaking / 按组件导入。

验证（完成标准）

  • 在中端移动设备上，Lighthouse / 实测数据达到 LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1。
  • 在慢速 4G + 4× CPU 限制下，首次交互仍保持响应。
  • 骨架屏和媒体预留空间（加载时 CLS 为零）；循环动画中不得使用非合成器动画。

评论

支持 Markdown