Communityコーディング&開発github.com

peterruiter/claude-build-framework

WCAG 2.2 AA フルアクセシビリティパス - Playwright 経由の axe-core ですべての主要ページをライト/ダークテーマ、1440/390(リフロー用に320)で検査し、スキップリンク、単一 h1、lang、可視かつ非隠蔽フォーカス、24px ターゲット、横スクロールをプローブ、ダイアログ/ドロワー/タブ用キーボードスクリプト、手動チェック(テキスト間隔、ズーム、ドラッグ代替、アクセシブル認証)、共有コンポーネントとテーマコントラストの契約テスト、修正、理由付き既知制限、アクセシビリティステートメントページを含む。「アクセシビリティパス」「WCAG」「a11y 監査」「スクリーンリーダー」、または初回公開リリース前にユーザーが依頼した場合に使用。

claude-build-framework とは?

このスキルは、Claude エージェントに対して Web アプリケーションの WCAG 2.2 AA 準拠を達成するための体系的アクセシビリティパスを提供します。Playwright と axe-core を利用して全主要ページを自動テストし、ライト/ダーク両テーマ、複数のビューポート幅(1440/390、リフロー用に320)で検証、スキップリンク、単一 h1、言語属性、可視フォーカス、24px ターゲットサイズ、横スクロールをプローブします。自動テストに加え、ダイアログ/ドロワー/タブ用のキーボード操作スクリプト、テキスト間隔、ズーム、ドラッグ代替などの手動チェック、共有コンポーネントの契約テスト、テーマコントラストテストを実施。結果は構造化テーブルで管理し、修正はコンポーネント単位で行い、既知制限は理由と共にアクセシビリティステートメントページに記録、多言語対応も考慮します。このパスは各機能の完了基準に WCAG 2.2 AA を組み込む前提で、追加の全体的スイープとして機能し、最終レポートには違反件数の変化、スクリーンショット、未実施項目を含みます。

対応✓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に質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

アクセシビリティパス

参照: ${CLAUDE_PLUGIN_ROOT}/docs/accessibility.md と ${CLAUDE_PLUGIN_ROOT}/docs/design-systems.md。 WCAG 2.2 AA はすべての機能の完了基準に含まれています。このパスはその上で行う完全なスイープです。

1. セットアップ

  • ツールを製品の外部に固定してインストール: npm i --prefix <folder> playwright@<pinned> axe-core@<pinned>; A11Y_TOOLS=<folder>.
  • スクラッチデータベースと独自ポートでアプリをローカル実行。
  • tests/a11y/pages.json に すべての主要ページ(ダイアログは open で指定)と、ページごとの lang、 サインインページ用の signIn モジュールをリストアップ。
  • 他のエージェントがほとんど実行していないときにパスを実行。共有コンポーネントへの小さな修正を目的とする。

2. 測定(「before」)

node tests/a11y/axe-pages.mjs --probes --json scratch/a11y-before.json
node tests/a11y/axe-pages.mjs --probes --widths 320 --page <wide pages>
node --test "tests/contracts/*.test.mjs"     # ライト/ダークのテーマコントラスト

さらに、アプリのパターンに対応するキーボードスクリプト(スキップリンク→メイン、ダイアログトラップとフォーカス戻し、最上位 Escape、タブリスト内の矢印キー、クリック可能行の Enter)と手動チェック: テキスト間隔 (1.4.12)、200% ズーム、ドラッグ代替 (2.5.7)、冗長エントリ (3.3.7)、アクセシブル認証 (3.3.8)、表付きグラフ、メール(lang、プレゼンテーション表、代替テキスト、ダーク)。

3. 所見と修正

表: # | 基準 | 場所 | 重大度(重大/中/軽微) | 修正済み?。修正は共有コンポーネント単位で行う(フォーカスリングトークン 1 つ、ダイアログキーヘルパー 1 つ、クリック可能行、複合キー、スクロール領域、ライブリージョン、scroll-padding)。新しいアクセシブル名はすべて設定済みの言語に翻訳。新しい色の組み合わせにはコントラストペアを追加。

4. ガード

  • 共有コンポーネントの契約テスト(名前、メッセージ前のライブリージョン存在、トークンペア、reduced-motion、スキップリンク)。
  • 残りの所見は tests/a11y/known.json に 理由付き で記録。これは アクセシビリティステートメント ページの既知制限と同一(対象 WCAG 2.2 AA、制限、連絡先; 設定済み全言語で; 全フッターからリンク)。

5. レポート

Before → After の画面別違反数、重大度別カウント(修正済み/未修正)、スクリーンショット、未実施項目(スクリーンリーダー、ネイティブシェル、外部監査)。What's new エントリ 1 件。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".

関連スキル