Communitygithub.com

yagyaraj234/skills

检查前端就绪状态,基于工作差异、PR URL、发布目标或完整的仓库审计。适用于应用、UI、无障碍、性能及前端PR审查。

skills 是什么?

该技能提供了一套全面的前端就绪检查清单,用于评估Web应用程序或UI功能的准备状态。它支持多种调用模式:通过差异检查(`$frontend-readiness diff`)、PR URL(`$frontend-readiness pr <URL>`)、发布门控(`$frontend-readiness release`)或完整仓库审计(`$frontend-readiness full`)。该技能旨在与`check-readiness`系统无缝集成,允许用户选择模式或继承现有选择,同时仅评估前端表面。 技能涵盖了关键领域,包括正确性(路由渲染、表单验证、状态一致性、无控制台错误)、框架约定(API版本一致性、正确使用路由和样式库)、界面和无障碍(布局、语义元素、键盘导航、WCAG 2.2 AA合规性)、安全性(安全渲染、外部链接验证、无敏感泄露)、性能(核心Web指标、资源优化、效果清理)以及搜索和分享(元数据、Open Graph标签、Lighthouse审计)。还涵盖了工程和部署检查,如linting、类型检查、测试、环境配置和目标环境验证。 它支持多个平台(Claude Code、Cursor、Codex等),提供详细的清单,包括阻塞性问题、建议性改进以及明确的`N/A`标记规则以覆盖不适用情况。该技能对于希望将前端发布质量保证标准化的团队尤其有用,通过自动化检查捕获回归问题并确保在部署前满足所有关键标准。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/yagyaraj234/skills/tree/HEAD/skills/frontend-readiness

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

前端就绪状态

调用方式:$frontend-readiness diff、$frontend-readiness pr <URL>、$frontend-readiness release 或 $frontend-readiness full。

使用 check-readiness 中的模式、证据、结论和编辑规则。当直接调用时,在那选择模式。当被 check-readiness 调用时,保持其已选目标。仅评估前端表面。

评估适用于所选目标的检查项。将适用范围内的例外项标记为 N/A 并说明原因。不适用的情况(非公开应用的搜索与分享、无框架的框架约定)记为一行 N/A,而非每项检查一行。

阻塞区域:关键流程或路由中断、认证和权限UI、不安全地渲染用户内容、泄露的秘密、关键流程上的无障碍失败、数据驱动页面缺失错误或空状态、构建或测试失败。其他失败为建议性问题。

正确性

  • 每个范围内的路由均能通过直接导航、刷新、应用内导航、返回和前进正确渲染。
  • 每个关键流程均完成其正常路径,并在可恢复的失败中保留有用输入。
  • 表单验证输入,防止重复提交,显示可操作错误,并将错误暴露给辅助技术。
  • 客户端、服务器、URL和持久化状态在刷新、取消、过期响应和重复操作后保持一致。
  • 控制台无新错误或警告;失败的网络请求需有解释。
  • 认证和权限边界显示正确的UI,保留预期的返回路由,并处理会话过期、禁止响应和角色变更。

每个数据驱动页面都有一个明确的状态矩阵。仅当状态不可能发生或对用户无价值时,将该状态标记为 N/A。

  • 空状态: 成功的零数据结果需解释发生了什么,并提供有用的下一步操作。
  • 加载中: 进度清晰,有用的现有内容保持稳定,重复操作保持可控。
  • 骨架屏: 如果最终布局可预测且延迟明显,骨架屏需匹配布局并避免布局偏移;否则记录 N/A。
  • 部分加载: 当独立部分加载或失败时,可用内容保持可用。
  • 错误状态: 消息可操作,有用输入被保留,重试或恢复功能正常。

框架约定

跳过项目未使用的框架条目;需标明检测到的框架及版本。

  • 框架、路由器和数据加载API需与已安装版本及现有项目约定一致;记录版本及信息来源。
  • 内部导航使用检测到的框架链接组件,例如 next/link 或 @tanstack/react-router 中的 Link;原生 <a> 处理外部链接、下载、电子邮件和电话链接。
  • 路由参数、搜索参数、重定向和导航需使用框架路由器的API和钩子。
  • 静态和动态样式遵循现有框架支持的样式系统;动态值使用CSS自定义属性,除非库需要的内联定位方式需要使用内联样式。

