メニュー
Check and verify accessibility compliance for Spark UI components. Use when the user wants to test accessibility, verify WCAG compliance, or fix accessibility issues.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | check-accessibility |
| description | Check and verify accessibility compliance for Spark UI components. Use when the user wants to test accessibility, verify WCAG compliance, or fix accessibility issues. |
Verify that components meet WCAG 2.1 AA accessibility standards.
Automated Testing:
# Test all components
npm run test:a11y
# Test specific component(s)
npm run test:a11y -- tabs
npm run test:a11y -- tabs button card
# Combine with Playwright options
npm run test:a11y -- tabs --workers 1
This runs Playwright tests with @axe-core/playwright for automated accessibility checks. You can test specific components by passing their names as arguments after --. Component names are case-insensitive and should match the keys in e2e/a11y/routes/components.ts.
Manual Checks:
Common Accessibility Requirements:
Testing Tools:
@axe-core/playwright for automated testing@testing-library/react for unit test accessibilityFix Issues:
All components must meet WCAG 2.1 AA standards. See .cursor/rules/accessibility-standards.md for details.
Generate code using nx generators. INVOKE IMMEDIATELY when user mentions scaffolding, setup, structure, creating apps/libs, or setting up project structure. Trigger words - scaffold, setup, create a ... app, create a ... lib, project structure, generate, add a new project. ALWAYS use this BEFORE calling nx_docs or exploring - this skill handles discovery internally.
Run all quality checks including linting, type checking, and tests. Use when the user wants to verify code quality, before committing, or when preparing a PR.
Use the chrome-devtools MCP to run browser tests on local Storybook stories by navigating directly to `iframe.html` story URLs instead of the outer docs pages.
Link workspace packages in monorepos (npm, yarn, bun). USE WHEN: (1) you just created or generated new packages and need to wire up their dependencies, (2) user imports from a sibling package and needs to add it as a dependency, (3) you get resolution errors for workspace packages (@org/*) like "cannot find module", "failed to resolve import", "TS2307", or "cannot resolve". DO NOT patch around with tsconfig paths or manual package.json edits - use the package manager's workspace commands to fix actual linking.
Monitor Nx Cloud CI pipeline and handle self-healing fixes. USE WHEN user says "monitor ci", "watch ci", "ci monitor", "watch ci for this branch", "track ci", "check ci status", wants to track CI status, or needs help with self-healing CI fixes. ALWAYS USE THIS SKILL instead of native CI provider tools (gh, glab, etc.) for CI monitoring.
Find and add Nx plugins. USE WHEN user wants to discover available plugins, install a new plugin, or add support for a specific framework or technology to the workspace.