精选

前端UI精通

构建生产级前端界面，涵盖无障碍访问、可复用组件和响应式设计。涵盖WCAG合规、组件架构和移动优先布局。

3 技能 13 安装次数

frontenduiaccessibilityresponsive-designcomponents

8 天前更新

安装

运行此命令，安装该技能包中的全部技能：

npx skillstore add @frontend-ui-mastery

CLI 会自动检测 Codex 和 Claude Code 文件夹；如果两者都可用，就会同时安装。

概览

使用指南

由 AI 增强

详细指南

## 概述

Frontend UI Mastery 将三种生产级前端技能 — **frontend-accessibility**、**frontend-components** 和 **frontend-responsive** — 打包为一个插件。它们共同覆盖了完整的UI生命周期：构建可组合的组件、使它们对所有用户可访问，并在不同设备间无缝适配。同一作者，在React、Vue和Svelte中保持一致的规范。

## 快速开始

1. 在你的OpenClaw工作区中安装此插件。
2. 在搭建新UI时，调用 **frontend-components** 来定义具有清晰props和最小局部状态的可复用、单一职责组件。
3. 结合 **frontend-accessibility** 实现语义化HTML、ARIA、键盘导航、焦点管理和颜色对比度 — 然后运行屏幕阅读器测试以确认WCAG合规。
4. 最后使用 **frontend-responsive** 应用移动优先断点、流式容器和触控友好尺寸，使相同组件从手机到桌面都能自适应。

## 关键命令

- `frontend-components` — 设计可组合的React/Vue/Svelte组件，具有清晰的接口和适当的封装。
- `frontend-accessibility` — 审核并修复语义化HTML、ARIA、键盘导航和屏幕阅读器兼容性，以达到WCAG合规。
- `frontend-responsive` — 使用媒体查询、相对单位和标准断点构建移动优先的响应式布局。

## 技巧

- 先构建组件外壳（`frontend-components`），然后立即运行无障碍测试（`frontend-accessibility`），最后再添加响应式样式 — 事后修复无障碍问题比一开始就内建要昂贵得多。
- 将 `frontend-responsive` 与真实设备测试（或DevTools设备模拟在 `375px`、`768px`、`1280px`）配合使用，以发现桌面优先布局可能遗漏的触控目标和重排问题。
- 与后端或数据库插件结合使用，交付完整的垂直切片：UI插件端到端地处理用户-facing层。