원클릭으로 Manus에서 모든 스킬 실행

a11y-audit

스타7

포크2

업데이트2026년 5월 22일 02:04

對 Web / iOS / Android App 跑獨立無障礙審查，整合 Lighthouse / axe-core / iOS Accessibility Inspector / Android Accessibility Scanner。產出 WCAG 2.1 AA 評分報告、CVSS-like 嚴重度分級、修復建議含 code snippet。當使用者提到「a11y 審查 / accessibility audit / WCAG / Lighthouse a11y / axe-core / VoiceOver 檢查 / TalkBack 檢查 / 無障礙評分 / 字級放大測試」時觸發。配套：test-master（內建 a11y 必檢，本 skill 是深度補強）、bug-report（追 a11y bug）、regression-test（release 前 a11y 回歸）。

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

kao273183

kao273183/qa-claude-skill

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

a11y-audit

⚙️ 執行前先讀 modules/config-loader.md。

為什麼需要這個 skill

test-master 內建 a11y 必檢項是「規劃時的提醒」（每個 UI 功能要加 4 條 a11y TC），但實際 audit 需要：

跑工具（Lighthouse / axe / VoiceOver）
解析報告
對照 WCAG 標準
給修復建議含 code snippet

→ 本 skill 專做這個深度 audit。

適用場景

✅ 政府 / 金融 / 醫療 — 必須符合 WCAG 2.1 AA（法規要求）
✅ Release 前最後 a11y 守門
✅ 設計改版後系統性檢查
✅ 提報企業合規（GDPR / ADA / 歐盟 EAA）

不適用場景

❌ 規劃 a11y TC — 用 test-master（已內建）
❌ 純 UI 視覺改動 — 用 visual-regression-gen

工具對應

平台	工具	標準
Web	Lighthouse / axe-core / WAVE	WCAG 2.1/2.2
iOS	Accessibility Inspector (Xcode)	Apple HIG a11y
Android	Accessibility Scanner	Material a11y
Flutter	Flutter Inspector + axe-core (Web 模式)	WCAG + Material

WCAG 2.1 AA 4 大原則 + 13 條 criteria

原則	Criteria 範例	工具能檢
Perceivable	1.1.1 非文字內容 / 1.4.3 對比 / 1.4.4 字級縮放	✅ axe / Lighthouse
Operable	2.1.1 鍵盤可達 / 2.4.7 焦點可見 / 2.5.5 觸控目標 ≥ 44pt	✅ 大部分
Understandable	3.1.1 語言宣告 / 3.3.1 錯誤訊息 / 3.3.2 標籤	⚠️ 工具部分檢
Robust	4.1.1 解析錯誤 / 4.1.2 a11y API name+role+value	✅ axe

執行流程

Phase 1: 偵測平台 + 工具

# Web
ls package.json playwright.config.*
# iOS
ls *.xcodeproj
# Android
ls build.gradle*

Phase 2: 跑工具

Web — Lighthouse

lighthouse https://example.com --only-categories=accessibility --output=json --output=html --output-path=./a11y-report

或 axe-core (Playwright):

import AxeBuilder from '@axe-core/playwright';

test('a11y audit on homepage', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag21aa'])
    .analyze();
  expect(results.violations).toEqual([]);
});

iOS — Accessibility Inspector + XCUI

// 跑 a11y audit on UI test
func testAccessibilityHomepage() throws {
    let app = XCUIApplication()
    app.launch()
    try app.performAccessibilityAudit()
    // 若有 violation → test fail with diagnostic
}

Android — Accessibility Scanner

// Espresso a11y check
@Test fun homepageA11yScan() {
    AccessibilityChecks.enable().setRunChecksFromRootView(true)
    onView(withId(R.id.homeContainer)).check(matches(isDisplayed()))
}

Phase 3: 解析 + 統一報告

合併各平台輸出 → a11y-audit-report.md：

# A11y Audit Report · my-app · 2026-05-22

## 📊 整體
- 標準: WCAG 2.1 AA
- Lighthouse score: 87 / 100
- axe violations: 12 (3 Critical / 5 Serious / 4 Moderate)

## 🔴 Critical (必修)

### 1.4.3 對比度不足
- **頁面**: /products
- **元素**: `.product-price`（前景 #999 / 背景 #fff）
- **比率**: 2.84:1（要求 ≥ 4.5:1）
- **修法**: 改前景成 #595959 或更深
- **WCAG**: https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum

