精選

前端介面掌握

建構生產級前端介面，注重無障礙設計、可重用元件和響應式設計。涵蓋 WCAG 合規、元件架構和行動優先佈局。

3 技能 13 安裝次數

frontenduiaccessibilityresponsive-designcomponents

8 天前更新

安裝

執行此指令以安裝此技能包中的所有技能：

npx skillstore add @frontend-ui-mastery

CLI 會自動偵測 Codex 與 Claude Code 資料夾；如果兩者都可用，會同時安裝。

總覽

使用指南

由 AI 強化

詳細指南

## 概述

前端介面掌握將三個生產級前端技能——**frontend-accessibility**、**frontend-components** 和 **frontend-responsive**——整合為一個插件。它們共同覆蓋完整的 UI 生命週期：建構可組合的元件、讓每個用戶都能訪問，並讓它們在各種設備上無縫適配。同一位作者，React、Vue 和 Svelte 的 convention 保持一致。

## 快速開始

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 插件從端到端處理用戶面層。