SuperAPI AI 工具集

experience-lwc-rtl-validate

前端与建站

查看项目

更新于 10-15 21:43

技能介绍

用途:对指定 LWC 组件执行结构化的 RTL 国际化合规审查,产出问题报告与代码级修复,使其符合 Salesforce RTL 指南。适用于用户要求 RTL review、i18n check、RTL 合规或审计;为阿拉伯语、希伯来语、波斯语、乌尔都语等 RTL 区域发布做准备;排查 RTL 环境下的布局缺陷;在 CSS 重构后核验 SLDS 类用法。不适用于:构建新组件(用 experience-lwc-generate)、修改 SLDS 类本身(用 design-systems-slds-apply 或 design-systems-slds2-migrate)、无障碍或安全审查(单独执行),以及把修复置于功能开关之后(修复完成后再应用功能开关)。

前置条件:组件路径(modules/… 下的 LWC bundle),可访问其 HTML 模板、JS/TS 与 CSS。以知识库 RTL Expert 为唯一依据,不得凭记忆总结,报告需引用所用章节。

流程:1)确定审查范围,收集 .html、.js/.ts、.css 及同一团队拥有的子组件,记录已有功能开关(如 Aura.org.rtlPhase1FixEnabled)。2)通读 RTL Expert。3)对每个 CSS 文件运行确定性扫描:"<skill_dir>/scripts/scan-rtl-css.sh" <cssFile1> [<cssFile2> ...],输出形如 <file>:<line>: <property>: <value> -> <logical-property>: <logical-value>;内联 style="…" 需单独同样处理;空输出即无问题。可识别模式:left/right→inset-inline-start/inset-inline-end,margin-left/right→margin-inline-start/end,padding-left/right→padding-inline-start/end,text-align: left/right→start/end,border-left-/border-right-→border-inline-start-/end-,float: left/right→inline-start/end(或改用 flex/grid),transform: translateX(...) 需标记;border-radius 角简写需手工检查。4)检查 HTML/JS:仅标记普通 <img>、内联 SVG、原始 Unicode、背景图中有方向语义的图标,不标记 <lightning-icon>(含 chevronright 等方向图标,RTL 下自动镜像);确认 dir 来自 locale 而非硬编码;方向性导航的左右方向键语义需在 RTL 下交换;保留用户文本中的 RLM/LRM 标记;内联 style 物理属性按同规则处理。5)SLDS 约束优先级最高:带 _left/_right 后缀的 SLDS 工具类已 RTL 感知,不得标记;_start/_end 变体不存在,不得重命名;不得修改、重命名或删除任何 slds-* 类;若自定义 CSS 重复实现 SLDS 已处理的内容,修复方式是删除该自定义规则而非转换;SLDS 存在 RTL 缺口时补充自定义 CSS。6)按固定两段式写入 <outputDir>/rtl-review.md(## RTL 与 ## Summary,标题后空行,摘要句以句号结尾),无发现时输出 - No issues found. 并报告 0 found / 0 fixed / 0 deferred。7)应用修复:编辑 CSS/HTML/JS/TS,保留既有正确行为与既有功能开关;不删除或重命名 SLDS 类;不静默删除旧代码。8)验证:重跑审查确认已修项消失,运行 Jest 与组件级 RTL 视觉测试。

交叉引用:design-systems-slds-apply、design-systems-slds2-migrate、experience-lwc-generate;无障碍(WCAG 2.2)与安全(LWS + Product Security)为独立流程;功能开关不在本技能范围内,仅当调用方明确要求分阶段发布时单独应用。验证标准:更新后组件全部 RTL 规则通过(scan-rtl-css.sh 对全部已应用发现返回空)、未改动任何 SLDS 类、每项发现已应用或有带原因的延期说明、rtl-review.md 符合两段式结构。