[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M70NFEXWZE1EAC3CPVTZZBC3":3,"skill-same:01M70NFEXWZE1EAC3CPVTZZBC3":87},{"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":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":60,"repositoryHtmlUrl":61,"repositoryHomepageUrl":62,"ownerHtmlUrl":63,"ownerBlogUrl":64,"ownerDescription":65,"updatedAt":66,"install":67,"resources":80},"01M70NFEXWZE1EAC3CPVTZZBC3","accessibility-design",null,"WCAG 2.1 AA compliance patterns, screen reader compatibility, keyboard navigation, and ARIA best practices. Use when implementing accessible interfaces, reviewing UI components, or auditing accessibility compliance. Covers semantic HTML, focus management, color contrast, and assistive technology testing.","shengdabai\u002FTony-Claude-Code-Skills","shengdabai","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F116417419?v=4","01M70F6D2WY5PQV5A92BKYJQEW","Tony Sheng","01M70F6D3GAAAYZ5H4CC1G8VXM",3,"MIT","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Frsmdt-the-startup\u002Fplugins\u002Fteam\u002Fskills\u002Fdesign\u002Faccessibility-design\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"accessibility","accessibility design","design","ui components","color","html","compatibility","patterns","ui","contrast","aria","screen","focus","keyboard","components","accessibility compliance","when","implementing","compliance patterns","testing","2026-11-10 10:12:30",false,"---\nname: accessibility-design\ndescription: WCAG 2.1 AA compliance patterns, screen reader compatibility, keyboard navigation, and ARIA best practices. Use when implementing accessible interfaces, reviewing UI components, or auditing accessibility compliance. Covers semantic HTML, focus management, color contrast, and assistive technology testing.\n---\n\n# Accessibility Standards\n\n## Overview\n\nThis skill provides comprehensive guidance for implementing WCAG 2.1 AA compliance across digital products. It establishes patterns for semantic markup, assistive technology compatibility, and inclusive interaction design.\n\n## Core Principles\n\n### 1. POUR Framework\n\nAll accessibility work follows the four POUR principles:\n\n**Perceivable** - Information must be presentable in ways users can perceive\n- Provide text alternatives for non-text content\n- Create content adaptable to different presentations\n- Make content distinguishable (color, contrast, audio control)\n\n**Operable** - Interface components must be operable by all users\n- Make all functionality keyboard accessible\n- Provide sufficient time to read and use content\n- Avoid content that causes seizures or physical reactions\n- Help users navigate, find content, and determine location\n\n**Understandable** - Information and operation must be understandable\n- Make text readable and understandable\n- Make pages appear and operate predictably\n- Help users avoid and correct mistakes\n\n**Robust** - Content must be robust enough for diverse user agents\n- Maximize compatibility with current and future assistive technologies\n- Use valid, semantic markup\n- Ensure programmatic access to all functionality\n\n### 2. Semantic HTML First\n\nSemantic HTML is the foundation of accessibility. ARIA should enhance, never replace, proper markup.\n\n**Correct approach:**\n```html\n\u003Cbutton type=\"submit\">Submit Form\u003C\u002Fbutton>\n```\n\n**Incorrect approach:**\n```html\n\u003Cdiv role=\"button\" tabindex=\"0\" onclick=\"submit()\">Submit Form\u003C\u002Fdiv>\n```\n\nUse native HTML elements whenever possible:\n- `\u003Cbutton>` for actions\n- `\u003Ca href>` for navigation\n- `\u003Cinput>`, `\u003Cselect>`, `\u003Ctextarea>` for form controls\n- `\u003Cnav>`, `\u003Cmain>`, `\u003Caside>`, `\u003Cheader>`, `\u003Cfooter>` for landmarks\n- `\u003Ch1>` through `\u003Ch6>` for heading hierarchy\n\n### 3. Progressive Enhancement\n\nBuild accessibility in layers:\n1. Semantic HTML provides baseline accessibility\n2. CSS enhances presentation without breaking structure\n3. JavaScript adds interactivity while maintaining keyboard access\n4. ARIA fills gaps for complex widgets not covered by HTML\n\n## Implementation Patterns\n\n### Document Structure\n\nEvery page requires proper document structure:\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Descriptive Page Title - Site Name\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ca href=\"#main-content\" class=\"skip-link\">Skip to main content\u003C\u002Fa>\n\n  \u003Cheader role=\"banner\">\n    \u003Cnav aria-label=\"Main navigation\">\n      \u003C!-- Navigation content -->\n    \u003C\u002Fnav>\n  \u003C\u002Fheader>\n\n  \u003Cmain id=\"main-content\" role=\"main\">\n    \u003Ch1>Page Heading\u003C\u002Fh1>\n    \u003C!-- Page content -->\n  \u003C\u002Fmain>\n\n  \u003Cfooter role=\"contentinfo\">\n    \u003C!-- Footer content -->\n  \u003C\u002Ffooter>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Heading Hierarchy\n\nMaintain logical heading order without skipping levels:\n\n```html\n\u003Ch1>Main Page Title\u003C\u002Fh1>\n  \u003Ch2>Section Title\u003C\u002Fh2>\n    \u003Ch3>Subsection Title\u003C\u002Fh3>\n    \u003Ch3>Another Subsection\u003C\u002Fh3>\n  \u003Ch2>Another Section\u003C\u002Fh2>\n    \u003Ch3>Subsection\u003C\u002Fh3>\n      \u003Ch4>Sub-subsection\u003C\u002Fh4>\n```\n\n### Skip Links\n\nProvide skip links for keyboard users to bypass repetitive content:\n\n```css\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 0;\n  padding: 8px 16px;\n  background: #000;\n  color: #fff;\n  z-index: 100;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n```\n\n### Focus Management\n\n#### Visible Focus Indicators\n\nFocus indicators must be visible and meet contrast requirements:\n\n```css\n:focus {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n\n\u002F* Enhanced focus for better visibility *\u002F\n:focus-visible {\n  outline: 3px solid #005fcc;\n  outline-offset: 3px;\n  box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.25);\n}\n\n\u002F* Never remove focus indicators entirely *\u002F\n:focus:not(:focus-visible) {\n  outline: 2px solid transparent;\n  box-shadow: 0 0 0 2px #005fcc;\n}\n```\n\n#### Focus Trapping for Modals\n\n```javascript\nfunction trapFocus(element) {\n  const focusableElements = element.querySelectorAll(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  );\n  const firstFocusable = focusableElements[0];\n  const lastFocusable = focusableElements[focusableElements.length - 1];\n\n  element.addEventListener('keydown', (e) => {\n    if (e.key !== 'Tab') return;\n\n    if (e.shiftKey) {\n      if (document.activeElement === firstFocusable) {\n        lastFocusable.focus();\n        e.preventDefault();\n      }\n    } else {\n      if (document.activeElement === lastFocusable) {\n        firstFocusable.focus();\n        e.preventDefault();\n      }\n    }\n  });\n}\n```\n\n### Keyboard Navigation\n\n#### Standard Keyboard Patterns\n\n| Key | Action |\n|-----|--------|\n| Tab | Move focus to next focusable element |\n| Shift+Tab | Move focus to previous focusable element |\n| Enter\u002FSpace | Activate buttons and links |\n| Arrow keys | Navigate within components (menus, tabs, radio groups) |\n| Escape | Close modals, menus, dropdowns |\n| Home\u002FEnd | Move to first\u002Flast item in lists |\n\n#### Tab Order\n\nEnsure logical tab order follows visual order:\n\n```html\n\u003C!-- Correct: Tab order matches visual order -->\n\u003Cform>\n  \u003Clabel for=\"name\">Name\u003C\u002Flabel>\n  \u003Cinput id=\"name\" type=\"text\">\n\n  \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n  \u003Cinput id=\"email\" type=\"email\">\n\n  \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n\u003C\u002Fform>\n```\n\nNever use positive `tabindex` values. Only use:\n- `tabindex=\"0\"` to make non-interactive elements focusable\n- `tabindex=\"-1\"` to make elements programmatically focusable but not in tab order\n\n### ARIA Patterns\n\n#### When to Use ARIA\n\nUse ARIA only when native HTML cannot achieve the required accessibility:\n\n1. **Custom widgets** - Tabs, accordions, carousels, tree views\n2. **Dynamic content** - Live regions for updates\n3. **Relationships** - Connecting labels to complex controls\n4. **States** - Expanded\u002Fcollapsed, selected, pressed\n\n#### ARIA Roles\n\nCommon roles for custom widgets:\n\n```html\n\u003C!-- Tab pattern -->\n\u003Cdiv role=\"tablist\" aria-label=\"Settings tabs\">\n  \u003Cbutton role=\"tab\" aria-selected=\"true\" aria-controls=\"panel1\" id=\"tab1\">\n    General\n  \u003C\u002Fbutton>\n  \u003Cbutton role=\"tab\" aria-selected=\"false\" aria-controls=\"panel2\" id=\"tab2\">\n    Security\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel1\" aria-labelledby=\"tab1\">\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel2\" aria-labelledby=\"tab2\" hidden>\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n```\n\n#### ARIA States and Properties\n\n| Attribute | Purpose | Example |\n|-----------|---------|---------|\n| `aria-expanded` | Indicates expandable element state | `aria-expanded=\"false\"` |\n| `aria-selected` | Indicates selection state | `aria-selected=\"true\"` |\n| `aria-pressed` | Indicates toggle button state | `aria-pressed=\"mixed\"` |\n| `aria-hidden` | Hides content from assistive tech | `aria-hidden=\"true\"` |\n| `aria-live` | Announces dynamic content | `aria-live=\"polite\"` |\n| `aria-describedby` | References descriptive content | `aria-describedby=\"hint\"` |\n| `aria-labelledby` | References labeling content | `aria-labelledby=\"heading\"` |\n\n#### Live Regions\n\nAnnounce dynamic content changes:\n\n```html\n\u003C!-- Polite: Announces when user is idle -->\n\u003Cdiv aria-live=\"polite\" aria-atomic=\"true\">\n  Form saved successfully\n\u003C\u002Fdiv>\n\n\u003C!-- Assertive: Interrupts immediately (use sparingly) -->\n\u003Cdiv aria-live=\"assertive\" role=\"alert\">\n  Error: Please correct the highlighted fields\n\u003C\u002Fdiv>\n\n\u003C!-- Status messages -->\n\u003Cdiv role=\"status\">\n  Loading... 50% complete\n\u003C\u002Fdiv>\n```\n\n### Form Accessibility\n\n#### Labels and Instructions\n\nEvery form control requires a label:\n\n```html\n\u003C!-- Explicit label association -->\n\u003Clabel for=\"username\">Username\u003C\u002Flabel>\n\u003Cinput type=\"text\" id=\"username\" name=\"username\"\n       aria-describedby=\"username-hint\">\n\u003Cspan id=\"username-hint\">Must be 3-20 characters\u003C\u002Fspan>\n\n\u003C!-- Grouped controls with fieldset -->\n\u003Cfieldset>\n  \u003Clegend>Shipping Address\u003C\u002Flegend>\n  \u003Clabel for=\"street\">Street\u003C\u002Flabel>\n  \u003Cinput type=\"text\" id=\"street\">\n  \u003C!-- More fields -->\n\u003C\u002Ffieldset>\n```\n\n#### Error Handling\n\nProvide clear, actionable error messages:\n\n```html\n\u003Clabel for=\"email\">Email\u003C\u002Flabel>\n\u003Cinput type=\"email\" id=\"email\"\n       aria-invalid=\"true\"\n       aria-describedby=\"email-error\">\n\u003Cspan id=\"email-error\" role=\"alert\">\n  Please enter a valid email address (example: user@domain.com)\n\u003C\u002Fspan>\n```\n\nError message requirements:\n- Identify the field in error\n- Describe what went wrong\n- Provide guidance for correction\n- Use `aria-invalid` on the field\n- Announce errors via live region or `role=\"alert\"`\n\n#### Required Fields\n\n```html\n\u003Clabel for=\"name\">\n  Name \u003Cspan aria-hidden=\"true\">*\u003C\u002Fspan>\n  \u003Cspan class=\"sr-only\">(required)\u003C\u002Fspan>\n\u003C\u002Flabel>\n\u003Cinput type=\"text\" id=\"name\" required aria-required=\"true\">\n```\n\n### Images and Media\n\n#### Alternative Text\n\nProvide meaningful alt text for informative images:\n\n```html\n\u003C!-- Informative image -->\n\u003Cimg src=\"chart.png\" alt=\"Q3 revenue increased 15% compared to Q2\">\n\n\u003C!-- Decorative image -->\n\u003Cimg src=\"divider.png\" alt=\"\" role=\"presentation\">\n\n\u003C!-- Complex image with extended description -->\n\u003Cfigure>\n  \u003Cimg src=\"flowchart.png\" alt=\"User registration process\"\n       aria-describedby=\"flowchart-desc\">\n  \u003Cfigcaption id=\"flowchart-desc\">\n    The registration process begins with email verification,\n    followed by profile creation, and ends with account activation.\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n```\n\n#### Video and Audio\n\n```html\n\u003Cvideo controls>\n  \u003Csource src=\"video.mp4\" type=\"video\u002Fmp4\">\n  \u003Ctrack kind=\"captions\" src=\"captions.vtt\" srclang=\"en\" label=\"English\">\n  \u003Ctrack kind=\"descriptions\" src=\"descriptions.vtt\" srclang=\"en\"\n         label=\"Audio descriptions\">\n\u003C\u002Fvideo>\n```\n\n### Color and Contrast\n\n#### Minimum Contrast Ratios\n\n| Content Type | Minimum Ratio (AA) | Enhanced Ratio (AAA) |\n|--------------|-------------------|---------------------|\n| Normal text (\u003C 18pt) | 4.5:1 | 7:1 |\n| Large text (>= 18pt or 14pt bold) | 3:1 | 4.5:1 |\n| UI components and graphics | 3:1 | N\u002FA |\n\n#### Never Rely on Color Alone\n\n```html\n\u003C!-- Bad: Color only indicates error -->\n\u003Cinput style=\"border-color: red\">\n\n\u003C!-- Good: Color plus icon and text -->\n\u003Cinput aria-invalid=\"true\" aria-describedby=\"error\">\n\u003Cspan id=\"error\">\n  \u003Csvg aria-hidden=\"true\">\u003C!-- Error icon -->\u003C\u002Fsvg>\n  Invalid email format\n\u003C\u002Fspan>\n```\n\n### Motion and Animation\n\n#### Respect User Preferences\n\n```css\n\u002F* Reduce motion for users who prefer it *\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  }\n}\n```\n\n#### Auto-playing Content\n\n- Avoid auto-playing video or audio\n- Provide controls to pause, stop, or hide moving content\n- Limit animations to under 5 seconds or provide stop mechanism\n\n## Testing Methodology\n\n### Automated Testing\n\nRun automated tools to catch common issues:\n\n1. **axe DevTools** - Browser extension for page analysis\n2. **WAVE** - Web accessibility evaluation tool\n3. **Lighthouse** - Chrome DevTools accessibility audit\n4. **pa11y** - Command-line accessibility testing\n\nAutomated testing catches approximately 30-40% of issues.\n\n### Manual Testing\n\n#### Keyboard Testing\n\n1. Disconnect or disable mouse\n2. Navigate entire page using Tab\u002FShift+Tab\n3. Verify all interactive elements are reachable\n4. Verify focus indicators are visible\n5. Test all keyboard shortcuts\n6. Escape from all modals and menus\n\n#### Screen Reader Testing\n\nTest with multiple screen readers:\n\n| Platform | Screen Reader | Browser |\n|----------|---------------|---------|\n| Windows | NVDA (free) | Firefox, Chrome |\n| Windows | JAWS | Chrome, Edge |\n| macOS | VoiceOver | Safari |\n| iOS | VoiceOver | Safari |\n| Android | TalkBack | Chrome |\n\nScreen reader testing checklist:\n- [ ] All images have appropriate alt text\n- [ ] Headings convey page structure\n- [ ] Links and buttons have descriptive names\n- [ ] Form fields have labels\n- [ ] Error messages are announced\n- [ ] Dynamic content updates are announced\n- [ ] Tables have proper headers\n- [ ] Custom widgets announce state changes\n\n#### Visual Testing\n\n- Zoom to 200% and verify no horizontal scrolling\n- Test with high contrast mode enabled\n- Disable images and verify content is still understandable\n- Test with browser text size increased\n\n### WCAG Audit\n\nPerform manual audit against WCAG 2.1 AA success criteria. See `checklists\u002Fwcag-checklist.md` for the complete checklist.\n\n## Common Patterns\n\n### Modal Dialog\n\n```html\n\u003Cdiv role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog-title\">\n  \u003Ch2 id=\"dialog-title\">Confirm Action\u003C\u002Fh2>\n  \u003Cp>Are you sure you want to proceed?\u003C\u002Fp>\n  \u003Cbutton type=\"button\">Cancel\u003C\u002Fbutton>\n  \u003Cbutton type=\"button\">Confirm\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\nRequirements:\n- Focus moves to dialog when opened\n- Focus is trapped within dialog\n- Escape key closes dialog\n- Focus returns to trigger element on close\n\n### Accordion\n\n```html\n\u003Cdiv class=\"accordion\">\n  \u003Ch3>\n    \u003Cbutton aria-expanded=\"true\" aria-controls=\"section1\">\n      Section 1\n    \u003C\u002Fbutton>\n  \u003C\u002Fh3>\n  \u003Cdiv id=\"section1\" role=\"region\" aria-labelledby=\"section1-heading\">\n    \u003C!-- Content -->\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n### Navigation Menu\n\n```html\n\u003Cnav aria-label=\"Main\">\n  \u003Cul>\n    \u003Cli>\u003Ca href=\"\u002F\" aria-current=\"page\">Home\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\n      \u003Cbutton aria-expanded=\"false\" aria-haspopup=\"true\">\n        Products\n      \u003C\u002Fbutton>\n      \u003Cul>\n        \u003Cli>\u003Ca href=\"\u002Fproducts\u002Fa\">Product A\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"\u002Fproducts\u002Fb\">Product B\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n```\n\n### Data Table\n\n```html\n\u003Ctable>\n  \u003Ccaption>Q3 Sales by Region\u003C\u002Fcaption>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth scope=\"col\">Region\u003C\u002Fth>\n      \u003Cth scope=\"col\">Units Sold\u003C\u002Fth>\n      \u003Cth scope=\"col\">Revenue\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Cth scope=\"row\">North\u003C\u002Fth>\n      \u003Ctd>1,234\u003C\u002Ftd>\n      \u003Ctd>$45,678\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n```\n\n## Resources\n\n- [WCAG 2.1 Guidelines](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002Fquickref\u002F)\n- [WAI-ARIA Authoring Practices](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F)\n- [Inclusive Components](https:\u002F\u002Finclusive-components.design\u002F)\n- [A11y Project Checklist](https:\u002F\u002Fwww.a11yproject.com\u002Fchecklist\u002F)\n","# Accessibility Standards\n\n## Overview\n\nThis skill provides comprehensive guidance for implementing WCAG 2.1 AA compliance across digital products. It establishes patterns for semantic markup, assistive technology compatibility, and inclusive interaction design.\n\n## Core Principles\n\n### 1. POUR Framework\n\nAll accessibility work follows the four POUR principles:\n\n**Perceivable** - Information must be presentable in ways users can perceive\n- Provide text alternatives for non-text content\n- Create content adaptable to different presentations\n- Make content distinguishable (color, contrast, audio control)\n\n**Operable** - Interface components must be operable by all users\n- Make all functionality keyboard accessible\n- Provide sufficient time to read and use content\n- Avoid content that causes seizures or physical reactions\n- Help users navigate, find content, and determine location\n\n**Understandable** - Information and operation must be understandable\n- Make text readable and understandable\n- Make pages appear and operate predictably\n- Help users avoid and correct mistakes\n\n**Robust** - Content must be robust enough for diverse user agents\n- Maximize compatibility with current and future assistive technologies\n- Use valid, semantic markup\n- Ensure programmatic access to all functionality\n\n### 2. Semantic HTML First\n\nSemantic HTML is the foundation of accessibility. ARIA should enhance, never replace, proper markup.\n\n**Correct approach:**\n```html\n\u003Cbutton type=\"submit\">Submit Form\u003C\u002Fbutton>\n```\n\n**Incorrect approach:**\n```html\n\u003Cdiv role=\"button\" tabindex=\"0\" onclick=\"submit()\">Submit Form\u003C\u002Fdiv>\n```\n\nUse native HTML elements whenever possible:\n- `\u003Cbutton>` for actions\n- `\u003Ca href>` for navigation\n- `\u003Cinput>`, `\u003Cselect>`, `\u003Ctextarea>` for form controls\n- `\u003Cnav>`, `\u003Cmain>`, `\u003Caside>`, `\u003Cheader>`, `\u003Cfooter>` for landmarks\n- `\u003Ch1>` through `\u003Ch6>` for heading hierarchy\n\n### 3. Progressive Enhancement\n\nBuild accessibility in layers:\n1. Semantic HTML provides baseline accessibility\n2. CSS enhances presentation without breaking structure\n3. JavaScript adds interactivity while maintaining keyboard access\n4. ARIA fills gaps for complex widgets not covered by HTML\n\n## Implementation Patterns\n\n### Document Structure\n\nEvery page requires proper document structure:\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Descriptive Page Title - Site Name\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ca href=\"#main-content\" class=\"skip-link\">Skip to main content\u003C\u002Fa>\n\n  \u003Cheader role=\"banner\">\n    \u003Cnav aria-label=\"Main navigation\">\n      \u003C!-- Navigation content -->\n    \u003C\u002Fnav>\n  \u003C\u002Fheader>\n\n  \u003Cmain id=\"main-content\" role=\"main\">\n    \u003Ch1>Page Heading\u003C\u002Fh1>\n    \u003C!-- Page content -->\n  \u003C\u002Fmain>\n\n  \u003Cfooter role=\"contentinfo\">\n    \u003C!-- Footer content -->\n  \u003C\u002Ffooter>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### Heading Hierarchy\n\nMaintain logical heading order without skipping levels:\n\n```html\n\u003Ch1>Main Page Title\u003C\u002Fh1>\n  \u003Ch2>Section Title\u003C\u002Fh2>\n    \u003Ch3>Subsection Title\u003C\u002Fh3>\n    \u003Ch3>Another Subsection\u003C\u002Fh3>\n  \u003Ch2>Another Section\u003C\u002Fh2>\n    \u003Ch3>Subsection\u003C\u002Fh3>\n      \u003Ch4>Sub-subsection\u003C\u002Fh4>\n```\n\n### Skip Links\n\nProvide skip links for keyboard users to bypass repetitive content:\n\n```css\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 0;\n  padding: 8px 16px;\n  background: #000;\n  color: #fff;\n  z-index: 100;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n```\n\n### Focus Management\n\n#### Visible Focus Indicators\n\nFocus indicators must be visible and meet contrast requirements:\n\n```css\n:focus {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n\n\u002F* Enhanced focus for better visibility *\u002F\n:focus-visible {\n  outline: 3px solid #005fcc;\n  outline-offset: 3px;\n  box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.25);\n}\n\n\u002F* Never remove focus indicators entirely *\u002F\n:focus:not(:focus-visible) {\n  outline: 2px solid transparent;\n  box-shadow: 0 0 0 2px #005fcc;\n}\n```\n\n#### Focus Trapping for Modals\n\n```javascript\nfunction trapFocus(element) {\n  const focusableElements = element.querySelectorAll(\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  );\n  const firstFocusable = focusableElements[0];\n  const lastFocusable = focusableElements[focusableElements.length - 1];\n\n  element.addEventListener('keydown', (e) => {\n    if (e.key !== 'Tab') return;\n\n    if (e.shiftKey) {\n      if (document.activeElement === firstFocusable) {\n        lastFocusable.focus();\n        e.preventDefault();\n      }\n    } else {\n      if (document.activeElement === lastFocusable) {\n        firstFocusable.focus();\n        e.preventDefault();\n      }\n    }\n  });\n}\n```\n\n### Keyboard Navigation\n\n#### Standard Keyboard Patterns\n\n| Key | Action |\n|-----|--------|\n| Tab | Move focus to next focusable element |\n| Shift+Tab | Move focus to previous focusable element |\n| Enter\u002FSpace | Activate buttons and links |\n| Arrow keys | Navigate within components (menus, tabs, radio groups) |\n| Escape | Close modals, menus, dropdowns |\n| Home\u002FEnd | Move to first\u002Flast item in lists |\n\n#### Tab Order\n\nEnsure logical tab order follows visual order:\n\n```html\n\u003C!-- Correct: Tab order matches visual order -->\n\u003Cform>\n  \u003Clabel for=\"name\">Name\u003C\u002Flabel>\n  \u003Cinput id=\"name\" type=\"text\">\n\n  \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n  \u003Cinput id=\"email\" type=\"email\">\n\n  \u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\n\u003C\u002Fform>\n```\n\nNever use positive `tabindex` values. Only use:\n- `tabindex=\"0\"` to make non-interactive elements focusable\n- `tabindex=\"-1\"` to make elements programmatically focusable but not in tab order\n\n### ARIA Patterns\n\n#### When to Use ARIA\n\nUse ARIA only when native HTML cannot achieve the required accessibility:\n\n1. **Custom widgets** - Tabs, accordions, carousels, tree views\n2. **Dynamic content** - Live regions for updates\n3. **Relationships** - Connecting labels to complex controls\n4. **States** - Expanded\u002Fcollapsed, selected, pressed\n\n#### ARIA Roles\n\nCommon roles for custom widgets:\n\n```html\n\u003C!-- Tab pattern -->\n\u003Cdiv role=\"tablist\" aria-label=\"Settings tabs\">\n  \u003Cbutton role=\"tab\" aria-selected=\"true\" aria-controls=\"panel1\" id=\"tab1\">\n    General\n  \u003C\u002Fbutton>\n  \u003Cbutton role=\"tab\" aria-selected=\"false\" aria-controls=\"panel2\" id=\"tab2\">\n    Security\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel1\" aria-labelledby=\"tab1\">\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n\u003Cdiv role=\"tabpanel\" id=\"panel2\" aria-labelledby=\"tab2\" hidden>\n  \u003C!-- Panel content -->\n\u003C\u002Fdiv>\n```\n\n#### ARIA States and Properties\n\n| Attribute | Purpose | Example |\n|-----------|---------|---------|\n| `aria-expanded` | Indicates expandable element state | `aria-expanded=\"false\"` |\n| `aria-selected` | Indicates selection state | `aria-selected=\"true\"` |\n| `aria-pressed` | Indicates toggle button state | `aria-pressed=\"mixed\"` |\n| `aria-hidden` | Hides content from assistive tech | `aria-hidden=\"true\"` |\n| `aria-live` | Announces dynamic content | `aria-live=\"polite\"` |\n| `aria-describedby` | References descriptive content | `aria-describedby=\"hint\"` |\n| `aria-labelledby` | References labeling content | `aria-labelledby=\"heading\"` |\n\n#### Live Regions\n\nAnnounce dynamic content changes:\n\n```html\n\u003C!-- Polite: Announces when user is idle -->\n\u003Cdiv aria-live=\"polite\" aria-atomic=\"true\">\n  Form saved successfully\n\u003C\u002Fdiv>\n\n\u003C!-- Assertive: Interrupts immediately (use sparingly) -->\n\u003Cdiv aria-live=\"assertive\" role=\"alert\">\n  Error: Please correct the highlighted fields\n\u003C\u002Fdiv>\n\n\u003C!-- Status messages -->\n\u003Cdiv role=\"status\">\n  Loading... 50% complete\n\u003C\u002Fdiv>\n```\n\n### Form Accessibility\n\n#### Labels and Instructions\n\nEvery form control requires a label:\n\n```html\n\u003C!-- Explicit label association -->\n\u003Clabel for=\"username\">Username\u003C\u002Flabel>\n\u003Cinput type=\"text\" id=\"username\" name=\"username\"\n       aria-describedby=\"username-hint\">\n\u003Cspan id=\"username-hint\">Must be 3-20 characters\u003C\u002Fspan>\n\n\u003C!-- Grouped controls with fieldset -->\n\u003Cfieldset>\n  \u003Clegend>Shipping Address\u003C\u002Flegend>\n  \u003Clabel for=\"street\">Street\u003C\u002Flabel>\n  \u003Cinput type=\"text\" id=\"street\">\n  \u003C!-- More fields -->\n\u003C\u002Ffieldset>\n```\n\n#### Error Handling\n\nProvide clear, actionable error messages:\n\n```html\n\u003Clabel for=\"email\">Email\u003C\u002Flabel>\n\u003Cinput type=\"email\" id=\"email\"\n       aria-invalid=\"true\"\n       aria-describedby=\"email-error\">\n\u003Cspan id=\"email-error\" role=\"alert\">\n  Please enter a valid email address (example: user@domain.com)\n\u003C\u002Fspan>\n```\n\nError message requirements:\n- Identify the field in error\n- Describe what went wrong\n- Provide guidance for correction\n- Use `aria-invalid` on the field\n- Announce errors via live region or `role=\"alert\"`\n\n#### Required Fields\n\n```html\n\u003Clabel for=\"name\">\n  Name \u003Cspan aria-hidden=\"true\">*\u003C\u002Fspan>\n  \u003Cspan class=\"sr-only\">(required)\u003C\u002Fspan>\n\u003C\u002Flabel>\n\u003Cinput type=\"text\" id=\"name\" required aria-required=\"true\">\n```\n\n### Images and Media\n\n#### Alternative Text\n\nProvide meaningful alt text for informative images:\n\n```html\n\u003C!-- Informative image -->\n\u003Cimg src=\"chart.png\" alt=\"Q3 revenue increased 15% compared to Q2\">\n\n\u003C!-- Decorative image -->\n\u003Cimg src=\"divider.png\" alt=\"\" role=\"presentation\">\n\n\u003C!-- Complex image with extended description -->\n\u003Cfigure>\n  \u003Cimg src=\"flowchart.png\" alt=\"User registration process\"\n       aria-describedby=\"flowchart-desc\">\n  \u003Cfigcaption id=\"flowchart-desc\">\n    The registration process begins with email verification,\n    followed by profile creation, and ends with account activation.\n  \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n```\n\n#### Video and Audio\n\n```html\n\u003Cvideo controls>\n  \u003Csource src=\"video.mp4\" type=\"video\u002Fmp4\">\n  \u003Ctrack kind=\"captions\" src=\"captions.vtt\" srclang=\"en\" label=\"English\">\n  \u003Ctrack kind=\"descriptions\" src=\"descriptions.vtt\" srclang=\"en\"\n         label=\"Audio descriptions\">\n\u003C\u002Fvideo>\n```\n\n### Color and Contrast\n\n#### Minimum Contrast Ratios\n\n| Content Type | Minimum Ratio (AA) | Enhanced Ratio (AAA) |\n|--------------|-------------------|---------------------|\n| Normal text (\u003C 18pt) | 4.5:1 | 7:1 |\n| Large text (>= 18pt or 14pt bold) | 3:1 | 4.5:1 |\n| UI components and graphics | 3:1 | N\u002FA |\n\n#### Never Rely on Color Alone\n\n```html\n\u003C!-- Bad: Color only indicates error -->\n\u003Cinput style=\"border-color: red\">\n\n\u003C!-- Good: Color plus icon and text -->\n\u003Cinput aria-invalid=\"true\" aria-describedby=\"error\">\n\u003Cspan id=\"error\">\n  \u003Csvg aria-hidden=\"true\">\u003C!-- Error icon -->\u003C\u002Fsvg>\n  Invalid email format\n\u003C\u002Fspan>\n```\n\n### Motion and Animation\n\n#### Respect User Preferences\n\n```css\n\u002F* Reduce motion for users who prefer it *\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  }\n}\n```\n\n#### Auto-playing Content\n\n- Avoid auto-playing video or audio\n- Provide controls to pause, stop, or hide moving content\n- Limit animations to under 5 seconds or provide stop mechanism\n\n## Testing Methodology\n\n### Automated Testing\n\nRun automated tools to catch common issues:\n\n1. **axe DevTools** - Browser extension for page analysis\n2. **WAVE** - Web accessibility evaluation tool\n3. **Lighthouse** - Chrome DevTools accessibility audit\n4. **pa11y** - Command-line accessibility testing\n\nAutomated testing catches approximately 30-40% of issues.\n\n### Manual Testing\n\n#### Keyboard Testing\n\n1. Disconnect or disable mouse\n2. Navigate entire page using Tab\u002FShift+Tab\n3. Verify all interactive elements are reachable\n4. Verify focus indicators are visible\n5. Test all keyboard shortcuts\n6. Escape from all modals and menus\n\n#### Screen Reader Testing\n\nTest with multiple screen readers:\n\n| Platform | Screen Reader | Browser |\n|----------|---------------|---------|\n| Windows | NVDA (free) | Firefox, Chrome |\n| Windows | JAWS | Chrome, Edge |\n| macOS | VoiceOver | Safari |\n| iOS | VoiceOver | Safari |\n| Android | TalkBack | Chrome |\n\nScreen reader testing checklist:\n- [ ] All images have appropriate alt text\n- [ ] Headings convey page structure\n- [ ] Links and buttons have descriptive names\n- [ ] Form fields have labels\n- [ ] Error messages are announced\n- [ ] Dynamic content updates are announced\n- [ ] Tables have proper headers\n- [ ] Custom widgets announce state changes\n\n#### Visual Testing\n\n- Zoom to 200% and verify no horizontal scrolling\n- Test with high contrast mode enabled\n- Disable images and verify content is still understandable\n- Test with browser text size increased\n\n### WCAG Audit\n\nPerform manual audit against WCAG 2.1 AA success criteria. See `checklists\u002Fwcag-checklist.md` for the complete checklist.\n\n## Common Patterns\n\n### Modal Dialog\n\n```html\n\u003Cdiv role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"dialog-title\">\n  \u003Ch2 id=\"dialog-title\">Confirm Action\u003C\u002Fh2>\n  \u003Cp>Are you sure you want to proceed?\u003C\u002Fp>\n  \u003Cbutton type=\"button\">Cancel\u003C\u002Fbutton>\n  \u003Cbutton type=\"button\">Confirm\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\nRequirements:\n- Focus moves to dialog when opened\n- Focus is trapped within dialog\n- Escape key closes dialog\n- Focus returns to trigger element on close\n\n### Accordion\n\n```html\n\u003Cdiv class=\"accordion\">\n  \u003Ch3>\n    \u003Cbutton aria-expanded=\"true\" aria-controls=\"section1\">\n      Section 1\n    \u003C\u002Fbutton>\n  \u003C\u002Fh3>\n  \u003Cdiv id=\"section1\" role=\"region\" aria-labelledby=\"section1-heading\">\n    \u003C!-- Content -->\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n### Navigation Menu\n\n```html\n\u003Cnav aria-label=\"Main\">\n  \u003Cul>\n    \u003Cli>\u003Ca href=\"\u002F\" aria-current=\"page\">Home\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\n      \u003Cbutton aria-expanded=\"false\" aria-haspopup=\"true\">\n        Products\n      \u003C\u002Fbutton>\n      \u003Cul>\n        \u003Cli>\u003Ca href=\"\u002Fproducts\u002Fa\">Product A\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"\u002Fproducts\u002Fb\">Product B\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n```\n\n### Data Table\n\n```html\n\u003Ctable>\n  \u003Ccaption>Q3 Sales by Region\u003C\u002Fcaption>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth scope=\"col\">Region\u003C\u002Fth>\n      \u003Cth scope=\"col\">Units Sold\u003C\u002Fth>\n      \u003Cth scope=\"col\">Revenue\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Cth scope=\"row\">North\u003C\u002Fth>\n      \u003Ctd>1,234\u003C\u002Ftd>\n      \u003Ctd>$45,678\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n```\n\n## Resources\n\n- [WCAG 2.1 Guidelines](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002Fquickref\u002F)\n- [WAI-ARIA Authoring Practices](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F)\n- [Inclusive Components](https:\u002F\u002Finclusive-components.design\u002F)\n- [A11y Project Checklist](https:\u002F\u002Fwww.a11yproject.com\u002Fchecklist\u002F)\n",{"name":5,"description":7},"main","7850740bd837adb32f0a109ab2af82482196c6f2","skills\u002Frsmdt-the-startup\u002Fplugins\u002Fteam\u002Fskills\u002Fdesign\u002Faccessibility-design",1,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills","https:\u002F\u002Fzturnsgo.com","https:\u002F\u002Fgithub.com\u002Fshengdabai","https:\u002F\u002Fzturnsgo.com\u002F","AI × education creator — producer, not consumer. Taught 6,000+ learners; shipping learning tools & daily essays with Claude Code, practicing @xiaolai's way 🥋","2026-11-01 21:28:23",{"source":8,"skillName":5,"commands":68,"prompt":78,"zipAvailable":79},[69,72,75],{"tool":70,"command":71},"npx","npx skills add shengdabai\u002FTony-Claude-Code-Skills --skill accessibility-design",{"tool":73,"command":74},"bunx","bunx skills add shengdabai\u002FTony-Claude-Code-Skills --skill accessibility-design",{"tool":76,"command":77},"pnpm","pnpm dlx skills add shengdabai\u002FTony-Claude-Code-Skills --skill accessibility-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Frsmdt-the-startup\u002Fplugins\u002Fteam\u002Fskills\u002Fdesign\u002Faccessibility-design\u002FSKILL.md",true,[81],{"path":82,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":85,"sourceHtmlUrl":86},"checklists\u002Fwcag-checklist.md","REFERENCE","参考文档",16342,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Frsmdt-the-startup\u002Fplugins\u002Fteam\u002Fskills\u002Fdesign\u002Faccessibility-design\u002Fchecklists\u002Fwcag-checklist.md",[88,105,137,163,185,205],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":97,"publishedAt":52},"01M70P17DAD4C1C47NPH6A96EM","xiaolai-methodology","以李笑来(Li Xiaolai)的思考方式、方法论与表达风格,为用户做全方位 1-on-1 教练指导,覆盖创业、赚钱、投资、学习、自学、读书写作、用 AI、以及人生心态与自我管理。当用户提到 \"李笑来\"、\"笑来\"、\"笑来老师\"、\"扮演李笑来\"、\"找笑来聊聊\"、\"笑来怎么看\"、\"xiaolai\"、\"把时间当作朋友\"、\"通往财富自由之路\"、\"定投改变命运\"、\"韭菜的自我修养\"、\"自学是门手艺\"、\"让时间陪你慢慢变富\"、\"七年就是一辈子\"、\"元认知\"、\"活在未来\"、\"复利\u002F长期主义\"、\"践行\"、\"痴迷改进\"、\"个人商业模式\u002F出售时间\"、\"睡后收入\"、\"定投\"、\"财富自由\"、\"操作系统升级\"、\"最少必要知识\"、\"北极星提示词\"、\"用 AI 该怎么学\u002F思考\" 等任一触发词,或当用户带着关于创业\u002F赚钱\u002F投资\u002F学习\u002F职业\u002F重大人生决策的困惑、希望被人用笑来式的「逻辑 + 大白话 + 类比 + 重新定义 + 践行导向」来点醒和指导时,自动进入李笑来教练模式。","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fxiaolai-methodology\u002FSKILL.md",[94],{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",[98,99,100,101,102,103,104],"methodology","xiaolai","xiaolai methodology","朋友","投资","writing","收入",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":117,"publishedAt":52},"01M70P13NB9YP7ACJR1S861CDS","zread","Produce and consume a wiki-style knowledge base for a code repository via the `zread` CLI and its on-disk output under `.\u002F.zread\u002Fwiki\u002F`. Use this skill whenever the user wants to understand, onboard onto, explore, summarize, map, or get an overview of an unfamiliar codebase; asks for architecture docs, a project wiki, a repo walkthrough, module\u002Fpackage explanations, or \"what does this repo do\"; wants to generate, regenerate, resume, browse, or serve code documentation locally; or mentions zread \u002F zread.ai directly. Also use it proactively before diving into a large unknown repo — if `.\u002F.zread\u002Fwiki\u002Fcurrent` exists, read the generated pages instead of crawling source file-by-file; if it doesn't, consider offering to run `zread generate`. The trigger is the intent (understand a codebase through generated docs), not the literal word \"zread\".","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fzread\u002FSKILL.md",[111,114],{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":115,"categoryName":116,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000030","开发工程师",[107,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136],"knowledge","wiki","explore","walkthrough","project","get","knowledge base","run","generate","intent","cli","map","documentation","project wiki","disk","architecture","code","unknown","generated",{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":147,"publishedAt":52},"01M70P10S4SWMZQ8BJAFBFDRW3","youtube","Launch the YouTube Creator Agent to auto-generate videos.\nUse when: user types \u002Fyoutube, wants to create YouTube videos,\ngenerate video content, or upload to YouTube.\nKeywords: youtube, video, 视频, 创作视频, 发布视频","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[143,144],{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":145,"categoryName":146,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000036","内容创作者",[139,148,149,150,151,152,153,154,126,155,156,157,48,158,159,160,161,162],"user","content","视频","creator","generate video","videos","launch","video content","create","upload","use","auto","types","Video","创作",{"skillNo":164,"name":165,"nameZh":6,"description":166,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":167,"categories":168,"keywords":170,"publishedAt":52},"01M70P0YE95D8BACZCGV8BK90K","youtube-script-sync","Sync, update, or optimize Tony's GetNote knowledge base `Youtube视频逐字稿` by turning each parent recording or first-person idea note into an idempotent child note containing a directly recordable YouTube long-video or Shorts script. Use when the user says “更新\u002F同步\u002F优化 Youtube视频逐字稿知识库”, or says “更新\u002F同步\u002F优化该知识库” while this knowledge base is the active context.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-script-sync\u002FSKILL.md",[169],{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},[171,172,139,173,174,161,175,176,177,178,179,180,181,182,124,183,48,158,118,184],"sync","script","youtube script sync","recording","shorts","first","base","person","update","active","child","optimize","idempotent","long",{"skillNo":186,"name":187,"nameZh":6,"description":188,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":189,"categories":190,"keywords":195,"publishedAt":52},"01M70P0WMV5XT0EEC0N445PW07","writing-skills","How to write SKILL.md files that trigger reliably and teach effectively. Use when creating, improving, or reviewing Claude Code skills.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-skills\u002FSKILL.md",[191,192,193,194],{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":115,"categoryName":116,"taxonomyType":29,"taxonomyTypeDesc":30},{"categoryNo":145,"categoryName":146,"taxonomyType":29,"taxonomyTypeDesc":30},[196,103,197,198,199,200,134,48,158,201,202,203,204],"writing skills","how","teach","write skill","write","claude code skills","files","how to","trigger",{"skillNo":206,"name":207,"nameZh":6,"description":208,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":209,"categories":210,"keywords":213,"publishedAt":52},"01M70P0SJFR4YVJQBGMHKGSKXT","writing-rules","How to write .claude\u002Frules\u002F files that Claude actually follows. Use when creating, improving, or reviewing project rules.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-rules\u002FSKILL.md",[211,212],{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":145,"categoryName":146,"taxonomyType":29,"taxonomyTypeDesc":30},[214,103,215,122,216,202,48,197,200,158,203],"Rules","writing rules","project rules"]