본문으로 건너뛰기
cccskills
무료GitHub에 공개

web-accessibility

Build and review accessible web products using WCAG 2.2 AA. Use when implementing or reviewing forms, dialogs, navigation, keyboard flows, focus management, ARIA, color contrast, responsive UI, or framework-specific accessibility in React/Next.js, Angular, and Vue.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

aktsmm/Agent-Skills
설치 방법 보기

포함된 파일(6)

  • SKILL.md4.7 KB
  • LICENSE.txt3.2 KB
  • references/common-ui-failures.md2.3 KB
  • references/framework-patterns.md1.3 KB
  • references/review-checklist.md1.3 KB
  • references/wcag-priority-map.md2.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Web Accessibility

Product 実装や UI レビューで、a11y を後付けの監査ではなく設計・実装フローの中へ入れるための skill。

When to Use

  • Web UI を新規実装するとき
  • 既存 UI の keyboard / focus / form / ARIA / contrast 問題を直すとき
  • Dialog、navigation、table、toast、validation などの振る舞いを見直すとき
  • React / Next.js、Angular、Vue の framework 癖込みで review したいとき
  • 「merge 前に a11y の観点で見てほしい」という依頼を受けたとき

Not the Best Fit

  • Web UI ではない extension host / CLI 中心の変更
  • 既にブラウザ上で再現済みで、runtime の証跡収集と検証を主目的にするケース
    • その場合は Accessibility Runtime Tester のような runtime 検証 agent を優先する
  • Markdown 文書だけのアクセシビリティ改善

Operating Principles

  • Native HTML first. div role="button" より <button> を優先する
  • Severity first. CRITICAL を潰してから IMPORTANT、最後に SUGGESTION を見る
  • Keyboard first. マウスでしか確認していない UI は未完了とみなす
  • Name / role / state を明確にする。見た目だけで意味が伝わっても不十分
  • Review と fix を往復しやすいよう、指摘は component 単位・flow 単位で束ねる

Workflow

  1. Scope the surface 対象の page / flow / component、主要タスク、入力手段、利用者制約を確認する。
  2. Hit the blocking issues first semantics、keyboard、focus、label、error identification、accessible name を優先する。
  3. Check the UI pattern form、dialog、navigation、table、media、notification などの pattern ごとに要件を確認する。
  4. Apply framework-safe fixes React / Next.js、Angular、Vue で壊れやすい箇所を framework の流儀で直す。
  5. Re-check responsive and visual access contrast、320px reflow、reduced motion、color-only signaling を見直す。
  6. Close with a verification note 直した点、未確認の runtime リスク、残件を短く残す。

Decision Points

  • Native element で解けるなら ARIA を増やさない
  • Browser 上の focus trap、route announce、hover/focus popup を確証付きで見たいなら runtime 検証へ切り替える
  • Quick review 依頼なら review checklist を先に回す
  • 実装中なら common UI failures から直しやすい欠陥を先に潰す

Escalation Paths

  • 深い設計レビューや WCAG 観点の広い棚卸しが必要なら、WCAG priority map を基準に criterion 単位で棚卸しする
  • keyboard flow、dialog、focus return、live region は静的レビューで確定せず、実ブラウザで操作して証跡（操作手順・スクリーンショット・読み上げ結果）を残す
  • Markdown 文書の読みやすさや GitHub 上の文書 a11y はこの skill の対象外

Expected Output

  • 主要な blocking issue を severity 順に並べる
  • 修正する場合は component / flow 単位でまとめて直す
  • 未検証の runtime 挙動は「推測で完了」にせず明示する
  • Browser 実機確認が必要な場合は、可能な static guard や checklist も添える

Reference Map

Done Criteria

  • Keyboard だけで主要フローを操作できる
  • Focus が見え、閉じた dialog や overlay から適切に戻る
  • Interactive element に accessible name / role / state がある
  • Form の label、required、error、status message が関連付いている
  • Contrast、reflow、color-only signaling、motion の見落としがない
  • Framework 固有の a11y regressions を確認した
  • 未検証の runtime 挙動があれば明示した

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

agentic-workflow-guide

무료

Design, review, and debug agent workflows, and decide when a request should use a prompt, instruction, skill, agent, or hook before escalating to multi-agent design. Use for .agent.md / .instructions.md / .prompt.md / AGENTS.md work, workflow architecture, orchestration planning, scheduled automation model allocation, or when agent workflows may be overkill. Triggers on 'agent workflow', 'create agent', 'automation models', 'ワークフロー設計', 'orchestrator'.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

aktsmm/Agent-Skills262026년 10월 19일 업데이트

ai-cli-benchmark

무료

Design, run, and review fair performance, token, and cost comparisons across GitHub Copilot CLI, Codex CLI, and direct model APIs. Use for AI CLI benchmark, Copilot vs Codex, prompt-cache diagnosis, cache read/write analysis, fresh-process latency measurement, token-cost comparison, or when a benchmark must separate provider caching from local CLI caches.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

aktsmm/Agent-Skills262026년 10월 19일 업데이트

analyze-copilot-sessions

무료

Analyze historical VS Code GitHub Copilot Chat sessions by model, reasoning effort, AIU, time, reliability, workflow behavior, and external quality evidence, or safely prune workspace-scoped local chat history by age. Use for session analysis, repeated-task retrospectives, model evaluation, cost/performance analysis, and old session cleanup.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

aktsmm/Agent-Skills262026년 10월 19일 업데이트

animated-infographic

무료

Create reproducible animated infographic GIFs from structured data or measured results, with audience-language labels, explicit timing semantics, representative-frame QA, and a static fallback. Use when asked for GIF生成, animated infographic, 動的インフォグラフィック, 結果が流れる図, animated benchmark, or a blog/SNS animation whose displayed metrics must remain traceable to source data.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

aktsmm/Agent-Skills262026년 10월 19일 업데이트

archify

무료

Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid. Also use for Archify, interactive or animated HTML diagrams, インタラクティブ図, 動く構成図. When an editable .drawio file is required, use the draw.io workflow instead and treat Archify HTML only as a supplement.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

aktsmm/Agent-Skills262026년 10월 19일 업데이트

ascii-banner

무료

Generate ASCII-art text banners for terminals, READMEs, and CLI startup messages. Use when a user asks for an ASCII banner, text art, バナー, アスキーアート, or a decorative header for a script/README.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

aktsmm/Agent-Skills262026년 10월 19일 업데이트

aktsmm의 스킬 모두 보기

이 스킬의 문제 신고