Menu
Run accessibility audit on frontend components for WCAG 2.1 AA compliance
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | accessibility-check |
| description | Run accessibility audit on frontend components for WCAG 2.1 AA compliance |
| user-invocable | true |
Perform a WCAG 2.1 AA compliance audit on frontend components.
.focus-ring)Search for issues:
# Icon-only buttons missing aria-label
grep -rE "<Button[^>]*>[^<]*<svg" frontend/src/components/ --include="*.tsx" | grep -v "aria-label"
# Images missing alt text
grep -r "<img" frontend/src/components/ --include="*.tsx" | grep -v "alt="
# Missing form labels
grep -rE "<input[^>]*>" frontend/src/components/ --include="*.tsx" | grep -v "aria-label\|id.*label"
Pierre design system colors meet contrast requirements:
pierre-gray-900 on white: 15.3:1 ✓pierre-gray-700 on white: 8.5:1 ✓pierre-gray-500 on white: 4.6:1 ✓ (minimum for large text)pierre-violet on white: 5.7:1 ✓Flag if using:
pierre-gray-400 for body text (3.0:1 - FAILS)size="sm" usage - ensure adequate paddingprefers-reduced-motion=== Accessibility Audit Report ===
📁 Files Analyzed: [count]
== Keyboard Navigation ==
✅/❌ Focus indicators: [details]
✅/❌ Tab order: [details]
== Screen Reader ==
✅/❌ Icon buttons: [count with aria-label / count missing]
✅/❌ Images: [count with alt / count missing]
✅/❌ Form labels: [details]
== Color Contrast ==
✅/❌ Text contrast: [details]
✅/❌ Interactive elements: [details]
== Touch Targets ==
✅/❌ Minimum size: [details]
== Issues Found ==
[CRITICAL] [file:line] - [issue]
[MAJOR] [file:line] - [issue]
[MINOR] [file:line] - [issue]
== Fixes Required ==
1. [specific fix with code example]
== Verdict ==
[PASS / NEEDS WORK - X critical, Y major, Z minor issues]
| Criteria | Requirement |
|---|---|
| 1.1.1 | Non-text content has text alternative |
| 1.4.3 | Contrast ratio 4.5:1 (text) |
| 2.1.1 | All functionality keyboard accessible |
| 2.4.7 | Focus visible |
| 4.1.2 | Name, Role, Value for UI components |
Use when designing prompts for LLMs, optimizing model performance, building evaluation frameworks, or implementing advanced prompting techniques like chain-of-thought, few-shot learning, or structured outputs.
How to deploy Dravr infrastructure and apply Cloud Run config changes. Use when editing infra/ terraform, when a merged code change is live but a Cloud Run setting (cpu, memory, min/max instances, env var, scaling) hasn't taken effect, or when asked to plan/apply infra. Explains the two-pipeline model (app binary auto-deploys on push; terraform infra config is a separate manual apply) plus the cpu/cpu_idle guardrails.
Enforces zero-tolerance code quality policy using Clippy with strict lints, all warnings treated as errors
Write well-formatted notes to the dravr-vault Obsidian knowledge base. Use this skill whenever creating or updating an ADR, runbook, plan, API doc, guide, session output, or any structured document that should land in the vault — even when the user doesn't say "Obsidian" explicitly. Delegates to obsidian:obsidian-cli to write to the live vault and applies Dravr frontmatter and formatting standards.
Bootstrap Pierre server with database, admin user, coaches, and test users for development and testing
Validates coach markdown files for required frontmatter fields, sections, and naming conventions