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

accessibility-audit

WCAG 2.2 Level AA accessibility audit for web applications. Checks perceivable (alt text, color contrast, captions), operable (keyboard navigation, focus management, WCAG 2.2 new criteria), understandable (labels, error messages), and robust (ARIA, screen reader compatibility). Produces violation table with WCAG criterion IDs and remediation. Triggers: accessibility audit, WCAG, a11y, screen reader, keyboard navigation, color contrast, ARIA audit, 無障礙, 可及性.

Manus에서 실행

스타0

포크0

업데이트2026년 3월 24일 01:44

출처

Roger-235

Roger-235/my_skill_repo

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

설치 명령

다운로드

Manus에서 실행

유용한 대상SOC

웹 개발자컴퓨터 및 수학직15-1254L4

파일 탐색기

2 개 파일

SKILL.md

readonly

이 저장소의 다른 Skills

같은 저장소

skill-readme-sync

Roger-235/my_skill_repo

Auto-trigger after every edit to a SKILL.md file. Checks whether the README.md still accurately describes the current state of the SKILL.md; if any section is out of sync, proposes README updates and waits for confirmation. Trigger when: SKILL.md was just edited, skill file was updated, skill was modified, checking if README matches skill. Do not trigger when only the README.md was edited, when creating a brand-new skill (skill-audit handles that), or when no SKILL.md was changed.

2026-03-240

epic-design

Roger-235/my_skill_repo

Builds cinematic, immersive websites with 2.5D depth effects, parallax scrolling, and premium animations using flat PNG assets, CSS, and JavaScript (GSAP). Trigger when: epic design, cinematic website, immersive landing page, 2.5D parallax, premium animations, Apple-style scroll, depth layers, scroll storytelling, award-winning design, luxury brand site, animated hero section. Do not trigger for basic UI components, standard layouts, or backend work.

2026-03-240

project-bootstrap

Roger-235/my_skill_repo

Scaffolds a production-ready project from scratch: auto-detects stack, creates Clean Architecture directory structure, generates Dockerfile (multi-stage), GitHub Actions CI/CD, linting config, pre-commit hooks, .env.example, health check endpoint, and test infrastructure. One command to go from empty folder to runnable project skeleton. Triggers: bootstrap project, scaffold project, new project setup, create project, start project, initialize codebase, 建立新專案, 初始化專案, 專案架構.

2026-03-240

slo-engineer

Roger-235/my_skill_repo

Defines Service Level Objectives (SLOs) and SLIs for a service: identifies the right metrics to measure, sets realistic targets, calculates error budgets (30-day rolling), and generates burn-rate alert rules. Outputs an SLO spec document plus Prometheus/alertmanager configuration. Triggers: SLO, SLI, error budget, service level objective, reliability target, 99.9%, uptime, latency target, burn rate alert, 服務可靠性, 服務等級.

2026-03-240

office-hours

Roger-235/my_skill_repo

YC-style product brainstorming partner: asks six forcing diagnostic questions to expose real demand, competitive dynamics, target users, and assumptions before any code is written. Two modes: Startup (validate idea viability) and Builder (ship something delightful fast). Produces a design document, never code. Trigger when: office hours, help me think through this, validate my idea, product brainstorm, should I build this, 想法驗證, 產品腦力激盪, 開始之前先想清楚. Do not trigger when the user has already decided what to build and wants implementation help.

2026-03-240

spec-writer

Roger-235/my_skill_repo

Spec-first methodology: converts a user request or feature idea into a structured specification document before any code is written. Clarifies scope, surfaces ambiguities, defines interface contracts, and produces a spec.md that gates implementation. Triggers: write a spec, spec first, define requirements, before coding, 寫規格, 先寫 spec, feature spec, technical spec.

2026-03-240

# Run axe-core via CLI npx axe-core-cli <url> --include main --reporter json 2>/dev/null # Or Lighthouse accessibility audit npx lighthouse <url> --only-categories=accessibility --output json 2>/dev/null | \ jq '.categories.accessibility.score, .audits | to_entries[] | select(.value.score < 1)'

Criterion

Check

Common Failure

1.1.1 Non-text Content

