[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6AEAY3WRBSJCF19WXK39X52":3,"skill-same:01M6AEAY3WRBSJCF19WXK39X52":75},{"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":50,"ownerHtmlUrl":51,"ownerBlogUrl":52,"ownerDescription":53,"updatedAt":54,"install":55,"resources":68},"01M6AEAY3WRBSJCF19WXK39X52","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\".","davila7\u002Fclaude-code-templates","davila7","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6216945?v=4","01M6ADEWWFPS191NFM0Y1EX1JH","Daniel Avila","01M6ADJHGM78PHQRD3XZTFDVKK",33481,"MIT","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\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","2b749c82b5d11fac39d9a6e021ce3f5b8a541bd1","cli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Faccessibility",3931,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates","https:\u002F\u002Faitmpl.com","https:\u002F\u002Fgithub.com\u002Fdavila7","https:\u002F\u002Fdanielavila.me","Building AI dev tools with LLMs","2026-11-14 06:14:46",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add davila7\u002Fclaude-code-templates --skill accessibility",{"tool":61,"command":62},"bunx","bunx skills add davila7\u002Fclaude-code-templates --skill accessibility",{"tool":64,"command":65},"pnpm","pnpm dlx skills add davila7\u002Fclaude-code-templates --skill accessibility","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Faccessibility\u002FSKILL.md",true,[69],{"path":70,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":74},"references\u002FWCAG.md","REFERENCE","参考文档",7324,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Faccessibility\u002Freferences\u002FWCAG.md",[76,106,132,165,199,223],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":87,"publishedAt":37},"01M70NHBTQ8BV0A2SCAZXEPHCX","wealthville-pool-scoring","Score DeFi liquidity pools before providing liquidity. Returns a 0-100 pool score and an Enter\u002FHold\u002FExit\u002FReduce\u002FAvoid verdict with calibrated confidence for ~68,800 Solana pools and 575 EVM pools, plus a public miss-inclusive track record. Use when asked whether a pool is worth LPing into, which pools look best right now, or how accurate the scores have actually been.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fwealthville-pool-scoring\u002FSKILL.md",[82],{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[88,89,90,91,92,93,94,95,26,20,96,97,98,99,100,101,102,103,104,105],"scoring","pool","wealthville pool scoring","liquidity","which","for","exit","now","reduce","with","record","track","verdict","evm","solana","how","public","look",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":113,"publishedAt":37},"01M70MB6VR8ERJ4EM8D5KHBMEV","technical-debt-auditor","Scans a codebase and produces a quantified technical debt report with a prioritized remediation plan. Analyzes dead code, TODO\u002FFIXME\u002FHACK markers, dependency staleness, complexity hotspots, code duplication signals, test coverage gaps, unused exports, and outdated patterns. Use this skill when the user asks to audit their codebase for tech debt, wants a health check of their code quality, says things like \"where should I focus refactoring\", \"find code smells\", \"audit my codebase\", \"what technical debt do we have\", \"prioritize cleanup work\", or asks about code quality metrics. Also trigger when the user mentions \"code rot\", \"legacy cleanup\", \"refactoring priorities\", or wants to understand the overall health of a project before a major effort. Trigger even if the user doesn't say \"technical debt\" explicitly — any request to systematically assess code quality and identify improvement priorities belongs here.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Ftechnical-debt-auditor\u002FSKILL.md",[112],{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},[114,115,116,117,118,119,120,121,122,123,124,20,125,126,127,128,129,130,33,131],"technical debt","debt","technical","technical debt auditor","auditor","coverage","complexity","markers","project","cleanup","unused","code","todo","work","plan","focus","signals","dependency",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":147,"publishedAt":37},"01M70KPYH9QNHCNME5GJQGE22K","readonly-sql-guard","Make an agent's database access provably read-only. Use when an agent runs caller-supplied SQL against a production\u002FERP\u002Fanalytics database (a \"query\" MCP tool, text-to-SQL, an admin console), or when reviewing DB-access code for write\u002FDDL\u002Fside-effect\u002Ftransaction-escape risks. Checks what a statement CALLS, not just its shape.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdatabase\u002Freadonly-sql-guard\u002FSKILL.md",[138,141,142],{"categoryNo":139,"categoryName":140,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},{"categoryNo":143,"categoryName":144,"taxonomyType":145,"taxonomyTypeDesc":146},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[148,149,150,151,152,153,154,93,155,156,157,158,159,160,161,26,162,163,20,164],"readonly","guard","sql guard","sql","readonly sql guard","erp","effect","read-only","db","just","tool","calls","only","MCP","access","database","query",{"skillNo":166,"name":167,"nameZh":6,"description":168,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":169,"licenseFileUrl":170,"sourceHtmlUrl":171,"categories":172,"keywords":176,"publishedAt":37},"01M6AFY6F7CC2BBZP1QD6VTNVC","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\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[173],{"categoryNo":174,"categoryName":175,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000009","前端开发",[177,36,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,93,198],"artifacts builder","web artifacts builder","artifacts","builder","state","routing","state management","component","css","frontend","ui","Tools","file","components","shadcn","react","Tailwind","suite","jsx","html","single-file","ui components",{"skillNo":200,"name":201,"nameZh":6,"description":202,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":169,"licenseFileUrl":203,"sourceHtmlUrl":204,"categories":205,"keywords":210,"publishedAt":37},"01M6AFWF33SFV9Z3SF4PEEE4BF","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\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[206,209],{"categoryNo":207,"categoryName":208,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":174,"categoryName":175,"taxonomyType":85,"taxonomyTypeDesc":86},[211,212,213,214,215,36,216,186,187,217,218,219,220,93,221,97,222],"webapp testing","testing","webapp","browser","playwright","applications","debugging","toolkit","logs","screenshots","local","behavior",{"skillNo":224,"name":225,"nameZh":6,"description":226,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":169,"licenseFileUrl":227,"sourceHtmlUrl":228,"categories":229,"keywords":237,"publishedAt":37},"01M6AF67Q67JJJ5V51JR2P52KA","discernment-nudge","After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FSKILL.md",[230,233,234],{"categoryNo":231,"categoryName":232,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},{"categoryNo":235,"categoryName":236,"taxonomyType":145,"taxonomyTypeDesc":146},"01JBSEEDCAT000000000000036","内容创作者",[238,239,240,241,242,243,244,245,179,246,189,125,247,248,249,250,251,160,252,20,253,254,255,256,257,103,258],"discernment nudge","nudge","interpretation","help","run","reasoning","data","writing","lookup","content","review","conversation","short","up","invoke","you","analysis","claims","argument","assemble","recommendations"]