### 4.1.2 互動元件缺 name
- **元素**: `<button class="cart-icon">` 沒有 aria-label 或文字
- **修法**:
  ```html
  <button aria-label="購物車（3 件）">🛒</button>

🟡 Serious / Moderate

[5 條 Serious + 4 條 Moderate ...]

🟢 Pass (87 條)

[摘要列]

📋 修復清單

優先	Criteria	位置	估時
Critical	1.4.3 對比	/products .product-price	30 min
Critical	4.1.2 button name	/header .cart-icon	15 min
...

📈 趨勢

上次 audit (2026-04): Lighthouse 72 / 18 violations
這次: 87 / 12 violations（改善 +15 / -6）


### Phase 4: 手動補強（工具找不到的）

工具只能檢 ~40% WCAG。其他需要人工：
- 螢幕閱讀器**讀起來合理**（讀順 / label 對齊視覺）
- 鍵盤 Tab 順序符合視覺順序
- 字級放大後**內容仍可讀且不破版**
- 暗色模式對比仍達標
- 動畫對前庭障礙者安全（Reduce Motion）

skill 自動產出人工 checklist 並提醒。

### Phase 5: 自動建 ticket

互動式問：
- 為 Critical 建 JIRA Bug ticket（用 `bug-report` skill）
- 把 a11y 跑進 nightly CI

## ⚠️ 安全護欄

- ❌ 不假裝工具能檢 100%（明確標 "tooling can detect ~40% of WCAG"）
- ✅ 報告含「人工驗證」section（補工具盲區）
- ✅ Critical 自動 propose 為 P0 ticket

## 設定依賴

| 設定 Key | 用途 | 預設 |
|---------|------|------|
| `a11y_audit.standard` | WCAG 標準版本 | WCAG21AA |
| `a11y_audit.lighthouse_threshold` | Lighthouse a11y 分數門檻 | 90 |
| `a11y_audit.tools` | 啟用工具 | axe / lighthouse |
| `workflow.auto_a11y_pairing` | a11y bug 自動配對 iOS+Android | true |

## 範例

詳見 [`examples.md`](./examples.md)

이 저장소의 다른 Skills

같은 저장소

bug-report

kao273183/qa-claude-skill

協助撰寫標準化、可重現的 Bug 報告（RIDER 格式），支援互動式問答、Root Cause 分析、自動建立 JIRA ticket 並發送通知（Slack / Telegram / Line 多管道）。可從 Google Sheet 測試用例批次生成 Bug 報告。當使用者提到「寫 bug 報告」、「回報問題」、「記錄 bug」、「bug report」、「開 bug 單」、「建立 JIRA bug」，或測試發現問題需要記錄，或提供 Google Sheet 測試用例要批次建立 Bug tickets 時使用。即使使用者只是說「這個有問題」或「測試失敗了」，也應觸發。

2026-06-027

publish-regression

kao273183/qa-claude-skill

Publish manual regression test reports to S3 dashboard. Reads test results from a Google Sheet, generates an HTML report and summary JSON, uploads to S3, rebuilds the index dashboard, and invalidates CloudFront cache. Use when the user says "publish regression", "upload regression report", "publish manual test", "push regression to S3", "update dashboard", or mentions publishing/uploading regression test results to the dashboard. Also trigger when the user has finished manual regression testing and wants to make results visible on the team dashboard.

2026-06-027

qa-signoff

kao273183/qa-claude-skill

Release 上線前的 QA 放行門（go/no-go gate）。彙整各方訊號——測試通過率、未關 P0/P1 bug、回歸結果、security/compliance/a11y/效能/離線各 gate 的 blocker 數、flaky 狀態、跨平台一致性——算出 readiness 分數，套 hard/soft gate 規則產出 go / no-go 決策，並生成可簽核的 sign-off 文件（含風險聲明 + 條件式放行）。當使用者提到「放行 / sign-off / signoff / go no-go / release readiness / 上線檢查 / 出版檢查表 / QA gate / release gate / 可以上線嗎 / 放行決策 / readiness 評分」時觸發。配套：regression-test（前置，產回歸結果）、smoke-test-analyzer（測試分層通過率）、flaky-test-hunter（flaky 不該擋放行）、security-scan / compliance-test / a11y-audit（各 gate 來源）、publish-regression（放行後發報告）。

2026-06-027

regression-test

kao273183/qa-claude-skill

為每個 Release 版本生成跨平台（iOS + Android）回歸測試計劃。自動從 JIRA 撈取本次 Release 需求和最近 3 版的嚴重/重複 Bug，進行風險評估，生成回歸測試表格（Google Sheet）並估算測試天數。當使用者提到「回歸測試」、「regression test」、「release 測試」、「release QA」、「版本測試計劃」、「release 前要測什麼」，或準備進行版本發佈前的測試規劃時使用。即使使用者只是說「這個版本要測什麼」、「準備 release」、「QA checklist」，也應觸發。

2026-06-027

llm-quality-eval

kao273183/qa-claude-skill

AI / LLM 應用品質評估專屬流程。覆蓋幻覺（hallucination）/ 事實性（groundedness）、相關性、結構化輸出合法性、prompt injection 抵抗、安全/毒性、成本（$/req）、延遲（p95）、token 用量、回歸（eval set）、一致性、拒答校準、RAG 檢索品質。整合 promptfoo / DeepEval / Ragas / LLM-as-judge + golden dataset + deterministic seed。當使用者提到「LLM 測試 / AI 品質 / 幻覺 / hallucination / groundedness / prompt injection / eval / 評估集 / RAG 評估 / LLM-as-judge / 模型回歸 / AI app 品質 / token 成本」時觸發。配套：property-based-test-gen（fuzz prompt）、security-scan（injection 屬安全）、performance-test-gen（LLM API 延遲/壓力）、test-data-factory（eval 資料）、bug-report。

2026-06-027

oauth-flow-test

kao273183/qa-claude-skill

OAuth 2.0 / OIDC / SSO 登入流程測試專屬流程。覆蓋 authorization code + PKCE、token 刷新、access/refresh token 過期、refresh token 輪替、登出/撤銷、多 IdP（Google / Apple / Facebook / 企業 SSO）、deep link 重導、state/nonce CSRF 防護、scope/consent、silent renew、錯誤路徑（拒絕授權 / code 過期）。整合 iOS（ASWebAuthenticationSession）/ Android（Custom Tabs + AppAuth）/ Web（redirect + PKCE）/ BE（token 驗簽）。當使用者提到「OAuth / OIDC / SSO / 登入流程測試 / token 刷新 / refresh token / PKCE / 授權碼 / 第三方登入 / Google 登入 / Apple 登入 / single sign-on / token 過期 / 授權測試」時觸發。配套：security-scan（token 漏洞）、compliance-test（同意/個資）、test-automation（登入 UI test）、offline-mode-test（token 刷新斷線）、bug-report。

2026-06-027

name	a11y-audit
description	對 Web / iOS / Android App 跑獨立無障礙審查，整合 Lighthouse / axe-core / iOS Accessibility Inspector / Android Accessibility Scanner。產出 WCAG 2.1 AA 評分報告、CVSS-like 嚴重度分級、修復建議含 code snippet。當使用者提到「a11y 審查 / accessibility audit / WCAG / Lighthouse a11y / axe-core / VoiceOver 檢查 / TalkBack 檢查 / 無障礙評分 / 字級放大測試」時觸發。配套：test-master（內建 a11y 必檢，本 skill 是深度補強）、bug-report（追 a11y bug）、regression-test（release 前 a11y 回歸）。
disable-model-invocation	false
allowed-tools	Read, Grep, Glob, Write, Edit, Bash
argument-hint	[URL / App 平台 / 元件路徑] [--standard=WCAG21AA\|WCAG22AA\|Section508]

a11y-audit

⚙️ 執行前先讀 modules/config-loader.md。

為什麼需要這個 skill

test-master 內建 a11y 必檢項是「規劃時的提醒」（每個 UI 功能要加 4 條 a11y TC），但實際 audit 需要：

跑工具（Lighthouse / axe / VoiceOver）
解析報告
對照 WCAG 標準
給修復建議含 code snippet

→ 本 skill 專做這個深度 audit。

適用場景

✅ 政府 / 金融 / 醫療 — 必須符合 WCAG 2.1 AA（法規要求）
✅ Release 前最後 a11y 守門
✅ 設計改版後系統性檢查
✅ 提報企業合規（GDPR / ADA / 歐盟 EAA）

不適用場景

❌ 規劃 a11y TC — 用 test-master（已內建）
❌ 純 UI 視覺改動 — 用 visual-regression-gen

工具對應

平台	工具	標準
Web	Lighthouse / axe-core / WAVE	WCAG 2.1/2.2
iOS	Accessibility Inspector (Xcode)	Apple HIG a11y
Android	Accessibility Scanner	Material a11y
Flutter	Flutter Inspector + axe-core (Web 模式)	WCAG + Material

WCAG 2.1 AA 4 大原則 + 13 條 criteria

原則	Criteria 範例	工具能檢
Perceivable	1.1.1 非文字內容 / 1.4.3 對比 / 1.4.4 字級縮放	✅ axe / Lighthouse
Operable	2.1.1 鍵盤可達 / 2.4.7 焦點可見 / 2.5.5 觸控目標 ≥ 44pt	✅ 大部分
Understandable	3.1.1 語言宣告 / 3.3.1 錯誤訊息 / 3.3.2 標籤	⚠️ 工具部分檢
Robust	4.1.1 解析錯誤 / 4.1.2 a11y API name+role+value	✅ axe

執行流程

Phase 1: 偵測平台 + 工具

# Web
ls package.json playwright.config.*
# iOS
ls *.xcodeproj
# Android
ls build.gradle*

Phase 2: 跑工具

Web — Lighthouse

lighthouse https://example.com --only-categories=accessibility --output=json --output=html --output-path=./a11y-report

或 axe-core (Playwright):

import AxeBuilder from '@axe-core/playwright';

test('a11y audit on homepage', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag21aa'])
    .analyze();
  expect(results.violations).toEqual([]);
});

iOS — Accessibility Inspector + XCUI

// 跑 a11y audit on UI test
func testAccessibilityHomepage() throws {
    let app = XCUIApplication()
    app.launch()
    try app.performAccessibilityAudit()
    // 若有 violation → test fail with diagnostic
}

Android — Accessibility Scanner

// Espresso a11y check
@Test fun homepageA11yScan() {
    AccessibilityChecks.enable().setRunChecksFromRootView(true)
    onView(withId(R.id.homeContainer)).check(matches(isDisplayed()))
}

Phase 3: 解析 + 統一報告

合併各平台輸出 → a11y-audit-report.md：

# A11y Audit Report · my-app · 2026-05-22

## 📊 整體
- 標準: WCAG 2.1 AA
- Lighthouse score: 87 / 100
- axe violations: 12 (3 Critical / 5 Serious / 4 Moderate)

## 🔴 Critical (必修)

### 1.4.3 對比度不足
- **頁面**: /products
- **元素**: `.product-price`（前景 #999 / 背景 #fff）
- **比率**: 2.84:1（要求 ≥ 4.5:1）
- **修法**: 改前景成 #595959 或更深
- **WCAG**: https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum

### 4.1.2 互動元件缺 name
- **元素**: `<button class="cart-icon">` 沒有 aria-label 或文字
- **修法**:
  ```html
  <button aria-label="購物車（3 件）">🛒</button>

