SuperAPI AI 工具集

frontend-quality-guardrails-cn

前端与建站

查看项目

更新于 10-16 06:23

技能介绍

用途:作为前端实现与审查的质量守门层,叠加在项目现有前端规范之上。适用于 HTML、CSS、React、Vue、Svelte、Next.js、Tailwind、shadcn/ui、Ant Design、表单、表格、仪表盘、弹窗、导航与响应式布局等任务;不适用于无可见 UI 的后端、CLI、数据库或基础设施任务,也不用于品牌设计、插画、Logo 或图片生成、像素级设计还原及正式 WCAG 合规审计。

主要能力:默认假设标签、姓名、URL、ID、价格、翻译文本、用户输入、错误信息、表格单元格、徽章、面包屑、Tab 和按钮文案都可能比设计稿更长,并对文本容器明确换行、限行、截断、滚动或自适应策略。核心清单包括:在 flex/grid 文本子项补 min-width: 0 或 min-height: 0;必要时使用 overflow-wrap、text-overflow、line-clamp 或滚动;用极端内容与多视口验证。深度参考文件包括 code-review-checklist.md、visual-standards.md、browser-verification.md。

用法:先识别框架、样式系统、组件库、断点、字体尺度、间距 token 和图标库,复用现有组件与工具类;找出文本风险面;明确每个文本容器预期行为;做小而局部的 CSS/布局修复,除非用户明确要求重设计,否则保留现有设计系统、组件 API、设计 token、间距尺度和框架约定。验证时测试窄屏手机、平板、桌面与宽屏,覆盖超长无空格字符串、长自然语言、中英文混排、URL、空值和密集列表,可行时用浏览器截图或 DOM 检查。

限制:不引入新设计系统;不靠 overflow: hidden 掩盖问题;不对可读正文默认用 word-break: break-all;不截断表单错误、关键警告、价格、日期或危险操作文案;不使用随机 z-index、绝对定位或负 margin 修溢出;截断时必须提供完整值访问路径,并考虑键盘焦点、屏幕阅读器与 RTL 等国际化情形。

该技能的具体收费、价格、平台与安装方式暂未提供。