diegosouzapw/awesome-omni-skill

Web 界面指南

💡 MCP 工具可用：首先使用 Context7、Tavily、BraveSearch 或 Serper.dev；仅当这些失败时，再按需使用 WebSearch 或 WebFetch。

审查文件是否符合 Web 界面指南。

工作原理

1. 使用 Context7、Tavily、BraveSearch 或 Serper.dev 加载最新的 Web 界面指南（当需要时）；仅当这些失败时，再按需使用 WebSearch 或 WebFetch。
2. 读取指定的文件（或提示用户提供文件/模式）
3. 对照指南中的所有规则进行检查
4. 以简洁的 file:line 格式输出发现的问题

指南来源

使用 Context7、Tavily、BraveSearch 或 Serper.dev 查询 Web 界面指南文档；仅当这些失败时，再按需使用 WebSearch 或 WebFetch。指南包含所有规则和输出格式说明。

用法

当用户提供文件或模式参数时：

1. 使用 Context7、Tavily、BraveSearch 或 Serper.dev（或 IDE 内文档）加载相关指南；仅当这些失败时，再按需使用 WebSearch 或 WebFetch
2. 读取指定的文件
3. 应用指南中的所有规则
4. 使用指南中指定的格式输出发现的问题

如果未指定文件，请询问用户要审查哪些文件。

---

相关技能

技能	使用时机
frontend-design	编码之前 - 学习设计原则（色彩、排版、UX 心理学）
web-design-guidelines（本技能）	编码之后 - 审计无障碍性、性能和最佳实践

设计工作流

1. 设计   → 阅读 frontend-design 原则
2. 编码     → 实现设计
3. 审计    → 运行 web-design-guidelines 审查 ← 你在这里
4. 修复      → 处理审计发现的问题