用途:该技能适用于任何改变界面外观、交互、加载、排名或可访问性的工作,例如新建或重构页面、表单、弹窗、导航、表格、图表与组件,选择排版、颜色、间距、动效或视觉风格,审计并改进 Core Web Vitals、包体积、水合成本、无障碍、页面 SEO、视觉层级与明暗模式一致性,以及用独特美学替代通用 AI 风格。后端逻辑、基础设施、数据管道和非视觉脚本不适用。
主要能力:提供与框架无关的原则加具体检查项,覆盖 Lighthouse 性能、无障碍、最佳实践与 SEO 目标,以及 LCP、INP、CLS、TTFB、FCP、TBT 和 JS/CSS/字体预算。给出优先级栈与冲突裁决规则,例如 INP 优先于动画、对比度优先于审美、减少动效优先于动效润色。还提供渲染策略选择(SSG、SSR、CSR、ISR、静态加岛屿)、按任务与按症状的参考文件路由、多页打磨循环的 19 个阶段,以及组件提取、缺陷查找、几何检查等纪律。
使用方式:先按任务或症状表选择 2 到 3 个参考文件,避免一次加载过多;每个参考文件约 400 到 600 行,可先用 head -20 查看 YAML 前言再决定是否加载。工作流为:框定工作、规划结构、按预算构建、验证。验证需运行 Lighthouse、axe、视觉、响应式、暗色模式、减少动效、键盘与屏幕阅读器检查。多页审计时先读 audit-workflow.md。
限制:资料未提供具体安装命令、收费方式、平台支持范围或实际效果数据。技能内容会随时间过时,引用 Lighthouse 审计 ID、浏览器支持底线等规则前需重新核对。项目可对特定界面有意识地放宽预算,但应作为有记录、有理由的例外,而非默认。