메뉴
Capture and compare visual screenshots of the sorting visualizer. Use before/after animation changes, styling updates, or any UI refactors to detect unintended regressions.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Run an axe-core accessibility audit across all algorithm visualizer routes. Use before any release to verify WCAG 2.1 AA compliance, especially after UI or animation changes.
Run a pre-deploy smoke test: builds the app, starts wrangler pages dev, and verifies every algorithm route loads and the visualizer renders correctly. Run before pushing to main.
Benchmark all sorting algorithm generators: measures step counts and execution time across input sizes and patterns (random, sorted, reverse, duplicates). Use when adding or modifying an algorithm to verify Big-O behaviour.
Scaffold a new sorting algorithm: generates the generator file, pure sort function, and Vitest test file from templates, then registers it in the index and constants. Use when adding any new sorting algorithm to the project.
| name | visual-regression |
| description | Capture and compare visual screenshots of the sorting visualizer. Use before/after animation changes, styling updates, or any UI refactors to detect unintended regressions. |
| user-invocable | true |
Captures screenshots of every algorithm route and diffs against stored baselines.
motion library versionEnsure the app is built: npm run build
Run the capture script (starts wrangler, captures all routes):
npx tsx .github/skills/visual-regression/scripts/capture-screenshots.ts
Screenshots saved to .github/skills/visual-regression/references/current/
If no baselines exist yet, promote current as baseline:
cp -r .github/skills/visual-regression/references/current/ .github/skills/visual-regression/references/baselines/
Otherwise, run the diff:
npx tsx .github/skills/visual-regression/scripts/compare.ts
Review any flagged diffs before merging.
references/baselines/)references/current/)<algorithm-id>-<theme>.png