🟡 Serious / Moderate

[5 條 Serious + 4 條 Moderate ...]

🟢 Pass (87 條)

[摘要列]

📋 修復清單

優先	Criteria	位置	估時
Critical	1.4.3 對比	/products .product-price	30 min
Critical	4.1.2 button name	/header .cart-icon	15 min
...

📈 趨勢

上次 audit (2026-04): Lighthouse 72 / 18 violations
這次: 87 / 12 violations（改善 +15 / -6）


### Phase 4: 手動補強（工具找不到的）

工具只能檢 ~40% WCAG。其他需要人工：
- 螢幕閱讀器**讀起來合理**（讀順 / label 對齊視覺）
- 鍵盤 Tab 順序符合視覺順序
- 字級放大後**內容仍可讀且不破版**
- 暗色模式對比仍達標
- 動畫對前庭障礙者安全（Reduce Motion）

skill 自動產出人工 checklist 並提醒。

### Phase 5: 自動建 ticket

互動式問：
- 為 Critical 建 JIRA Bug ticket（用 `bug-report` skill）
- 把 a11y 跑進 nightly CI

## ⚠️ 安全護欄

- ❌ 不假裝工具能檢 100%（明確標 "tooling can detect ~40% of WCAG"）
- ✅ 報告含「人工驗證」section（補工具盲區）
- ✅ Critical 自動 propose 為 P0 ticket

## 設定依賴

| 設定 Key | 用途 | 預設 |
|---------|------|------|
| `a11y_audit.standard` | WCAG 標準版本 | WCAG21AA |
| `a11y_audit.lighthouse_threshold` | Lighthouse a11y 分數門檻 | 90 |
| `a11y_audit.tools` | 啟用工具 | axe / lighthouse |
| `workflow.auto_a11y_pairing` | a11y bug 自動配對 iOS+Android | true |

## 範例

詳見 [`examples.md`](./examples.md)