Every <img> has meaningful alt; decorative images use alt=""

<img src="logo.png"> with no alt

1.3.1 Info & Relationships

Structure conveyed via semantic HTML, not visual styling only

<div class="heading"> instead of <h2>

1.3.5 Identify Input Purpose

autocomplete attributes on personal data fields

Missing autocomplete="email"

1.4.1 Use of Color

Color is not the only means of conveying information

Red-only error indicators

1.4.3 Contrast (Min)

Text contrast ≥ 4.5:1 (3:1 for large text ≥18pt/14pt bold)

Light gray on white

1.4.4 Resize Text

Content usable at 200% zoom without scrolling horizontally

Fixed-width containers

1.4.10 Reflow

Content reflows at 320px width without 2D scrolling

Tables/cards breaking layout

1.4.11 Non-text Contrast

UI components (focus rings, form borders) ≥ 3:1 contrast

Faint input borders

Criterion

Check

Common Failure

2.1.1 Keyboard

All functionality available via keyboard

Click-only dropdowns

2.1.2 No Keyboard Trap

Focus can always be moved away with keyboard

Modal dialogs trapping focus

2.4.3 Focus Order

Tab order is logical and matches visual layout

DOM order mismatches visual

2.4.4 Link Purpose

Link text is meaningful in isolation

"Click here", "Read more"

2.4.7 Focus Visible

Keyboard focus indicator is always visible

CSS outline: none globally

2.4.11 Focus Not Obscured (new 2.2)

Sticky headers/footers don't fully cover focused element

Sticky nav covering inputs

2.4.12 Focus Not Obscured (Enhanced) (new 2.2)

Focused element is fully visible

—

2.5.3 Label in Name

Visible label text included in accessible name

Icon buttons without text

2.5.7 Dragging Movements (new 2.2)

All drag operations have single-pointer alternative

Drag-only sorting

2.5.8 Target Size (new 2.2)

Interactive targets ≥ 24×24 CSS pixels

Small icon buttons

Criterion

Check

Common Failure

3.1.1 Language of Page

<html lang="en"> set

Missing or wrong lang attribute

3.2.2 On Input

No automatic context change on focus

Auto-submit on radio select

3.3.1 Error Identification

Form errors identified in text, not color only

Red border without message

3.3.2 Labels or Instructions

All form fields have visible labels

Placeholder-only inputs

3.3.7 Redundant Entry (new 2.2)

Users not asked to re-enter info already provided

Shipping = billing re-entry

3.3.8 Accessible Authentication (new 2.2)

No cognitive function test required for auth

CAPTCHA without alternative

<div onclick="submit()">Submit</div>  <button aria-label="Close dialog">X Cancel</button>  <button aria-hidden="true" tabindex="0">Click me</button>  <div id="status"></div>  <label>Email</label><input type="email" />

Contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L = relative luminance Required: - Normal text (<18pt, <14pt bold): ≥ 4.5:1 - Large text (≥18pt, ≥14pt bold): ≥ 3:1 - UI components & focus indicators: ≥ 3:1

╔══════════════════════════════════════════════════╗ ║ ACCESSIBILITY AUDIT — WCAG 2.2 Level AA ║ ║ Score: [n]/100 Violations: [n] ║ ╚══════════════════════════════════════════════════╝ CRITICAL (must fix before launch) [1.4.3] src/components/Button.tsx Contrast ratio: 2.8:1 (required: 4.5:1) Colors: #767676 on #FFFFFF Fix: Change text color to #595959 or darker [2.4.7] src/styles/global.css:14 Pattern: outline: none on :focus Fix: Remove or replace with visible focus style HIGH (required for AA compliance) [1.1.1] src/components/Avatar.tsx:8 <img src={user.photo}> — missing alt attribute Fix: alt={`${user.name} profile photo`} [2.5.8 NEW] src/components/IconButton.tsx Target size: 16×16px (required: 24×24px) Fix: Add min-width/min-height: 24px or padding MEDIUM (best practice) [3.3.2] src/components/LoginForm.tsx:22 Email input uses placeholder only, no <label> Fix: Add <label htmlFor="email">Email address</label>