界面和无障碍

  • 布局在每个记录的视口下正常工作,无意外溢出。长文本、缺失媒体、数据缓慢和大型集合仍保持可用。
  • 层级、间距、排版、颜色和交互反馈一致;控件覆盖悬停、聚焦、激活、禁用、加载和错误状态。
  • 破坏性操作需明确意图,并在可行时提供恢复方式。
  • 语义地标、标题、控件、标签和可访问名称与目标匹配。
  • 仅使用键盘时,能到达并操作每个交互元素,顺序符合逻辑;焦点保持可见,并在对话框、菜单、错误和路由变化中正确移动。
  • 文本和基本UI满足记录的无障碍目标(默认为WCAG 2.2 AA,除非有更严格的要求);含义不依赖颜色单独传达。
  • 图像有适当的替代文本;装饰性媒体保持静音。缩放、文本大小调整、减少动画和必要的屏幕阅读器宣告不影响流程。

弹性、隐私和安全

  • 用户控制的内容安全渲染;秘密和权限决策保持在服务器端。
  • 外部链接、重定向、上传、存储和浏览器API需验证不可信输入。外部标签页在适用时使用安全的打开行为。
  • 离线与超时行为避免数据丢失。
  • 错误UI省略敏感内部信息,而日志保留足够的诊断上下文。
  • 认证或个人数据产品需从认证和持久导航中公开《服务条款》和《隐私政策》页面;内容需与实际行为一致。
  • 当应用程序控制时,需验证Cookie、CSRF防御、响应安全头、重定向和缓存策略。
  • 分析、错误追踪和同意机制需尊重隐私要求,不得暴露个人或秘密数据。
  • 功能标志需有已验证的目标环境值;对有风险的变更,需有文档记录的回滚或禁用路径。

性能和资源

  • 在记录的环境中,针对生产构建的代表性路由,测量TTFB、LCP、INP、CLS、首次有用内容和主交互时间。
  • 每个范围内的路由需在记录预算内显示有用内容或可操作的降级方案,并接受主交互;默认预算为五秒,仅当没有更严格的产品预算时使用。
  • 生产构建输出、路由块和网络瀑布中不能有未解释的高昂成本。
  • 变更的性能优化需有可衡量的收益,并在适用时保留键盘、焦点、屏幕阅读器和离线行为。
  • 当依赖变化或组件卸载时,效果需释放监听器、订阅、观察器、待处理请求、工作器、定时器、动画帧以及防抖或节流任务。
  • 图像使用可用的框架优化、响应式尺寸和 sizes、现代格式、压缩、稳定宽高比以及正确的 eager/lazy 优先级。视频和字体需有明确的交付、降级和预加载行为。
  • 第三方、内联和阻塞脚本需有明确目的和加载优先级。

搜索和分享

仅适用于公开或可分享的路由;仅限认证用户的应用程序只需进行非索引检查。

  • 每个路由定义适当的标题和描述元数据。公开可索引的路由通过框架API设置 canonical 和 robots 意图;非生产环境及受保护环境不可被意外索引。
  • 可分享路由的Open Graph和社交媒体元数据需解析为绝对、可爬取的值。OG图像返回正确的内容类型、尺寸和替代文本;需验证渲染的标签和真实的分享预览。
  • 对于发布门控,需在记录的移动和桌面配置上对已部署的生产路由运行Lighthouse;记录性能、无障碍、最佳实践和SEO的结果及回归情况。

工程和部署

  • 格式化、lint、类型检查、测试和生产构建需通过,或记录明确的基线失败。
  • 变更的逻辑需有最小的有用自动化回归检查。
  • 环境变量、功能标志、API URL、浏览器支持和测试账户需与目标环境匹配。
  • 错误追踪、网站图标和安装图标在产品需要时正常工作。
  • 对于发布门控或影响部署的变更,需在目标环境中验证已部署的资源、路由、API、认证、头信息、重定向和缓存行为。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能