webapp-ui-skill

Web App UI 技能

将此专家用于产品 UI 界面：仪表板、管理工具、内部工作流、CRM 界面、设置、数据表格，以及状态繁多的应用界面。

运行模式

• build：创建或重构应用 UI。
• audit：审查现有应用界面，并生成修复概要。
• state-coverage：检查加载、空、错误、禁用、聚焦、选中、提交中和成功状态。
• verify：运行可用的本地证据检查并报告差距。

必需工作流

1. 阅读 references/dashboard-patterns.md，了解产品 UI 布局决策。
2. 在更改应用流程或组件之前，阅读 references/state-model.md。
3. 需要稳定的输出成果时，使用 assets/state-matrix.template.md 和 assets/implementation-report.template.md。
4. 在使用任何外部服务或处理截图之前，阅读 ../../shared/privacy-policy.md。
5. 对于重大 UI 更改，使用 ../../shared/visual-verification.md。
6. 如果有源文件，运行 scripts/check_state_coverage.ts，或说明跳过的原因。
7. 如果有 URL，运行 scripts/visual_smoke_test.mjs，或说明跳过的原因。
8. 返回简洁的实施说明，包含 Ran、Skipped、Planned 和 Manual。

设计准则

• 优先考虑浏览、比较和重复操作，而非营销式排版。
• 使用紧凑的标题、稳定的网格、可预测的导航，并明确处理状态。
• 仅在展示重复条目、模态框和确实需要框定的工具时使用卡片。
• 不要添加装饰性主视觉区、嵌套卡片、单调配色，或随视口缩放的字体。
• 按钮、控件和表格必须尺寸稳定、标签清晰易读。

工具约定

• 状态覆盖率：node scripts/check_state_coverage.ts --root "$PROJECT_ROOT" --out reports/state-coverage.json。
• 视觉冒烟测试：node scripts/visual_smoke_test.mjs --url "$URL" --out reports/visual-smoke。
• 云端生成绝非默认选项。使用前必须获得明确批准，并附上数据传输说明。

验证

python3 $CODEX_SKILLS_DIR/.system/skill-creator/scripts/quick_validate.py $CODEX_SKILLS_DIR/webapp-ui-skill
python3 $CODEX_SKILLS_DIR/senior-skill-architect/scripts/lint_production_skill.py $CODEX_SKILLS_DIR/webapp-ui-skill

输出格式

Surface:
Primary workflow:
State coverage:
Ran:
Skipped:
Manual findings:
Files changed or proposed:
Verification required:
Risks: