SuperAPI AI 工具集

design-systems-slds-validate

设计与创作

查看项目

更新于 10-16 05:47

技能介绍

用途:审计 Lightning Web Components 的 SLDS 合规性,输出自动评分卡与人工复核结论。适用于项目或组件集的合规审计,以及改动前后的质量对比。不适用于修复违规(改用 design-systems-slds2-migrate)、新建组件(改用 design-systems-slds-apply)、仅运行 linter,也不做完整 WCAG 审计(只检查属性是否存在,不查对比度、键盘流程、屏幕阅读器行为)。

流程:1) 运行 linter:npx @salesforce-ux/slds-linter@latest lint <component-path> 2>&1,按规则统计违规;linter 不可用时跳过并标注 N/A,用其余四类重新归一化计算总分。2) 运行补充分析:node scripts/analyze-quality.cjs <component-path>,仅扫描 .css、.html、.js,检查缺失回退值、虚构 hook(T051)、hook 配对、!important、魔法像素、高 z-index、outline 移除、内联样式、SLDS 类动态操作、LBC 输入标签、图标与图片 alt、标题层级、正 tabindex、可点击 div、原生元素等。3) 人工复核加载/错误/空/禁用状态、语义 HTML 与 SLDS 蓝图合规,分为 Blocking 或 Advisory。4) 按复杂度分类后计算分数:类别分 = 100 - 严重×10 - 警告×3 - 提示×1,最低 0;权重为 Linter 30%、主题 20%、无障碍 20%、代码质量 15%、组件用法 15%。5) 用 report-format.md 模板生成报告。

限制:hook 配对按文件级而非选择器级检查;JSX/TSX/Vue/Svelte 需额外人工审查;无头组件跳过 HTML 检查;包装组件低 hook 使用不应扣分;蓝图内原生 button 可抑制 C002;LEX 外组件可能不用 LBC;测试/演示组件放宽标准;误报应标注为 suppressed 并说明理由。