Community程式設計與開發github.com

peterruiter/claude-build-framework

完整的 WCAG 2.2 AA 無障礙檢測:透過 Playwright 執行 axe-core,涵蓋所有主要頁面的淺色與深色模式、1440/390 與 320 寬度,並包含跳過連結、單一 h1、語言、可見焦點、24px 觸控目標、橫向滾動、對話框/抽屜/頁籤的鍵盤測試、手動檢查、元件合約測試、對比度修正,以及無障礙聲明頁。

claude-build-framework 是什麼?

這是一個專為 AI 代理(如 Claude Code、Cursor)設計的技能,用於執行完整的 WCAG 2.2 AA 無障礙檢測。它透過 Playwright 整合 axe-core,自動掃描所有主要頁面(含淺色/深色模式、1440、390 與 320 寬度),並檢查跳過連結、單一 h1 標題、語言屬性、可見焦點、24px 觸控目標、橫向滾動等關鍵項目。此外,它具備對話框/抽屜/頁籤的鍵盤腳本,以及手動檢查(文字間距、200% 縮放、拖曳替代、可存取驗證)。該技能支援合約測試,用於驗證共用元件的無障礙屬性(如即時區域、對比色、減少動畫),並生成已知問題清單與無障礙聲明頁。最後,它會產出「檢測前後」的違規統計與截圖報告,適合在初次公開發布前或使用者要求「無障礙檢測」、「WCAG」、「螢幕閱讀器」時執行。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/peterruiter/claude-build-framework/tree/HEAD/skills/a11y-pass

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

無障礙檢測

參考文件:${CLAUDE_PLUGIN_ROOT}/docs/accessibility.md 與 ${CLAUDE_PLUGIN_ROOT}/docs/design-systems.md。 WCAG 2.2 AA 是每個功能的完成定義之一;此檢測為在此之上的全面掃蕩。

1. 設定

  • 在產品外部固定並安裝工具:npm i --prefix <資料夾> playwright@<固定版本> axe-core@<固定版本>;A11Y_TOOLS=<資料夾>。
  • 在本地使用示範資料於暫存資料庫中執行應用程式,並使用自訂埠號。
  • 建立 tests/a11y/pages.json,列出所有主要頁面(以及透過 open 開啟的對話框),每個頁面需有 lang,並為登入頁面提供 signIn 模組。
  • 在其他代理程式較少運作時執行檢測;對共用元件進行小範圍、有針對性的修改。

2. 測量(「之前」)

node tests/a11y/axe-pages.mjs --probes --json scratch/a11y-before.json
node tests/a11y/axe-pages.mjs --probes --widths 320 --page <寬頁面>
node --test "tests/contracts/*.test.mjs"     # 淺色與深色模式下的主題對比

外加應用程式模式的鍵盤腳本(跳過連結 → 主要內容、對話框焦點陷阱與返回、最上層 Escape、頁籤清單中的方向鍵、可點選行上的 Enter)以及手動檢查:文字間距 (1.4.12)、200% 縮放、拖曳替代 (2.5.7)、冗餘輸入 (3.3.7)、可存取驗證 (3.3.8)、含表格的圖表、電子郵件(語言、呈現表格、替代文字、深色模式)。

3. 發現與修正

表格:# | 準則 | 位置 | 嚴重性 (嚴重/中等/輕微) | 已修正?。在共用元件層級修正(一個焦點環記號、一個對話框按鍵輔助、可點選行、複合按鍵、滾動區域、即時區域、滾動內距)。將每個新的可存取名稱翻譯成所有已設定的語言。為新的顏色組合新增對比色對。

4. 防護

  • 共用元件的合約測試(名稱、訊息前的即時區域存在、記號對、減少動畫、跳過連結)。
  • 將剩餘發現記錄在 tests/a11y/known.json 中,附帶原因,與無障礙聲明頁面上的已知限制內容一致(目標為 WCAG 2.2 AA、限制、聯絡方式;使用所有已設定的語言;從每個頁尾連結)。

5. 報告

「之前」→「之後」的違規計數(按表面)、按嚴重性計數(已修正/未修正)、截圖、未完成事項(螢幕閱讀器、原生殼、外部稽核)。一則「最新消息」項目。STATE.md 區段。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

peterruiter/claude-build-framework

Write one complete agent brief from the framework's template for a single piece of work (feature, fix, polish, translation, accessibility or security item), with context, scope, reserved migration slot, scratch database, ports, file ownership, the standing rules (all configured languages, WCAG 2.2 AA, light and dark, privacy, data residency, What's new, no AI attribution), the gate and the report format. Use when the user or the plan-wave skill needs a brief, or says "write a brief", "brief an agent", "delegate this".

peterruiter/claude-build-framework

Check that every tool a profile needs is installed and recent enough (git, GitHub CLI, Node.js, npm, plus the profile's own - e.g. .NET SDK, PowerShell 7, Azure CLI, Power Platform CLI, LocalDB, k6) and give the exact install command per OS for anything missing. Runs automatically at the start of new-project and quality-gate. Use when the user says "check my tools", "what do I need to install", "is my machine ready", or when a command fails with "not recognized" / "command not found".

peterruiter/claude-build-framework

Build a sync from a SaaS product to customers' Dynamics 365 / Dataverse environments and Customer Insights - Journeys (multi-tenant app with admin consent and an application user, Web API upserts, contact matching, leads, timeline notes, custom triggers, marketing lists, deep links), tested against a stand-in and a marked sandbox. Use when the owner asks for a Dynamics 365, Dataverse, Power Platform or Customer Insights - Journeys integration.

peterruiter/claude-build-framework

Apply, switch or regenerate a project's design system (the one source of colours, fonts, logos, chart, email, document and video styles for every output), check its contrast in light and dark, and add a new design system to the framework from a Claude Design System artifact. Uses scripts/design-system.mjs to generate tokens.css, tokens.ts, a Fluent UI theme, a model-driven app theme, email and chart palettes, the video-tour brand block and an Office theme mapping. Use when the user says "design system", "apply the brand", "use our house style", "switch theme", "rebrand", "regenerate the tokens", "check contrast", or "add a design system".

相關技能