[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M73BTMTH341VVCH148YP4MAT":3,"skill-same:01M73BTMTH341VVCH148YP4MAT":59},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":38,"commitSha":39,"skillDirectory":40,"forksCount":41,"repositoryHtmlUrl":42,"repositoryHomepageUrl":6,"ownerHtmlUrl":43,"ownerBlogUrl":6,"ownerDescription":44,"updatedAt":45,"install":46,"resources":58},"01M73BTMTH341VVCH148YP4MAT","accessibility-audit",null,"Defines automated WCAG 2.1 Level AA accessibility evaluation rules, DOM audit patterns, and remediation guidance using axe-core for UI components, templates, and web applications.","5throck\u002Fai-workspace-standards","5throck","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F10958964?v=4","01M73BFEH0V0VS483TW4JD49JW","01M73BFEJ5VQZJHJSFTVPAZGDM",25,"AGPL-3.0","https:\u002F\u002Fgithub.com\u002F5throck\u002Fai-workspace-standards\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Faccessibility-audit\u002FSKILL.md",[],[],"2026-11-11 15:11:14",false,"---\nname: accessibility-audit\ndescription: >\n  Defines automated WCAG 2.1 Level AA accessibility evaluation rules, DOM audit patterns,\n  and remediation guidance using axe-core for UI components, templates, and web applications.\nversion: 1.1.0\nlast_reviewed: 2026-11-08\nstatus: active\nscope: common\nl2_propagate: true\nowner: pm\nprerequisites: axe-core (^4.9 || ^5.0), JSDOM \u002F Playwright \u002F Puppeteer test runner\nmetadata:\n  type: accessibility-testing\n  triggers:\n    - accessibility-audit\n    - \u002Faccessibility-audit\n    - axe-core audit\n    - wcag accessibility check\n    - wcag 2.1 aa\n---\n# ♿ Skill: accessibility-audit\n\n## Context\n\nIn UI\u002FUX design workflows and web development, accessible digital products ensure equal access for users with disabilities while satisfying international compliance mandates (WCAG 2.1 Level AA, Section 508, European Accessibility Act).\n\n`accessibility-audit` provides automated rules, evaluation engines, test execution patterns, and remediation guidelines using **`axe-core`** to continuously audit web applications, DOM structures, and design components against WCAG 2.1 AA standards.\n\n## When to Use\n\n**Component & UI Audits:**\n- Trigger: \"Run accessibility audit\" or \"Check WCAG compliance\"\n- Use Case: Auditing React\u002FHTML UI components for WCAG 2.1 AA violations during component development.\n\n**Design System Token & Color Contrast Testing:**\n- Trigger: \"Verify color contrast\" or \"Audit design tokens\"\n- Use Case: Ensuring token color pairings meet 4.5:1 text contrast ratios.\n\n**CI\u002FCD Pipeline Gates:**\n- Trigger: \"Run accessibility test suite\" or \"axe-core audit\"\n- Use Case: Blocking regressions in pull requests using automated Playwright or JSDOM test suites.\n\n## Execution Steps\n\n### Step 1: Engine & Rule Configuration\n\nAutomated audits execute using `axe-core` configured with WCAG 2.1 AA tags (`wcag2a`, `wcag2aa`, `wcag21a`, `wcag21aa`).\n\n```typescript\nimport axe from \"axe-core\";\n\nexport const AXE_WCAG21AA_CONFIG: axe.RunOptions = {\n  runOnly: {\n    type: \"tag\",\n    values: [\"wcag2a\", \"wcag2aa\", \"wcag21a\", \"wcag21aa\"],\n  },\n  resultTypes: [\"violations\", \"incomplete\"],\n};\n```\n\n### Step 2: Component Level Testing (JSDOM Environment)\n\n```typescript\nimport { JSDOM } from \"jsdom\";\nimport axe from \"axe-core\";\n\nexport async function auditHtmlSnippet(html: string): Promise\u003Caxe.AxeResults> {\n  const dom = new JSDOM(`\u003C!DOCTYPE html>\u003Chtml lang=\"en\">\u003Chead>\u003Ctitle>Audit\u003C\u002Ftitle>\u003C\u002Fhead>\u003Cbody>\u003Cmain>${html}\u003C\u002Fmain>\u003C\u002Fbody>\u003C\u002Fhtml>`, {\n    runScripts: \"dangerously\",\n  });\n\n  const { window } = dom;\n\n  const axeScript = require.resolve(\"axe-core\u002Faxe.min.js\");\n  const axeCode = require(\"fs\").readFileSync(axeScript, \"utf8\");\n  window.eval(axeCode);\n\n  const results = await (window as unknown as { axe: typeof axe }).axe.run(window.document, {\n    runOnly: {\n      type: \"tag\",\n      values: [\"wcag2a\", \"wcag2aa\", \"wcag21a\", \"wcag21aa\"],\n    },\n  });\n\n  return results;\n}\n```\n\n### Step 3: End-to-End Page Audit (Playwright Integration)\n\n```typescript\nimport { test, expect } from \"@playwright\u002Ftest\";\nimport AxeBuilder from \"@axe-core\u002Fplaywright\";\n\ntest.describe(\"WCAG 2.1 AA Accessibility Audit\", () => {\n  test(\"Page should have zero WCAG 2.1 AA violations\", async ({ page }) => {\n    await page.goto(\"http:\u002F\u002Flocalhost:3000\");\n\n    const accessibilityScanResults = await new AxeBuilder({ page })\n      .withTags([\"wcag2a\", \"wcag2aa\", \"wcag21a\", \"wcag21aa\"])\n      .analyze();\n\n    expect(accessibilityScanResults.violations).toEqual([]);\n  });\n});\n```\n\n### Step 4: Remediation Execution\n\nApply standard remediation patterns for detected violations:\n1. **Form Labels**: Bind `\u003Clabel for=\"id\">` explicitly to input elements.\n2. **Icon Buttons**: Add `aria-label` to icon-only interactive controls and `aria-hidden=\"true\"` to decorative SVGs.\n3. **Contrast Ratios**: Adjust foreground colors to satisfy >= 4.5:1 (normal text) or >= 3.0:1 (large text).\n\n## Output Format\n\nWhen `axe.run()` finishes, violations are structured into JSON reports containing failure summaries, DOM selectors, and severity impact metrics:\n\n```json\n{\n  \"summary\": {\n    \"totalViolations\": 1,\n    \"critical\": 1,\n    \"serious\": 0,\n    \"moderate\": 0,\n    \"minor\": 0\n  },\n  \"violations\": [\n    {\n      \"id\": \"color-contrast\",\n      \"impact\": \"critical\",\n      \"tags\": [\"cat.color\", \"wcag2aa\", \"wcag143\"],\n      \"description\": \"Ensures contrast between foreground and background colors meets WCAG 2 AA thresholds\",\n      \"help\": \"Elements must have sufficient color contrast\",\n      \"helpUrl\": \"https:\u002F\u002Fdequeuniversity.com\u002Frules\u002Faxe\u002F4.9\u002Fcolor-contrast\",\n      \"nodes\": [\n        {\n          \"html\": \"\u003Cbutton class=\\\"btn-subtle\\\" style=\\\"color: #999; background: #fff;\\\">Submit\u003C\u002Fbutton>\",\n          \"target\": [\"button.btn-subtle\"],\n          \"failureSummary\": \"Fix any of the following:\\n  Element has insufficient color contrast of 2.84 (expected 4.5:1)\"\n        }\n      ]\n    }\n  ]\n}\n```\n\n## Related Skills\n\n- **ui-ux-design-intelligence**: For design system token definitions and UI component design standards\n- **service-design**: For customer experience touchpoints and inclusive service blueprints\n- **zod-contract-gate**: For schema validation of audit configuration objects and diagnostic reporting DTOs\n","# ♿ Skill: accessibility-audit\n\n## Context\n\nIn UI\u002FUX design workflows and web development, accessible digital products ensure equal access for users with disabilities while satisfying international compliance mandates (WCAG 2.1 Level AA, Section 508, European Accessibility Act).\n\n`accessibility-audit` provides automated rules, evaluation engines, test execution patterns, and remediation guidelines using **`axe-core`** to continuously audit web applications, DOM structures, and design components against WCAG 2.1 AA standards.\n\n## When to Use\n\n**Component & UI Audits:**\n- Trigger: \"Run accessibility audit\" or \"Check WCAG compliance\"\n- Use Case: Auditing React\u002FHTML UI components for WCAG 2.1 AA violations during component development.\n\n**Design System Token & Color Contrast Testing:**\n- Trigger: \"Verify color contrast\" or \"Audit design tokens\"\n- Use Case: Ensuring token color pairings meet 4.5:1 text contrast ratios.\n\n**CI\u002FCD Pipeline Gates:**\n- Trigger: \"Run accessibility test suite\" or \"axe-core audit\"\n- Use Case: Blocking regressions in pull requests using automated Playwright or JSDOM test suites.\n\n## Execution Steps\n\n### Step 1: Engine & Rule Configuration\n\nAutomated audits execute using `axe-core` configured with WCAG 2.1 AA tags (`wcag2a`, `wcag2aa`, `wcag21a`, `wcag21aa`).\n\n```typescript\nimport axe from \"axe-core\";\n\nexport const AXE_WCAG21AA_CONFIG: axe.RunOptions = {\n  runOnly: {\n    type: \"tag\",\n    values: [\"wcag2a\", \"wcag2aa\", \"wcag21a\", \"wcag21aa\"],\n  },\n  resultTypes: [\"violations\", \"incomplete\"],\n};\n```\n\n### Step 2: Component Level Testing (JSDOM Environment)\n\n```typescript\nimport { JSDOM } from \"jsdom\";\nimport axe from \"axe-core\";\n\nexport async function auditHtmlSnippet(html: string): Promise\u003Caxe.AxeResults> {\n  const dom = new JSDOM(`\u003C!DOCTYPE html>\u003Chtml lang=\"en\">\u003Chead>\u003Ctitle>Audit\u003C\u002Ftitle>\u003C\u002Fhead>\u003Cbody>\u003Cmain>${html}\u003C\u002Fmain>\u003C\u002Fbody>\u003C\u002Fhtml>`, {\n    runScripts: \"dangerously\",\n  });\n\n  const { window } = dom;\n\n  const axeScript = require.resolve(\"axe-core\u002Faxe.min.js\");\n  const axeCode = require(\"fs\").readFileSync(axeScript, \"utf8\");\n  window.eval(axeCode);\n\n  const results = await (window as unknown as { axe: typeof axe }).axe.run(window.document, {\n    runOnly: {\n      type: \"tag\",\n      values: [\"wcag2a\", \"wcag2aa\", \"wcag21a\", \"wcag21aa\"],\n    },\n  });\n\n  return results;\n}\n```\n\n### Step 3: End-to-End Page Audit (Playwright Integration)\n\n```typescript\nimport { test, expect } from \"@playwright\u002Ftest\";\nimport AxeBuilder from \"@axe-core\u002Fplaywright\";\n\ntest.describe(\"WCAG 2.1 AA Accessibility Audit\", () => {\n  test(\"Page should have zero WCAG 2.1 AA violations\", async ({ page }) => {\n    await page.goto(\"http:\u002F\u002Flocalhost:3000\");\n\n    const accessibilityScanResults = await new AxeBuilder({ page })\n      .withTags([\"wcag2a\", \"wcag2aa\", \"wcag21a\", \"wcag21aa\"])\n      .analyze();\n\n    expect(accessibilityScanResults.violations).toEqual([]);\n  });\n});\n```\n\n### Step 4: Remediation Execution\n\nApply standard remediation patterns for detected violations:\n1. **Form Labels**: Bind `\u003Clabel for=\"id\">` explicitly to input elements.\n2. **Icon Buttons**: Add `aria-label` to icon-only interactive controls and `aria-hidden=\"true\"` to decorative SVGs.\n3. **Contrast Ratios**: Adjust foreground colors to satisfy >= 4.5:1 (normal text) or >= 3.0:1 (large text).\n\n## Output Format\n\nWhen `axe.run()` finishes, violations are structured into JSON reports containing failure summaries, DOM selectors, and severity impact metrics:\n\n```json\n{\n  \"summary\": {\n    \"totalViolations\": 1,\n    \"critical\": 1,\n    \"serious\": 0,\n    \"moderate\": 0,\n    \"minor\": 0\n  },\n  \"violations\": [\n    {\n      \"id\": \"color-contrast\",\n      \"impact\": \"critical\",\n      \"tags\": [\"cat.color\", \"wcag2aa\", \"wcag143\"],\n      \"description\": \"Ensures contrast between foreground and background colors meets WCAG 2 AA thresholds\",\n      \"help\": \"Elements must have sufficient color contrast\",\n      \"helpUrl\": \"https:\u002F\u002Fdequeuniversity.com\u002Frules\u002Faxe\u002F4.9\u002Fcolor-contrast\",\n      \"nodes\": [\n        {\n          \"html\": \"\u003Cbutton class=\\\"btn-subtle\\\" style=\\\"color: #999; background: #fff;\\\">Submit\u003C\u002Fbutton>\",\n          \"target\": [\"button.btn-subtle\"],\n          \"failureSummary\": \"Fix any of the following:\\n  Element has insufficient color contrast of 2.84 (expected 4.5:1)\"\n        }\n      ]\n    }\n  ]\n}\n```\n\n## Related Skills\n\n- **ui-ux-design-intelligence**: For design system token definitions and UI component design standards\n- **service-design**: For customer experience touchpoints and inclusive service blueprints\n- **zod-contract-gate**: For schema validation of audit configuration objects and diagnostic reporting DTOs\n",{"name":5,"owner":23,"scope":24,"status":25,"version":26,"metadata":27,"description":34,"l2_propagate":35,"last_reviewed":36,"prerequisites":37},"pm","common","active","1.1.0",{"type":28,"triggers":29},"accessibility-testing",[5,30,31,32,33],"\u002Faccessibility-audit","axe-core audit","wcag accessibility check","wcag 2.1 aa","Defines automated WCAG 2.1 Level AA accessibility evaluation rules, DOM audit patterns, and remediation guidance using axe-core for UI components, templates, and web applications.\n",true,1794096000000,"axe-core (^4.9 || ^5.0), JSDOM \u002F Playwright \u002F Puppeteer test runner","main","1162ccc568cf90c01b3886d6143cbfd851a37883",".codex\u002Fskills\u002Faccessibility-audit",9,"https:\u002F\u002Fgithub.com\u002F5throck\u002Fai-workspace-standards","https:\u002F\u002Fgithub.com\u002F5throck","Experienced in digital transformation, enterprise IT, startup acceleration, and business strategy. Focused on building practical systems that connect technolo","2026-11-14 21:22:34",{"source":8,"skillName":5,"commands":47,"prompt":57,"zipAvailable":35},[48,51,54],{"tool":49,"command":50},"npx","npx skills add 5throck\u002Fai-workspace-standards --skill accessibility-audit",{"tool":52,"command":53},"bunx","bunx skills add 5throck\u002Fai-workspace-standards --skill accessibility-audit",{"tool":55,"command":56},"pnpm","pnpm dlx skills add 5throck\u002Fai-workspace-standards --skill accessibility-audit","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002F5throck\u002Fai-workspace-standards\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Faccessibility-audit\u002FSKILL.md",[],[60,68,73,78,83,88],{"skillNo":61,"name":62,"nameZh":6,"description":63,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":64,"categories":65,"keywords":66,"publishedAt":67},"01M7BBJDYHJMGTJYSC37JVWY8S","i18n-layout","Text layout and encoding guidance: character encoding (UTF-8, legacy Korean code pages, BOM hazards), line endings, RTL\u002Fbidi handling, and script-specific font selection (Hangul focus). Use when: encoding is corrupted or mojibake appears, an RTL locale must render correctly, fonts must be chosen for a script, or CRLF\u002FBOM issues surface.","https:\u002F\u002Fgithub.com\u002F5throck\u002Fai-workspace-standards\u002Fblob\u002Fmain\u002Ftemplates\u002Fco-work\u002Fskills\u002Fi18n-layout\u002FSKILL.md",[],[],"2026-11-15 14:19:17",{"skillNo":69,"name":62,"nameZh":6,"description":63,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":72,"publishedAt":67},"01M7BBJ9XHAAS1AVGKZZ841VBZ","https:\u002F\u002Fgithub.com\u002F5throck\u002Fai-workspace-standards\u002Fblob\u002Fmain\u002Ftemplates\u002Fco-work\u002F.hermes\u002Fskills\u002Fi18n-layout\u002FSKILL.md",[],[],{"skillNo":74,"name":62,"nameZh":6,"description":63,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":77,"publishedAt":67},"01M7BBJ5C3X8TKFKG5R9P9P49W","https:\u002F\u002Fgithub.com\u002F5throck\u002Fai-workspace-standards\u002Fblob\u002Fmain\u002Ftemplates\u002Fco-work\u002F.gemini\u002Fskills\u002Fi18n-layout\u002FSKILL.md",[],[],{"skillNo":79,"name":62,"nameZh":6,"description":63,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":67},"01M7BBJ1B52X0QMJ2QVBMPJB37","https:\u002F\u002Fgithub.com\u002F5throck\u002Fai-workspace-standards\u002Fblob\u002Fmain\u002Ftemplates\u002Fco-work\u002F.codex\u002Fskills\u002Fi18n-layout\u002FSKILL.md",[],[],{"skillNo":84,"name":62,"nameZh":6,"description":63,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":67},"01M7BBHX91BW2Q2R276MRX5AW3","https:\u002F\u002Fgithub.com\u002F5throck\u002Fai-workspace-standards\u002Fblob\u002Fmain\u002Ftemplates\u002Fco-work\u002F.claude\u002Fskills\u002Fi18n-layout\u002FSKILL.md",[],[],{"skillNo":89,"name":62,"nameZh":6,"description":63,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":92,"publishedAt":67},"01M7BBHQWGXPSFRWN1PRC2NMMV","https:\u002F\u002Fgithub.com\u002F5throck\u002Fai-workspace-standards\u002Fblob\u002Fmain\u002Ftemplates\u002Fco-work\u002F.agents\u002Fskills\u002Fi18n-layout\u002FSKILL.md",[],[]]