Criterion

Check

Common Failure

1.1.1 Non-text Content

Every <img> has meaningful alt; decorative images use alt=""

<img src="logo.png"> with no alt

1.3.1 Info & Relationships

Structure conveyed via semantic HTML, not visual styling only

<div class="heading"> instead of <h2>

1.3.5 Identify Input Purpose

autocomplete attributes on personal data fields

Missing autocomplete="email"

1.4.1 Use of Color

Color is not the only means of conveying information

Red-only error indicators

1.4.3 Contrast (Min)

Text contrast ≥ 4.5:1 (3:1 for large text ≥18pt/14pt bold)

Light gray on white

1.4.4 Resize Text

Content usable at 200% zoom without scrolling horizontally

Fixed-width containers

1.4.10 Reflow

Content reflows at 320px width without 2D scrolling

Tables/cards breaking layout

1.4.11 Non-text Contrast

UI components (focus rings, form borders) ≥ 3:1 contrast

Faint input borders

Criterion

Check

Common Failure

2.1.1 Keyboard

All functionality available via keyboard

Click-only dropdowns

2.1.2 No Keyboard Trap

Focus can always be moved away with keyboard

Modal dialogs trapping focus

2.4.3 Focus Order

Tab order is logical and matches visual layout

DOM order mismatches visual

2.4.4 Link Purpose

Link text is meaningful in isolation

"Click here", "Read more"

2.4.7 Focus Visible

Keyboard focus indicator is always visible

CSS outline: none globally

2.4.11 Focus Not Obscured (new 2.2)

Sticky headers/footers don't fully cover focused element

Sticky nav covering inputs

2.4.12 Focus Not Obscured (Enhanced) (new 2.2)

Focused element is fully visible

—

2.5.3 Label in Name

Visible label text included in accessible name

Icon buttons without text

2.5.7 Dragging Movements (new 2.2)

All drag operations have single-pointer alternative

Drag-only sorting

2.5.8 Target Size (new 2.2)

Interactive targets ≥ 24×24 CSS pixels

Small icon buttons

Criterion

Check

Common Failure

3.1.1 Language of Page

<html lang="en"> set

Missing or wrong lang attribute

3.2.2 On Input

No automatic context change on focus

Auto-submit on radio select

3.3.1 Error Identification

Form errors identified in text, not color only

Red border without message

3.3.2 Labels or Instructions

All form fields have visible labels

Placeholder-only inputs

3.3.7 Redundant Entry (new 2.2)

Users not asked to re-enter info already provided

Shipping = billing re-entry

3.3.8 Accessible Authentication (new 2.2)

No cognitive function test required for auth

CAPTCHA without alternative

accessibility-audit

Purpose

Trigger

Prerequisites

Steps

Step 1 — Automated Scan (if URL available)

Step 2 — Perceivable (WCAG Principle 1)

Step 3 — Operable (WCAG Principle 2)

Step 4 — Understandable (WCAG Principle 3)

Step 5 — Robust (WCAG Principle 4) — ARIA & Screen Readers

Step 6 — Color Contrast Calculator

Output Format

Rules

Must

Never

Examples

Good Example

Bad Example

Purpose

Trigger

Prerequisites

Steps

Step 1 — Automated Scan (if URL available)

Step 2 — Perceivable (WCAG Principle 1)

Step 3 — Operable (WCAG Principle 2)

Step 4 — Understandable (WCAG Principle 3)

Step 5 — Robust (WCAG Principle 4) — ARIA & Screen Readers

Step 6 — Color Contrast Calculator

Output Format

Rules

Must

Never

Examples

Good Example

Bad Example

name	accessibility-audit
description	WCAG 2.2 Level AA accessibility audit for web applications. Checks perceivable (alt text, color contrast, captions), operable (keyboard navigation, focus management, WCAG 2.2 new criteria), understandable (labels, error messages), and robust (ARIA, screen reader compatibility). Produces violation table with WCAG criterion IDs and remediation. Triggers: accessibility audit, WCAG, a11y, screen reader, keyboard navigation, color contrast, ARIA audit, 無障礙, 可及性.
metadata	{"category":"dev"}