SuperAPI AI 工具集

web-interface-conventions

前端与建站

查看项目

更新于 10-16 03:17

技能介绍

用途:该技能负责与框架无关的界面行为与呈现;具体框架的 API 与组件机制由框架类技能负责。适用于构建或审查面向用户的 Web 界面,当任务改变 HTML 与无障碍、CSS 与响应式行为、视觉呈现时使用。

准备阶段:在做出可见决策前,检查任务、已批准的设计参考和现有项目 UI。识别受影响的用户旅程、状态、过渡、内容极值、视口、主题和输入方式,只覆盖任务可能改变的变体。按任务读取对应参考:设计来源(视觉方向、文案、资源、共享组件、本地化);视觉层级与内容(页面优先级、分组、文案密度、披露、颜色强调、图标或图形);语义与无障碍(文档结构、页面标题、地标、阅读顺序、原生 HTML 语义);样式基础(CSS、浏览器支持、重置、令牌、主题、选择器、自定义属性);响应式布局(页面或组件布局、查询、内在尺寸、断点、溢出);表单(字段、验证、身份验证、选择、文件输入);交互状态(控件、焦点、反馈、对话框、图标、视觉状态);异步反馈(网络请求、加载、重试、取消、第三方 UI)。当可见的产品决策不明确且现有来源无法确定时,应向用户询问;同时继续不依赖该选择的工作。

构建阶段:将每个适用的领域参考作为一个界面契约来遵循。在实现受影响的选择前,先根据产品需求、已批准来源、浏览器支持和现有项目约定解决冲突。将无障碍视为界面正确性,而非可选的润色。

完成阶段:将完成的界面与已批准来源及所需的状态、过渡、内容和响应式行为进行比较。浏览器交互、渲染输出断言、模拟、截图和回归测试机制应交给项目的浏览器或 E2E 测试技能处理。报告任何仍未解决的必要产品决策或用户可见结果。限制:资料未提供具体代码、命令、价格或平台信息。