用途 该技能面向产品型界面（dashboard、admin 工具、内部工作流、CRM 界面、设置页、数据表格与重状态应用页），用于构建、重构、审计与验证密集 Web 应用 UI。
运行模式 build：创建或重构应用 UI；audit：审查现有应用界面并产出修复简报；state-coverage：检查 loading、empty、error、disabled、focus、selected、submitting、success 等状态覆盖；verify：运行可用的本地证据检查并报告缺口。
必要流程 先阅读 references/dashboard-patterns.md 了解产品 UI 布局决策；在修改应用流程或组件前阅读 references/state-model.md；需要稳定输出产物时使用 assets/state-matrix.template.md 与 assets/implementation-report.template.md；处理外部服务或截图前使用 ../../shared/privacy-policy.md；重大 UI 变更使用 ../../shared/visual-verification.md。若有源文件，运行 scripts/check_state_coverage.ts，否则说明跳过原因；若有 URL，运行 scripts/visual_smoke_test.mjs，否则说明跳过原因。返回简明实现说明，含 Ran、Skipped、Planned、Manual。
设计准则 优先扫描、比较与重复操作，而非营销式构图；使用紧凑标题、稳定栅格、可预测导航与显式状态处理；卡片仅用于重复项、模态与真正需要框定的工具；不要添加装饰性 hero 区、嵌套卡片、单一色调色板或视口缩放排版；按钮、控件与表格需尺寸稳定、标签可读。
工具契约 状态覆盖：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。具体安装方式与收费信息资料暂未提供。