[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FCSD3T1CSHFV7VJY8X81GD":3,"skill-same:01M6FCSD3T1CSHFV7VJY8X81GD":74},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":45,"commitSha":46,"skillDirectory":47,"forksCount":48,"repositoryHtmlUrl":49,"repositoryHomepageUrl":6,"ownerHtmlUrl":50,"ownerBlogUrl":51,"ownerDescription":52,"updatedAt":53,"install":54,"resources":67},"01M6FCSD3T1CSHFV7VJY8X81GD","accessibility",null,"Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to \"improve accessibility\", \"a11y audit\", \"WCAG compliance\", \"screen reader support\", \"keyboard navigation\", or \"make accessible\".","Dicklesworthstone\u002Fpi_agent_rust","Dicklesworthstone","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F35050222?v=4","01M6CG26AR942CSVMN1M5E3DSE","Jeff Emanuel","01M6CG26EPP71PSHW1VDS71121",1986,"MIT","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Faccessibility\u002FSKILL.md",[],[5,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36],"quality","when","a11y","make","screen","keyboard","navigation","use","a11y audit","reader","support","improve","WCAG","compliance","audit","web accessibility","guidelines","web","2026-11-10 10:12:30",false,"---\nname: accessibility\ndescription: Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to \"improve accessibility\", \"a11y audit\", \"WCAG compliance\", \"screen reader support\", \"keyboard navigation\", or \"make accessible\".\nlicense: MIT\nmetadata:\n  author: web-quality-skills\n  version: \"1.0\"\n---\n\n# Accessibility (a11y)\n\nComprehensive accessibility guidelines based on WCAG 2.1 and Lighthouse accessibility audits. Goal: make content usable by everyone, including people with disabilities.\n\n## WCAG Principles: POUR\n\n| Principle | Description |\n|-----------|-------------|\n| **P**erceivable | Content can be perceived through different senses |\n| **O**perable | Interface can be operated by all users |\n| **U**nderstandable | Content and interface are understandable |\n| **R**obust | Content works with assistive technologies |\n\n## Conformance levels\n\n| Level | Requirement | Target |\n|-------|-------------|--------|\n| **A** | Minimum accessibility | Must pass |\n| **AA** | Standard compliance | Should pass (legal requirement in many jurisdictions) |\n| **AAA** | Enhanced accessibility | Nice to have |\n\n---\n\n## Perceivable\n\n### Text alternatives (1.1)\n\n**Images require alt text:**\n```html\n\u003C!-- ❌ Missing alt -->\n\u003Cimg src=\"chart.png\">\n\n\u003C!-- ✅ Descriptive alt -->\n\u003Cimg src=\"chart.png\" alt=\"Bar chart showing 40% increase in Q3 sales\">\n\n\u003C!-- ✅ Decorative image (empty alt) -->\n\u003Cimg src=\"decorative-border.png\" alt=\"\" role=\"presentation\">\n\n\u003C!-- ✅ Complex image with longer description -->\n\u003Cfigure>\n  \u003Cimg src=\"infographic.png\" alt=\"2024 market trends infographic\" \n       aria-describedby=\"infographic-desc\">\n  \u003Cfigcaption id=\"infographic-desc\">\n    \u003C!-- Detailed description -->\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n```\n\n**Icon buttons need accessible names:**\n```html\n\u003C!-- ❌ No accessible name -->\n\u003Cbutton>\u003Csvg>\u003C!-- menu icon -->\u003C\u002Fsvg>\u003C\u002Fbutton>\n\n\u003C!-- ✅ Using aria-label -->\n\u003Cbutton aria-label=\"Open menu\">\n  \u003Csvg aria-hidden=\"true\">\u003C!-- menu icon -->\u003C\u002Fsvg>\n\u003C\u002Fbutton>\n\n\u003C!-- ✅ Using visually hidden text -->\n\u003Cbutton>\n  \u003Csvg aria-hidden=\"true\">\u003C!-- menu icon -->\u003C\u002Fsvg>\n  \u003Cspan class=\"visually-hidden\">Open menu\u003C\u002Fspan>\n\u003C\u002Fbutton>\n```\n\n**Visually hidden class:**\n```css\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n```\n\n### Color contrast (1.4.3, 1.4.6)\n\n| Text Size | AA minimum | AAA enhanced |\n|-----------|------------|--------------|\n| Normal text (\u003C 18px \u002F \u003C 14px bold) | 4.5:1 | 7:1 |\n| Large text (≥ 18px \u002F ≥ 14px bold) | 3:1 | 4.5:1 |\n| UI components & graphics | 3:1 | 3:1 |\n\n```css\n\u002F* ❌ Low contrast (2.5:1) *\u002F\n.low-contrast {\n  color: #999;\n  background: #fff;\n}\n\n\u002F* ✅ Sufficient contrast (7:1) *\u002F\n.high-contrast {\n  color: #333;\n  background: #fff;\n}\n\n\u002F* ✅ Focus states need contrast too *\u002F\n:focus-visible {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n```\n\n**Don't rely on color alone:**\n```html\n\u003C!-- ❌ Only color indicates error -->\n\u003Cinput class=\"error-border\">\n\u003Cstyle>.error-border { border-color: red; }\u003C\u002Fstyle>\n\n\u003C!-- ✅ Color + icon + text -->\n\u003Cdiv class=\"field-error\">\n  \u003Cinput aria-invalid=\"true\" aria-describedby=\"email-error\">\n  \u003Cspan id=\"email-error\" class=\"error-message\">\n    \u003Csvg aria-hidden=\"true\">\u003C!-- error icon -->\u003C\u002Fsvg>\n    Please enter a valid email address\n  \u003C\u002Fspan>\n\u003C\u002Fdiv>\n```\n\n### Media alternatives (1.2)\n\n```html\n\u003C!-- Video with captions -->\n\u003Cvideo controls>\n  \u003Csource src=\"video.mp4\" type=\"video\u002Fmp4\">\n  \u003Ctrack kind=\"captions\" src=\"captions.vtt\" srclang=\"en\" label=\"English\" default>\n  \u003Ctrack kind=\"descriptions\" src=\"descriptions.vtt\" srclang=\"en\" label=\"Descriptions\">\n\u003C\u002Fvideo>\n\n\u003C!-- Audio with transcript -->\n\u003Caudio controls>\n  \u003Csource src=\"podcast.mp3\" type=\"audio\u002Fmp3\">\n\u003C\u002Faudio>\n\u003Cdetails>\n  \u003Csummary>Transcript\u003C\u002Fsummary>\n  \u003Cp>Full transcript text...\u003C\u002Fp>\n\u003C\u002Fdetails>\n```\n\n---\n\n## Operable\n\n### Keyboard accessible (2.1)\n\n**All functionality must be keyboard accessible:**\n```javascript\n\u002F\u002F ❌ Only handles click\nelement.addEventListener('click', handleAction);\n\n\u002F\u002F ✅ Handles both click and keyboard\nelement.addEventListener('click', handleAction);\nelement.addEventListener('keydown', (e) => {\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    handleAction();\n  }\n});\n```\n\n**No keyboard traps:**\n```javascript\n\u002F\u002F Modal focus management\nfunction openModal(modal) {\n  const focusableElements = modal.querySelectorAll(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  );\n  const firstElement = focusableElements[0];\n  const lastElement = focusableElements[focusableElements.length - 1];\n  \n  \u002F\u002F Trap focus within modal\n  modal.addEventListener('keydown', (e) => {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstElement) {\n        e.preventDefault();\n        lastElement.focus();\n      } else if (!e.shiftKey && document.activeElement === lastElement) {\n        e.preventDefault();\n        firstElement.focus();\n      }\n    }\n    if (e.key === 'Escape') {\n      closeModal();\n    }\n  });\n  \n  firstElement.focus();\n}\n```\n\n### Focus visible (2.4.7)\n\n```css\n\u002F* ❌ Never remove focus outlines *\u002F\n*:focus { outline: none; }\n\n\u002F* ✅ Use :focus-visible for keyboard-only focus *\u002F\n:focus {\n  outline: none;\n}\n\n:focus-visible {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n\n\u002F* ✅ Or custom focus styles *\u002F\nbutton:focus-visible {\n  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);\n}\n```\n\n### Skip links (2.4.1)\n\n```html\n\u003Cbody>\n  \u003Ca href=\"#main-content\" class=\"skip-link\">Skip to main content\u003C\u002Fa>\n  \u003Cheader>\u003C!-- navigation -->\u003C\u002Fheader>\n  \u003Cmain id=\"main-content\" tabindex=\"-1\">\n    \u003C!-- main content -->\n  \u003C\u002Fmain>\n\u003C\u002Fbody>\n```\n\n```css\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 0;\n  background: #000;\n  color: #fff;\n  padding: 8px 16px;\n  z-index: 100;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n```\n\n### Timing (2.2)\n\n```javascript\n\u002F\u002F Allow users to extend time limits\nfunction showSessionWarning() {\n  const modal = createModal({\n    title: 'Session Expiring',\n    content: 'Your session will expire in 2 minutes.',\n    actions: [\n      { label: 'Extend session', action: extendSession },\n      { label: 'Log out', action: logout }\n    ],\n    timeout: 120000 \u002F\u002F 2 minutes to respond\n  });\n}\n```\n\n### Motion (2.3)\n\n```css\n\u002F* Respect reduced motion preference *\u002F\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\n---\n\n## Understandable\n\n### Page language (3.1.1)\n\n```html\n\u003C!-- ❌ No language specified -->\n\u003Chtml>\n\n\u003C!-- ✅ Language specified -->\n\u003Chtml lang=\"en\">\n\n\u003C!-- ✅ Language changes within page -->\n\u003Cp>The French word for hello is \u003Cspan lang=\"fr\">bonjour\u003C\u002Fspan>.\u003C\u002Fp>\n```\n\n### Consistent navigation (3.2.3)\n\n```html\n\u003C!-- Navigation should be consistent across pages -->\n\u003Cnav aria-label=\"Main\">\n  \u003Cul>\n    \u003Cli>\u003Ca href=\"\u002F\" aria-current=\"page\">Home\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fproducts\">Products\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n```\n\n### Form labels (3.3.2)\n\n```html\n\u003C!-- ❌ No label association -->\n\u003Cinput type=\"email\" placeholder=\"Email\">\n\n\u003C!-- ✅ Explicit label -->\n\u003Clabel for=\"email\">Email address\u003C\u002Flabel>\n\u003Cinput type=\"email\" id=\"email\" name=\"email\" \n       autocomplete=\"email\" required>\n\n\u003C!-- ✅ Implicit label -->\n\u003Clabel>\n  Email address\n  \u003Cinput type=\"email\" name=\"email\" autocomplete=\"email\" required>\n\u003C\u002Flabel>\n\n\u003C!-- ✅ With instructions -->\n\u003Clabel for=\"password\">Password\u003C\u002Flabel>\n\u003Cinput type=\"password\" id=\"password\" \n       aria-describedby=\"password-requirements\">\n\u003Cp id=\"password-requirements\">\n  Must be at least 8 characters with one number.\n\u003C\u002Fp>\n```\n\n### Error handling (3.3.1, 3.3.3)\n\n```html\n\u003C!-- Announce errors to screen readers -->\n\u003Cform novalidate>\n  \u003Cdiv class=\"field\" aria-live=\"polite\">\n    \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n    \u003Cinput type=\"email\" id=\"email\" \n           aria-invalid=\"true\"\n           aria-describedby=\"email-error\">\n    \u003Cp id=\"email-error\" class=\"error\" role=\"alert\">\n      Please enter a valid email address (e.g., name@example.com)\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fform>\n```\n\n```javascript\n\u002F\u002F Focus first error on submit\nform.addEventListener('submit', (e) => {\n  const firstError = form.querySelector('[aria-invalid=\"true\"]');\n  if (firstError) {\n    e.preventDefault();\n    firstError.focus();\n    \n    \u002F\u002F Announce error summary\n    const errorSummary = document.getElementById('error-summary');\n    errorSummary.textContent = `${errors.length} errors found. Please fix them and try again.`;\n    errorSummary.focus();\n  }\n});\n```\n\n---\n\n## Robust\n\n### Valid HTML (4.1.1)\n\n```html\n\u003C!-- ❌ Duplicate IDs -->\n\u003Cdiv id=\"content\">...\u003C\u002Fdiv>\n\u003Cdiv id=\"content\">...\u003C\u002Fdiv>\n\n\u003C!-- ❌ Invalid nesting -->\n\u003Ca href=\"\u002F\">\u003Cbutton>Click\u003C\u002Fbutton>\u003C\u002Fa>\n\n\u003C!-- ✅ Unique IDs -->\n\u003Cdiv id=\"main-content\">...\u003C\u002Fdiv>\n\u003Cdiv id=\"sidebar-content\">...\u003C\u002Fdiv>\n\n\u003C!-- ✅ Proper nesting -->\n\u003Ca href=\"\u002F\" class=\"button-link\">Click\u003C\u002Fa>\n```\n\n### ARIA usage (4.1.2)\n\n**Prefer native elements:**\n```html\n\u003C!-- ❌ ARIA role on div -->\n\u003Cdiv role=\"button\" tabindex=\"0\">Click me\u003C\u002Fdiv>\n\n\u003C!-- ✅ Native button -->\n\u003Cbutton>Click me\u003C\u002Fbutton>\n\n\u003C!-- ❌ ARIA checkbox -->\n\u003Cdiv role=\"checkbox\" aria-checked=\"false\">Option\u003C\u002Fdiv>\n\n\u003C!-- ✅ Native checkbox -->\n\u003Clabel>\u003Cinput type=\"checkbox\"> Option\u003C\u002Flabel>\n```\n\n**When ARIA is needed:**\n```html\n\u003C!-- Custom tabs component -->\n\u003Cdiv role=\"tablist\" aria-label=\"Product information\">\n  \u003Cbutton role=\"tab\" id=\"tab-1\" aria-selected=\"true\" \n          aria-controls=\"panel-1\">Description\u003C\u002Fbutton>\n  \u003Cbutton role=\"tab\" id=\"tab-2\" aria-selected=\"false\" \n          aria-controls=\"panel-2\" tabindex=\"-1\">Reviews\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel-1\" aria-labelledby=\"tab-1\">\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel-2\" aria-labelledby=\"tab-2\" hidden>\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n```\n\n### Live regions (4.1.3)\n\n```html\n\u003C!-- Status updates -->\n\u003Cdiv aria-live=\"polite\" aria-atomic=\"true\" class=\"status\">\n  \u003C!-- Content updates announced to screen readers -->\n\u003C\u002Fdiv>\n\n\u003C!-- Urgent alerts -->\n\u003Cdiv role=\"alert\" aria-live=\"assertive\">\n  \u003C!-- Interrupts current announcement -->\n\u003C\u002Fdiv>\n```\n\n```javascript\n\u002F\u002F Announce dynamic content changes\nfunction showNotification(message, type = 'polite') {\n  const container = document.getElementById(`${type}-announcer`);\n  container.textContent = ''; \u002F\u002F Clear first\n  requestAnimationFrame(() => {\n    container.textContent = message;\n  });\n}\n```\n\n---\n\n## Testing checklist\n\n### Automated testing\n```bash\n# Lighthouse accessibility audit\nnpx lighthouse https:\u002F\u002Fexample.com --only-categories=accessibility\n\n# axe-core\nnpm install @axe-core\u002Fcli -g\naxe https:\u002F\u002Fexample.com\n```\n\n### Manual testing\n\n- [ ] **Keyboard navigation:** Tab through entire page, use Enter\u002FSpace to activate\n- [ ] **Screen reader:** Test with VoiceOver (Mac), NVDA (Windows), or TalkBack (Android)\n- [ ] **Zoom:** Content usable at 200% zoom\n- [ ] **High contrast:** Test with Windows High Contrast Mode\n- [ ] **Reduced motion:** Test with `prefers-reduced-motion: reduce`\n- [ ] **Focus order:** Logical and follows visual order\n\n### Screen reader commands\n\n| Action | VoiceOver (Mac) | NVDA (Windows) |\n|--------|-----------------|----------------|\n| Start\u002FStop | ⌘ + F5 | Ctrl + Alt + N |\n| Next item | VO + → | ↓ |\n| Previous item | VO + ← | ↑ |\n| Activate | VO + Space | Enter |\n| Headings list | VO + U, then arrows | H \u002F Shift + H |\n| Links list | VO + U | K \u002F Shift + K |\n\n---\n\n## Common issues by impact\n\n### Critical (fix immediately)\n1. Missing form labels\n2. Missing image alt text\n3. Insufficient color contrast\n4. Keyboard traps\n5. No focus indicators\n\n### Serious (fix before launch)\n1. Missing page language\n2. Missing heading structure\n3. Non-descriptive link text\n4. Auto-playing media\n5. Missing skip links\n\n### Moderate (fix soon)\n1. Missing ARIA labels on icons\n2. Inconsistent navigation\n3. Missing error identification\n4. Timing without controls\n5. Missing landmark regions\n\n## References\n\n- [WCAG 2.1 Quick Reference](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002Fquickref\u002F)\n- [WAI-ARIA Authoring Practices](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F)\n- [Deque axe Rules](https:\u002F\u002Fdequeuniversity.com\u002Frules\u002Faxe\u002F)\n- [Web Quality Audit](..\u002Fweb-quality-audit\u002FSKILL.md)\n","# Accessibility (a11y)\n\nComprehensive accessibility guidelines based on WCAG 2.1 and Lighthouse accessibility audits. Goal: make content usable by everyone, including people with disabilities.\n\n## WCAG Principles: POUR\n\n| Principle | Description |\n|-----------|-------------|\n| **P**erceivable | Content can be perceived through different senses |\n| **O**perable | Interface can be operated by all users |\n| **U**nderstandable | Content and interface are understandable |\n| **R**obust | Content works with assistive technologies |\n\n## Conformance levels\n\n| Level | Requirement | Target |\n|-------|-------------|--------|\n| **A** | Minimum accessibility | Must pass |\n| **AA** | Standard compliance | Should pass (legal requirement in many jurisdictions) |\n| **AAA** | Enhanced accessibility | Nice to have |\n\n---\n\n## Perceivable\n\n### Text alternatives (1.1)\n\n**Images require alt text:**\n```html\n\u003C!-- ❌ Missing alt -->\n\u003Cimg src=\"chart.png\">\n\n\u003C!-- ✅ Descriptive alt -->\n\u003Cimg src=\"chart.png\" alt=\"Bar chart showing 40% increase in Q3 sales\">\n\n\u003C!-- ✅ Decorative image (empty alt) -->\n\u003Cimg src=\"decorative-border.png\" alt=\"\" role=\"presentation\">\n\n\u003C!-- ✅ Complex image with longer description -->\n\u003Cfigure>\n  \u003Cimg src=\"infographic.png\" alt=\"2024 market trends infographic\" \n       aria-describedby=\"infographic-desc\">\n  \u003Cfigcaption id=\"infographic-desc\">\n    \u003C!-- Detailed description -->\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n```\n\n**Icon buttons need accessible names:**\n```html\n\u003C!-- ❌ No accessible name -->\n\u003Cbutton>\u003Csvg>\u003C!-- menu icon -->\u003C\u002Fsvg>\u003C\u002Fbutton>\n\n\u003C!-- ✅ Using aria-label -->\n\u003Cbutton aria-label=\"Open menu\">\n  \u003Csvg aria-hidden=\"true\">\u003C!-- menu icon -->\u003C\u002Fsvg>\n\u003C\u002Fbutton>\n\n\u003C!-- ✅ Using visually hidden text -->\n\u003Cbutton>\n  \u003Csvg aria-hidden=\"true\">\u003C!-- menu icon -->\u003C\u002Fsvg>\n  \u003Cspan class=\"visually-hidden\">Open menu\u003C\u002Fspan>\n\u003C\u002Fbutton>\n```\n\n**Visually hidden class:**\n```css\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n```\n\n### Color contrast (1.4.3, 1.4.6)\n\n| Text Size | AA minimum | AAA enhanced |\n|-----------|------------|--------------|\n| Normal text (\u003C 18px \u002F \u003C 14px bold) | 4.5:1 | 7:1 |\n| Large text (≥ 18px \u002F ≥ 14px bold) | 3:1 | 4.5:1 |\n| UI components & graphics | 3:1 | 3:1 |\n\n```css\n\u002F* ❌ Low contrast (2.5:1) *\u002F\n.low-contrast {\n  color: #999;\n  background: #fff;\n}\n\n\u002F* ✅ Sufficient contrast (7:1) *\u002F\n.high-contrast {\n  color: #333;\n  background: #fff;\n}\n\n\u002F* ✅ Focus states need contrast too *\u002F\n:focus-visible {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n```\n\n**Don't rely on color alone:**\n```html\n\u003C!-- ❌ Only color indicates error -->\n\u003Cinput class=\"error-border\">\n\u003Cstyle>.error-border { border-color: red; }\u003C\u002Fstyle>\n\n\u003C!-- ✅ Color + icon + text -->\n\u003Cdiv class=\"field-error\">\n  \u003Cinput aria-invalid=\"true\" aria-describedby=\"email-error\">\n  \u003Cspan id=\"email-error\" class=\"error-message\">\n    \u003Csvg aria-hidden=\"true\">\u003C!-- error icon -->\u003C\u002Fsvg>\n    Please enter a valid email address\n  \u003C\u002Fspan>\n\u003C\u002Fdiv>\n```\n\n### Media alternatives (1.2)\n\n```html\n\u003C!-- Video with captions -->\n\u003Cvideo controls>\n  \u003Csource src=\"video.mp4\" type=\"video\u002Fmp4\">\n  \u003Ctrack kind=\"captions\" src=\"captions.vtt\" srclang=\"en\" label=\"English\" default>\n  \u003Ctrack kind=\"descriptions\" src=\"descriptions.vtt\" srclang=\"en\" label=\"Descriptions\">\n\u003C\u002Fvideo>\n\n\u003C!-- Audio with transcript -->\n\u003Caudio controls>\n  \u003Csource src=\"podcast.mp3\" type=\"audio\u002Fmp3\">\n\u003C\u002Faudio>\n\u003Cdetails>\n  \u003Csummary>Transcript\u003C\u002Fsummary>\n  \u003Cp>Full transcript text...\u003C\u002Fp>\n\u003C\u002Fdetails>\n```\n\n---\n\n## Operable\n\n### Keyboard accessible (2.1)\n\n**All functionality must be keyboard accessible:**\n```javascript\n\u002F\u002F ❌ Only handles click\nelement.addEventListener('click', handleAction);\n\n\u002F\u002F ✅ Handles both click and keyboard\nelement.addEventListener('click', handleAction);\nelement.addEventListener('keydown', (e) => {\n  if (e.key === 'Enter' || e.key === ' ') {\n    e.preventDefault();\n    handleAction();\n  }\n});\n```\n\n**No keyboard traps:**\n```javascript\n\u002F\u002F Modal focus management\nfunction openModal(modal) {\n  const focusableElements = modal.querySelectorAll(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  );\n  const firstElement = focusableElements[0];\n  const lastElement = focusableElements[focusableElements.length - 1];\n  \n  \u002F\u002F Trap focus within modal\n  modal.addEventListener('keydown', (e) => {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstElement) {\n        e.preventDefault();\n        lastElement.focus();\n      } else if (!e.shiftKey && document.activeElement === lastElement) {\n        e.preventDefault();\n        firstElement.focus();\n      }\n    }\n    if (e.key === 'Escape') {\n      closeModal();\n    }\n  });\n  \n  firstElement.focus();\n}\n```\n\n### Focus visible (2.4.7)\n\n```css\n\u002F* ❌ Never remove focus outlines *\u002F\n*:focus { outline: none; }\n\n\u002F* ✅ Use :focus-visible for keyboard-only focus *\u002F\n:focus {\n  outline: none;\n}\n\n:focus-visible {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n\n\u002F* ✅ Or custom focus styles *\u002F\nbutton:focus-visible {\n  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);\n}\n```\n\n### Skip links (2.4.1)\n\n```html\n\u003Cbody>\n  \u003Ca href=\"#main-content\" class=\"skip-link\">Skip to main content\u003C\u002Fa>\n  \u003Cheader>\u003C!-- navigation -->\u003C\u002Fheader>\n  \u003Cmain id=\"main-content\" tabindex=\"-1\">\n    \u003C!-- main content -->\n  \u003C\u002Fmain>\n\u003C\u002Fbody>\n```\n\n```css\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 0;\n  background: #000;\n  color: #fff;\n  padding: 8px 16px;\n  z-index: 100;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n```\n\n### Timing (2.2)\n\n```javascript\n\u002F\u002F Allow users to extend time limits\nfunction showSessionWarning() {\n  const modal = createModal({\n    title: 'Session Expiring',\n    content: 'Your session will expire in 2 minutes.',\n    actions: [\n      { label: 'Extend session', action: extendSession },\n      { label: 'Log out', action: logout }\n    ],\n    timeout: 120000 \u002F\u002F 2 minutes to respond\n  });\n}\n```\n\n### Motion (2.3)\n\n```css\n\u002F* Respect reduced motion preference *\u002F\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\n---\n\n## Understandable\n\n### Page language (3.1.1)\n\n```html\n\u003C!-- ❌ No language specified -->\n\u003Chtml>\n\n\u003C!-- ✅ Language specified -->\n\u003Chtml lang=\"en\">\n\n\u003C!-- ✅ Language changes within page -->\n\u003Cp>The French word for hello is \u003Cspan lang=\"fr\">bonjour\u003C\u002Fspan>.\u003C\u002Fp>\n```\n\n### Consistent navigation (3.2.3)\n\n```html\n\u003C!-- Navigation should be consistent across pages -->\n\u003Cnav aria-label=\"Main\">\n  \u003Cul>\n    \u003Cli>\u003Ca href=\"\u002F\" aria-current=\"page\">Home\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fproducts\">Products\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n```\n\n### Form labels (3.3.2)\n\n```html\n\u003C!-- ❌ No label association -->\n\u003Cinput type=\"email\" placeholder=\"Email\">\n\n\u003C!-- ✅ Explicit label -->\n\u003Clabel for=\"email\">Email address\u003C\u002Flabel>\n\u003Cinput type=\"email\" id=\"email\" name=\"email\" \n       autocomplete=\"email\" required>\n\n\u003C!-- ✅ Implicit label -->\n\u003Clabel>\n  Email address\n  \u003Cinput type=\"email\" name=\"email\" autocomplete=\"email\" required>\n\u003C\u002Flabel>\n\n\u003C!-- ✅ With instructions -->\n\u003Clabel for=\"password\">Password\u003C\u002Flabel>\n\u003Cinput type=\"password\" id=\"password\" \n       aria-describedby=\"password-requirements\">\n\u003Cp id=\"password-requirements\">\n  Must be at least 8 characters with one number.\n\u003C\u002Fp>\n```\n\n### Error handling (3.3.1, 3.3.3)\n\n```html\n\u003C!-- Announce errors to screen readers -->\n\u003Cform novalidate>\n  \u003Cdiv class=\"field\" aria-live=\"polite\">\n    \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n    \u003Cinput type=\"email\" id=\"email\" \n           aria-invalid=\"true\"\n           aria-describedby=\"email-error\">\n    \u003Cp id=\"email-error\" class=\"error\" role=\"alert\">\n      Please enter a valid email address (e.g., name@example.com)\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fform>\n```\n\n```javascript\n\u002F\u002F Focus first error on submit\nform.addEventListener('submit', (e) => {\n  const firstError = form.querySelector('[aria-invalid=\"true\"]');\n  if (firstError) {\n    e.preventDefault();\n    firstError.focus();\n    \n    \u002F\u002F Announce error summary\n    const errorSummary = document.getElementById('error-summary');\n    errorSummary.textContent = `${errors.length} errors found. Please fix them and try again.`;\n    errorSummary.focus();\n  }\n});\n```\n\n---\n\n## Robust\n\n### Valid HTML (4.1.1)\n\n```html\n\u003C!-- ❌ Duplicate IDs -->\n\u003Cdiv id=\"content\">...\u003C\u002Fdiv>\n\u003Cdiv id=\"content\">...\u003C\u002Fdiv>\n\n\u003C!-- ❌ Invalid nesting -->\n\u003Ca href=\"\u002F\">\u003Cbutton>Click\u003C\u002Fbutton>\u003C\u002Fa>\n\n\u003C!-- ✅ Unique IDs -->\n\u003Cdiv id=\"main-content\">...\u003C\u002Fdiv>\n\u003Cdiv id=\"sidebar-content\">...\u003C\u002Fdiv>\n\n\u003C!-- ✅ Proper nesting -->\n\u003Ca href=\"\u002F\" class=\"button-link\">Click\u003C\u002Fa>\n```\n\n### ARIA usage (4.1.2)\n\n**Prefer native elements:**\n```html\n\u003C!-- ❌ ARIA role on div -->\n\u003Cdiv role=\"button\" tabindex=\"0\">Click me\u003C\u002Fdiv>\n\n\u003C!-- ✅ Native button -->\n\u003Cbutton>Click me\u003C\u002Fbutton>\n\n\u003C!-- ❌ ARIA checkbox -->\n\u003Cdiv role=\"checkbox\" aria-checked=\"false\">Option\u003C\u002Fdiv>\n\n\u003C!-- ✅ Native checkbox -->\n\u003Clabel>\u003Cinput type=\"checkbox\"> Option\u003C\u002Flabel>\n```\n\n**When ARIA is needed:**\n```html\n\u003C!-- Custom tabs component -->\n\u003Cdiv role=\"tablist\" aria-label=\"Product information\">\n  \u003Cbutton role=\"tab\" id=\"tab-1\" aria-selected=\"true\" \n          aria-controls=\"panel-1\">Description\u003C\u002Fbutton>\n  \u003Cbutton role=\"tab\" id=\"tab-2\" aria-selected=\"false\" \n          aria-controls=\"panel-2\" tabindex=\"-1\">Reviews\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel-1\" aria-labelledby=\"tab-1\">\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel-2\" aria-labelledby=\"tab-2\" hidden>\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n```\n\n### Live regions (4.1.3)\n\n```html\n\u003C!-- Status updates -->\n\u003Cdiv aria-live=\"polite\" aria-atomic=\"true\" class=\"status\">\n  \u003C!-- Content updates announced to screen readers -->\n\u003C\u002Fdiv>\n\n\u003C!-- Urgent alerts -->\n\u003Cdiv role=\"alert\" aria-live=\"assertive\">\n  \u003C!-- Interrupts current announcement -->\n\u003C\u002Fdiv>\n```\n\n```javascript\n\u002F\u002F Announce dynamic content changes\nfunction showNotification(message, type = 'polite') {\n  const container = document.getElementById(`${type}-announcer`);\n  container.textContent = ''; \u002F\u002F Clear first\n  requestAnimationFrame(() => {\n    container.textContent = message;\n  });\n}\n```\n\n---\n\n## Testing checklist\n\n### Automated testing\n```bash\n# Lighthouse accessibility audit\nnpx lighthouse https:\u002F\u002Fexample.com --only-categories=accessibility\n\n# axe-core\nnpm install @axe-core\u002Fcli -g\naxe https:\u002F\u002Fexample.com\n```\n\n### Manual testing\n\n- [ ] **Keyboard navigation:** Tab through entire page, use Enter\u002FSpace to activate\n- [ ] **Screen reader:** Test with VoiceOver (Mac), NVDA (Windows), or TalkBack (Android)\n- [ ] **Zoom:** Content usable at 200% zoom\n- [ ] **High contrast:** Test with Windows High Contrast Mode\n- [ ] **Reduced motion:** Test with `prefers-reduced-motion: reduce`\n- [ ] **Focus order:** Logical and follows visual order\n\n### Screen reader commands\n\n| Action | VoiceOver (Mac) | NVDA (Windows) |\n|--------|-----------------|----------------|\n| Start\u002FStop | ⌘ + F5 | Ctrl + Alt + N |\n| Next item | VO + → | ↓ |\n| Previous item | VO + ← | ↑ |\n| Activate | VO + Space | Enter |\n| Headings list | VO + U, then arrows | H \u002F Shift + H |\n| Links list | VO + U | K \u002F Shift + K |\n\n---\n\n## Common issues by impact\n\n### Critical (fix immediately)\n1. Missing form labels\n2. Missing image alt text\n3. Insufficient color contrast\n4. Keyboard traps\n5. No focus indicators\n\n### Serious (fix before launch)\n1. Missing page language\n2. Missing heading structure\n3. Non-descriptive link text\n4. Auto-playing media\n5. Missing skip links\n\n### Moderate (fix soon)\n1. Missing ARIA labels on icons\n2. Inconsistent navigation\n3. Missing error identification\n4. Timing without controls\n5. Missing landmark regions\n\n## References\n\n- [WCAG 2.1 Quick Reference](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002Fquickref\u002F)\n- [WAI-ARIA Authoring Practices](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F)\n- [Deque axe Rules](https:\u002F\u002Fdequeuniversity.com\u002Frules\u002Faxe\u002F)\n- [Web Quality Audit](..\u002Fweb-quality-audit\u002FSKILL.md)\n",{"name":5,"license":15,"metadata":42,"description":7},{"author":43,"version":44},"web-quality-skills","1.0","main","90b50ed0778745a80fd5bfb13b1843d45b9e82f7","tests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Faccessibility",233,"https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust","https:\u002F\u002Fgithub.com\u002FDicklesworthstone","https:\u002F\u002Fwww.jeffreyemanuel.com\u002F","Building in NY","2026-11-13 03:33:43",{"source":8,"skillName":5,"commands":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add Dicklesworthstone\u002Fpi_agent_rust --skill accessibility",{"tool":60,"command":61},"bunx","bunx skills add Dicklesworthstone\u002Fpi_agent_rust --skill accessibility",{"tool":63,"command":64},"pnpm","pnpm dlx skills add Dicklesworthstone\u002Fpi_agent_rust --skill accessibility","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Faccessibility\u002FSKILL.md",true,[68],{"path":69,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":72,"sourceHtmlUrl":73},"references\u002FWCAG.md","REFERENCE","参考文档",7324,"https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Faccessibility\u002Freferences\u002FWCAG.md",[75,114,139,164,191,213],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":80,"sourceHtmlUrl":81,"categories":82,"keywords":88,"publishedAt":37},"01M6FEGPPK0ZTKCCM0R3E3KS33","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[83],{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[89,36,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,26,106,107,108,109,110,111,112,113],"web artifacts builder","artifacts","artifacts builder","builder","frontend","css","components","react","component","routing","state management","state","shadcn","file","ui","Tools","Tailwind","html","single-file","simple","ui components","multi","for","jsx","suite",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":118,"sourceHtmlUrl":119,"categories":120,"keywords":125,"publishedAt":37},"01M6FEE9VTK1W4GY21AKREJXRG","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[121,124],{"categoryNo":122,"categoryName":123,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},[126,127,128,93,129,130,36,131,132,133,103,134,135,136,137,138,111],"testing","webapp testing","webapp","screenshots","playwright","debugging","toolkit","browser","logs","applications","behavior","local","with",{"skillNo":140,"name":141,"nameZh":6,"description":142,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":143,"sourceHtmlUrl":144,"categories":145,"keywords":146,"publishedAt":37},"01M6FE20F7ZTQBFWKF4MPJ2SBX","neuropixels-analysis","Neuropixels neural recording analysis. Load SpikeGLX\u002FOpenEphys data, preprocess, motion correction, Kilosort4 spike sorting, quality metrics, Allen\u002FIBL curation, AI-assisted visual analysis, for Neuropixels 1.0\u002F2.0 extracellular electrophysiology. Use when working with neural recordings, spike sorting, extracellular electrophysiology, or when the user mentions Neuropixels, SpikeGLX, Open Ephys, Kilosort, quality metrics, or unit curation.","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fscientific\u002Fneuropixels-analysis\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fscientific\u002Fneuropixels-analysis\u002FSKILL.md",[],[147,148,149,150,151,152,19,153,26,154,155,156,157,158,159,160,138,161,162,163,111,20],"analysis","neuropixels analysis","spike","metrics","data","open","user","recordings","Neural","motion","visual","quality metrics","unit","sorting","curation","recording","load",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":168,"sourceHtmlUrl":169,"categories":170,"keywords":174,"publishedAt":37},"01M6FDP0PDK6F1GGX395C7625Z","skill-creator","Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FSKILL.md",[171],{"categoryNo":172,"categoryName":173,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000023","Skill与智能体开发",[175,176,177,178,179,180,181,182,183,184,185,186,187,188,138,111,189,20,190],"skill creator","creator","workflows","create","update","capabilities","knowledge","tool","integrations","specialized","guide","new skill","existing skill","users","Existing","new",{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":195,"sourceHtmlUrl":196,"categories":197,"keywords":199,"publishedAt":37},"01M6FDM8Y7VK7NYG9SM7QPA3PW","notebooklm","Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. Browser automation, library management, persistent auth. Drastically reduced hallucinations through document-only responses.","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fnotebooklm\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fnotebooklm\u002FSKILL.md",[198],{"categoryNo":172,"categoryName":173,"taxonomyType":86,"taxonomyTypeDesc":87},[193,200,201,202,203,204,205,133,206,207,26,208,209,210,211,111,212],"google","browser automation","gemini","automation","auth","code","library","management","only","document","query","Citation","source",{"skillNo":214,"name":215,"nameZh":6,"description":216,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":79,"licenseFileUrl":217,"sourceHtmlUrl":218,"categories":219,"keywords":226,"publishedAt":37},"01M6FDHPXE10J3XGTCH5HBHS1M","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FDicklesworthstone\u002Fpi_agent_rust\u002Fblob\u002Fmain\u002Ftests\u002Fext_conformance\u002Fartifacts\u002Ftemplates-davila7\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FSKILL.md",[220,223],{"categoryNo":221,"categoryName":222,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":224,"categoryName":225,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000016","图像与多媒体",[227,228,229,176,230,104,231,232,181,26,233,188,22,234,235,111,236,20],"slack gif creator","slack","gif","validation","constraints","Animation","me","Utilities","concepts","request"]