Skip to content

Commit 825b02f

Browse files
gmoonclaude
gmoon
and
claude
committed
Add web-quality-skills and claude-seo agent skills
Install addyosmani/web-quality-skills (6 skills: accessibility, best-practices, core-web-vitals, performance, seo, web-quality-audit) and AgriciDaniel/claude-seo (13 skills: seo-audit, seo-page, seo-technical, seo-content, seo-schema, seo-sitemap, seo-geo, seo-plan, seo-programmatic, seo-competitor-pages, seo-hreflang, seo-images, seo). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 79c9438 commit 825b02f

68 files changed

Lines changed: 6119 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.agents/skills/accessibility/SKILL.md‎

Lines changed: 522 additions & 0 deletions
Large diffs are not rendered by default.

‎.agents/skills/accessibility/references/WCAG.md‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
# WCAG 2.1 Quick Reference
2+
3+
## Success criteria by level
4+
5+
### Level A (minimum)
6+
7+
| Criterion | Description |
8+
|-----------|-------------|
9+
| **1.1.1** Non-text Content | All images, icons have text alternatives |
10+
| **1.2.1** Audio-only/Video-only | Provide transcript or audio description |
11+
| **1.2.2** Captions | Video with audio has captions |
12+
| **1.2.3** Audio Description | Video has audio description |
13+
| **1.3.1** Info and Relationships | Information conveyed through presentation is available programmatically |
14+
| **1.3.2** Meaningful Sequence | Reading order is logical |
15+
| **1.3.3** Sensory Characteristics | Instructions don't rely solely on shape, color, size, location, orientation, or sound |
16+
| **1.4.1** Use of Color | Color is not the only visual means of conveying information |
17+
| **1.4.2** Audio Control | Audio playing automatically can be paused/stopped |
18+
| **2.1.1** Keyboard | All functionality available via keyboard |
19+
| **2.1.2** No Keyboard Trap | Keyboard focus can be moved away from any component |
20+
| **2.1.4** Character Key Shortcuts | Single-key shortcuts can be turned off or remapped |
21+
| **2.2.1** Timing Adjustable | Time limits can be extended |
22+
| **2.2.2** Pause, Stop, Hide | Moving/blinking content can be paused |
23+
| **2.3.1** Three Flashes | Nothing flashes more than 3 times per second |
24+
| **2.4.1** Bypass Blocks | Skip link or landmark navigation available |
25+
| **2.4.2** Page Titled | Pages have descriptive titles |
26+
| **2.4.3** Focus Order | Focus order preserves meaning |
27+
| **2.4.4** Link Purpose | Link purpose clear from link text or context |
28+
| **2.5.1** Pointer Gestures | Multi-point gestures have single-pointer alternatives |
29+
| **2.5.2** Pointer Cancellation | Down-event doesn't trigger action (use up-event or click) |
30+
| **2.5.3** Label in Name | Accessible name contains visible label text |
31+
| **2.5.4** Motion Actuation | Motion-triggered functions have alternatives |
32+
| **3.1.1** Language of Page | Default language specified in HTML |
33+
| **3.2.1** On Focus | Focus doesn't trigger unexpected changes |
34+
| **3.2.2** On Input | Input doesn't trigger unexpected changes |
35+
| **3.3.1** Error Identification | Input errors clearly described |
36+
| **3.3.2** Labels or Instructions | Form inputs have labels or instructions |
37+
| **4.1.1** Parsing | HTML is well-formed (no duplicate IDs, proper nesting) |
38+
| **4.1.2** Name, Role, Value | UI components have accessible names and correct roles |
39+
40+
### Level AA (standard)
41+
42+
| Criterion | Description |
43+
|-----------|-------------|
44+
| **1.2.4** Captions (Live) | Live audio has captions |
45+
| **1.2.5** Audio Description | Pre-recorded video has audio description |
46+
| **1.3.4** Orientation | Content doesn't restrict orientation |
47+
| **1.3.5** Identify Input Purpose | Input purpose can be programmatically determined |
48+
| **1.4.3** Contrast (Minimum) | 4.5:1 for normal text, 3:1 for large text |
49+
| **1.4.4** Resize Text | Text can be resized to 200% without loss of functionality |
50+
| **1.4.5** Images of Text | Text used instead of images of text |
51+
| **1.4.10** Reflow | Content reflows at 320px width without horizontal scroll |
52+
| **1.4.11** Non-text Contrast | UI components have 3:1 contrast |
53+
| **1.4.12** Text Spacing | Content adapts to text spacing changes |
54+
| **1.4.13** Content on Hover/Focus | Additional content is dismissible, hoverable, persistent |
55+
| **2.4.5** Multiple Ways | Multiple ways to find pages |
56+
| **2.4.6** Headings and Labels | Headings and labels are descriptive |
57+
| **2.4.7** Focus Visible | Focus indicator is visible |
58+
| **3.1.2** Language of Parts | Language changes are marked |
59+
| **3.2.3** Consistent Navigation | Navigation is consistent across pages |
60+
| **3.2.4** Consistent Identification | Same functionality uses same labels |
61+
| **3.3.3** Error Suggestion | Error corrections suggested when known |
62+
| **3.3.4** Error Prevention (Legal) | Actions can be reversed or confirmed |
63+
| **4.1.3** Status Messages | Status messages announced to screen readers |
64+
65+
### Level AAA (enhanced)
66+
67+
| Criterion | Description |
68+
|-----------|-------------|
69+
| **1.4.6** Contrast (Enhanced) | 7:1 for normal text, 4.5:1 for large text |
70+
| **1.4.8** Visual Presentation | Foreground/background colors can be selected |
71+
| **1.4.9** Images of Text (No Exception) | No images of text |
72+
| **2.1.3** Keyboard (No Exception) | All functionality keyboard accessible |
73+
| **2.2.3** No Timing | No time limits |
74+
| **2.2.4** Interruptions | Interruptions can be postponed |
75+
| **2.2.5** Re-authenticating | Data preserved on re-authentication |
76+
| **2.2.6** Timeouts | Users warned about data loss from inactivity |
77+
| **2.3.2** Three Flashes | No content flashes more than 3 times |
78+
| **2.3.3** Animation from Interactions | Motion animation can be disabled |
79+
| **2.4.8** Location | User location within site is available |
80+
| **2.4.9** Link Purpose (Link Only) | Link purpose clear from link text alone |
81+
| **2.4.10** Section Headings | Sections have headings |
82+
| **3.1.3** Unusual Words | Definitions available for unusual words |
83+
| **3.1.4** Abbreviations | Abbreviations expanded |
84+
| **3.1.5** Reading Level | Alternative content for complex text |
85+
| **3.1.6** Pronunciation | Pronunciation available where needed |
86+
| **3.2.5** Change on Request | Changes initiated only by user |
87+
| **3.3.5** Help | Context-sensitive help available |
88+
| **3.3.6** Error Prevention (All) | All form submissions can be reviewed |
89+
90+
## Common ARIA patterns
91+
92+
### Buttons
93+
```html
94+
<button>Label</button>
95+
<!-- or -->
96+
<button aria-label="Close dialog">×</button>
97+
```
98+
99+
### Links
100+
```html
101+
<a href="/page">Descriptive link text</a>
102+
<!-- External links -->
103+
<a href="https://external.com" target="_blank" rel="noopener">
104+
External site
105+
<span class="visually-hidden">(opens in new tab)</span>
106+
</a>
107+
```
108+
109+
### Form fields
110+
```html
111+
<label for="email">Email address</label>
112+
<input type="email" id="email" aria-describedby="email-hint">
113+
<p id="email-hint">We'll never share your email.</p>
114+
```
115+
116+
### Error states
117+
```html
118+
<label for="email">Email</label>
119+
<input type="email" id="email" aria-invalid="true" aria-describedby="email-error">
120+
<p id="email-error" role="alert">Please enter a valid email address.</p>
121+
```
122+
123+
### Navigation
124+
```html
125+
<nav aria-label="Main">
126+
<ul>
127+
<li><a href="/" aria-current="page">Home</a></li>
128+
<li><a href="/about">About</a></li>
129+
</ul>
130+
</nav>
131+
```
132+
133+
### Modals
134+
```html
135+
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
136+
<h2 id="dialog-title">Confirm Action</h2>
137+
<!-- content -->
138+
</div>
139+
```
140+
141+
### Live regions
142+
```html
143+
<!-- Polite (waits for pause in speech) -->
144+
<div aria-live="polite">Status update here</div>
145+
146+
<!-- Assertive (interrupts immediately) -->
147+
<div aria-live="assertive" role="alert">Error message here</div>
148+
149+
<!-- Status (polite, implicit) -->
150+
<div role="status">Loading complete</div>
151+
```
152+
153+
## Testing tools
154+
155+
| Tool | Type | URL |
156+
|------|------|-----|
157+
| axe DevTools | Browser extension | [deque.com/axe](https://www.deque.com/axe/) |
158+
| WAVE | Browser extension | [wave.webaim.org](https://wave.webaim.org/) |
159+
| Lighthouse | Built into Chrome | DevTools → Lighthouse |
160+
| NVDA | Screen reader (Windows) | [nvaccess.org](https://www.nvaccess.org/) |
161+
| VoiceOver | Screen reader (Mac) | Built into macOS |
162+
| Colour Contrast Analyser | Desktop app | [tpgi.com](https://www.tpgi.com/color-contrast-checker/) |

0 commit comments

Comments
 (0)