SuperAPI AI 工具集

frontend-ui-engineering

前端与建站

查看项目

更新于 10-16 06:15

技能介绍

用途:在构建新 UI 组件或页面、修改现有用户界面、实施设计系统变更、添加交互功能或状态管理时使用。核心理念是前端工作只有在可访问、响应式且一致时才算完成。

主要能力与原则:一是组件架构,组件单一职责,优先组合而非继承,组件规模建议 200-400 行、上限 800 行,共享逻辑抽为 hook 或工具,样式、测试与组件代码同址。二是设计系统一致性,使用既有 design token 与变量,遵循命名约定,保持间距、字体、颜色一致,扩展设计系统而非写一次性样式。三是状态管理,尽量保持局部状态,按需提升层级,使用可用的最简方案,倾向不可变更新。四是响应式设计,默认移动优先,使用相对单位而非固定像素,在 320px、768px、1024px、1440px 标准断点测试,触摸目标不小于 44x44px。五是无障碍,遵循 WCAG 2.1 AA:可交互元素支持键盘,图片有 alt,文本对比度 4.5:1、大文本 3:1,表单有关联标签,动态内容有恰当 ARIA 属性,焦点顺序合理。

使用方式:先查阅现有组件库、文件结构与 design token;再用语义化 HTML 优先构建,必要时补充 ARIA,验证键盘导航,有条件时用屏幕阅读器测试;随后先实现移动布局再加大屏断点并逐一测试;最后做组件行为单元测试、可用的视觉回归测试、自动化无障碍审计和手工键盘导航测试。

适用场景与限制:适合构建或修改用户界面的前端工作,尤其重视无障碍与响应式。资料未提供具体框架、代码示例、安装命令、收费价格与平台支持信息,暂未提供。资料强调不应将无障碍留到后续补做,也不应以内部工具或设计系统限制为理由跳过键盘导航与屏幕阅读器验证。