界面已本地化;技能介绍与说明文档按所选语言由 AI 自动翻译,代码、命令、路径和专业术语保留原文,以原作者文档为准。
探索技能
数据与研究 · SKILL.md

kb-web-scanning

kb-web-scanning

【数据与研究】Reference data, not a reviewer. Web content discovery, URL crawling, and page inventory for accessibility audits. Use when scanning web pages, crawling sites for audit scope, or building page inventories for multi-page audits.

独立 GitHub 快照 · 自动分类 · 以原作者文档为准

技能说明

GitHub

name: kb-web-scanning description: Reference data, not a reviewer. Web content discovery, URL crawling, and page inventory for accessibility audits. Use when scanning web pages, crawling sites for audit scope, or building page inventories for multi-page audits. license: MIT disable-model-invocation: true user-invocable: false metadata: tier: reference domain: cross-cutting output: none effort: low title: Web Scanning

Web Scanning

Supported Audit Methods

Each method, with tool and when to use.

MethodToolWhen to Use
Runtime scanaxe-core CLILive URL available (dev server or production)
Code reviewAgent specialistsSource code available in workspace
Bothaxe-core + agentsMost comprehensive - catches issues from both angles

Runtime Scanning Commands

axe-core CLI

# Single page scan (WCAG 2.2 AA)
npx @axe-core/cli <URL> --tags wcag2a,wcag2aa,wcag21a,wcag21aa

# Save results to JSON
npx @axe-core/cli <URL> --tags wcag2a,wcag2aa,wcag21a,wcag21aa --save ACCESSIBILITY-SCAN.json

# Multiple pages
npx @axe-core/cli <URL1> <URL2> <URL3> --tags wcag2a,wcag2aa,wcag21a,wcag21aa --save ACCESSIBILITY-SCAN.json

# With Chrome flags (headless)
npx @axe-core/cli <URL> --tags wcag2a,wcag2aa,wcag21a,wcag21aa --chrome-flags="--headless --no-sandbox"

axe-core Tag Reference

Each tag, with its standard.

TagStandard
wcag2aWCAG 2.0 Level A
wcag2aaWCAG 2.0 Level AA
wcag21aWCAG 2.1 Level A
wcag21aaWCAG 2.1 Level AA
wcag22aaWCAG 2.2 Level AA
best-practiceBest practices (not WCAG required)

Screenshot Capture

capture-website-cli (preferred - lightweight)

# Full-page screenshot
npx capture-website-cli "<URL>" --output="screenshots/<page>.png" --full-page --type=png

# With viewport
npx capture-website-cli "<URL>" --output="screenshots/<page>.png" --full-page --width=1280 --height=720

# Mobile viewport
npx capture-website-cli "<URL>" --output="screenshots/<page>-mobile.png" --full-page --width=375 --height=812

# With delay for JS-rendered content
npx capture-website-cli "<URL>" --output="screenshots/<page>.png" --full-page --delay=3

Playwright (fallback)

npx playwright screenshot --browser chromium --full-page --wait-for-timeout 3000 "<URL>" "screenshots/<page>.png"

Page Discovery for Multi-Page Audits

Crawl Depth Modes

Each mode, with its behavior and max pages.

ModeBehaviorMax Pages
Current page onlyScan single URL1
Key pagesUser-provided listUser-defined
Full site crawlFollow internal links50 (default cap)

Sitemap-based Discovery

# Check for sitemap
curl -s <BASE_URL>/sitemap.xml | head -20

# Extract URLs from sitemap
curl -s <BASE_URL>/sitemap.xml | grep -oP '<loc>\K[^<]+' | head -50

Link-based Crawling

When crawling from a start URL:

  • Follow only same-domain links
  • Skip anchor links (#), mailto:, tel:, javascript: links
  • Skip file downloads (.pdf, .zip, .doc, etc.)
  • Respect robots.txt
  • Cap at 50 pages unless user overrides
  • Track visited URLs to avoid duplicates

Framework Detection

Detect the framework from workspace files to enable framework-specific scanning:

IndicatorFramework
package.json contains reactReact
package.json contains nextNext.js
package.json contains vueVue
package.json contains @angular/coreAngular
package.json contains svelteSvelte
.jsx / .tsx files presentReact/Next.js
.vue files presentVue
angular.json presentAngular
.svelte files presentSvelte
Only .html filesVanilla HTML

Source Code File Patterns

When doing code review, scan these file patterns:

# HTML files
**/*.html

# Component files (framework-specific)
**/*.jsx
**/*.tsx
**/*.vue
**/*.svelte
**/*.component.ts
**/*.component.html

# Style files (for contrast/visual checks)
**/*.css
**/*.scss
**/*.less
**/*.module.css

# Config files (for framework detection)
package.json
next.config.*
nuxt.config.*
angular.json
svelte.config.*
tailwind.config.*

Scan Configuration

Web Scan Config File: .a11y-web-config.json

{
  "profile": "standard",
  "wcagLevel": "AA",
  "wcagVersion": "2.2",
  "axeTags": ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"],
  "maxPages": 50,
  "screenshots": false,
  "framework": "auto",
  "ignore": {
    "paths": ["node_modules/**", "dist/**", "build/**", ".next/**"],
    "rules": []
  }
}

Scan Profiles

Each profile, with its phases and thoroughness.

ProfilePhasesThoroughness
Quick1, 3, 4, 9Errors and critical only
StandardAll (1-9)Errors and warnings
DeepAll + extrasAll severities + animation, cognitive, touch
我的收藏