[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7AMCFGV3BR15R57JDVAPF43":3,"skill-same:01M7AMCFGV3BR15R57JDVAPF43":113},{"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":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":30,"ownerDescription":31,"updatedAt":32,"install":33,"resources":46},"01M7AMCFGV3BR15R57JDVAPF43","a11y-audit",null,"Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI\u002FCD pipelines.","Cyrilthetecchieee\u002Fcyril-code-","Cyrilthetecchieee","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F219787998?v=4","01M7AF0MMMKRAA0H61XMJPV92H","Julian Cyril D ","01M7AF0MQ10AVG6QJQ1C2BC0F5",2,"MIT","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: \"a11y-audit\"\ndescription: \"Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI\u002FCD pipelines.\"\n---\n\n# Accessibility Audit\n\nWCAG 2.2 Accessibility Audit and Remediation Skill\n\n## Description\n\nThe a11y-audit skill provides a complete accessibility audit pipeline for modern web applications. It implements a three-phase workflow -- Scan, Fix, Verify -- that identifies WCAG 2.2 Level A and AA violations, generates exact fix code per framework, and produces stakeholder-ready compliance reports.\n\nFor every violation it finds, it provides the precise before\u002Fafter code fix tailored to your framework (React, Next.js, Vue, Angular, Svelte, or plain HTML).\n\n**What this skill does:**\n\n1. **Scans** your codebase for every WCAG 2.2 Level A and AA violation, categorized by severity (Critical, Major, Minor)\n2. **Fixes** each violation with framework-specific before\u002Fafter code patterns\n3. **Verifies** that fixes resolve the original violations and introduces no regressions\n4. **Reports** findings in a structured format suitable for developers, PMs, and compliance stakeholders\n5. **Integrates** into CI\u002FCD pipelines to prevent accessibility regressions\n\n## Features\n\n| Feature | Description |\n|---------|-------------|\n| **Full WCAG 2.2 Scan** | Checks all Level A and AA success criteria across your codebase |\n| **Framework Detection** | Auto-detects React, Next.js, Vue, Angular, Svelte, or plain HTML |\n| **Severity Classification** | Categorizes each violation as Critical, Major, or Minor |\n| **Fix Code Generation** | Produces before\u002Fafter code diffs for every issue |\n| **Color Contrast Checker** | Validates foreground\u002Fbackground pairs against AA and AAA ratios |\n| **Compliance Reporting** | Generates stakeholder reports with pass\u002Ffail summaries |\n| **CI\u002FCD Integration** | GitHub Actions, GitLab CI, Azure DevOps pipeline configs |\n| **Keyboard Navigation Audit** | Detects missing focus management and tab order issues |\n| **ARIA Validation** | Checks for incorrect, redundant, or missing ARIA attributes |\n\n### Severity Definitions\n\n| Severity | Definition | Example | SLA |\n|----------|-----------|---------|-----|\n| **Critical** | Blocks access for entire user groups | Missing alt text, no keyboard access to navigation | Fix before release |\n| **Major** | Significant barrier that degrades experience | Insufficient color contrast, missing form labels | Fix within current sprint |\n| **Minor** | Usability issue that causes friction | Redundant ARIA roles, suboptimal heading hierarchy | Fix within next 2 sprints |\n\n## Usage\n\n### Quick Start\n\n```bash\n# Scan entire project\npython scripts\u002Fa11y_scanner.py \u002Fpath\u002Fto\u002Fproject\n\n# Scan with JSON output for tooling\npython scripts\u002Fa11y_scanner.py \u002Fpath\u002Fto\u002Fproject --json\n\n# Check color contrast for specific values\npython scripts\u002Fcontrast_checker.py --fg \"#777777\" --bg \"#ffffff\"\n\n# Check contrast across a CSS\u002FTailwind file\npython scripts\u002Fcontrast_checker.py --file \u002Fpath\u002Fto\u002Fstyles.css\n```\n\n### Slash Command\n\n```\n\u002Fa11y-audit                    # Audit current project\n\u002Fa11y-audit --scope src\u002F       # Audit specific directory\n\u002Fa11y-audit --fix              # Audit and auto-apply fixes\n\u002Fa11y-audit --report           # Generate stakeholder report\n\u002Fa11y-audit --ci               # Output CI-compatible results\n```\n\n### Three-Phase Workflow\n\n**Phase 1: Scan** -- Walk the source tree, detect framework, apply rule set.\n\n```bash\npython scripts\u002Fa11y_scanner.py \u002Fpath\u002Fto\u002Fproject --format table\n```\n\n**Phase 2: Fix** -- Apply framework-specific fixes for each violation.\n\n> See [references\u002Fframework-a11y-patterns.md](references\u002Fframework-a11y-patterns.md) for the complete fix patterns catalog.\n\n**Phase 3: Verify** -- Re-run the scanner to confirm fixes and check for regressions.\n\n```bash\npython scripts\u002Fa11y_scanner.py \u002Fpath\u002Fto\u002Fproject --baseline audit-baseline.json\n```\n\n## Example: React Component Audit\n\n```tsx\n\u002F\u002F BEFORE: src\u002Fcomponents\u002FProductCard.tsx\nfunction ProductCard({ product }) {\n  return (\n    \u003Cdiv onClick={() => navigate(`\u002Fproduct\u002F${product.id}`)}>\n      \u003Cimg src={product.image} \u002F>\n      \u003Cdiv style={{ color: '#aaa', fontSize: '12px' }}>{product.name}\u003C\u002Fdiv>\n      \u003Cspan style={{ color: '#999' }}>${product.price}\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n| # | WCAG | Severity | Issue |\n|---|------|----------|-------|\n| 1 | 1.1.1 | Critical | `\u003Cimg>` missing `alt` attribute |\n| 2 | 2.1.1 | Critical | `\u003Cdiv onClick>` not keyboard accessible |\n| 3 | 1.4.3 | Major | Color `#aaa` on white fails contrast (2.32:1, needs 4.5:1) |\n| 4 | 1.4.3 | Major | Color `#999` on white fails contrast (2.85:1, needs 4.5:1) |\n| 5 | 4.1.2 | Major | Interactive element missing role and accessible name |\n\n```tsx\n\u002F\u002F AFTER: src\u002Fcomponents\u002FProductCard.tsx\nfunction ProductCard({ product }) {\n  return (\n    \u003Ca href={`\u002Fproduct\u002F${product.id}`} className=\"product-card\"\n       aria-label={`View ${product.name} - $${product.price}`}>\n      \u003Cimg src={product.image} alt={product.imageAlt || product.name} \u002F>\n      \u003Cdiv style={{ color: '#595959', fontSize: '12px' }}>{product.name}\u003C\u002Fdiv>\n      \u003Cspan style={{ color: '#767676' }}>${product.price}\u003C\u002Fspan>\n    \u003C\u002Fa>\n  );\n}\n```\n\n> See [references\u002Fexamples-by-framework.md](references\u002Fexamples-by-framework.md) for Vue, Angular, Next.js, and Svelte examples.\n\n## Tools Reference\n\n### a11y_scanner.py\n\n```\nUsage: python scripts\u002Fa11y_scanner.py \u003Cpath> [options]\n\nOptions:\n  --json                  Output results as JSON\n  --format {table,csv}    Output format (default: table)\n  --severity {critical,major,minor}  Filter by minimum severity\n  --framework {react,vue,angular,svelte,html,auto}  Force framework (default: auto)\n  --baseline FILE         Compare against previous scan results\n  --report                Generate stakeholder report\n  --output FILE           Write results to file\n  --quiet                 Suppress output, exit code only\n  --ci                    CI mode: non-zero exit on critical issues\n```\n\n### contrast_checker.py\n\n```\nUsage: python scripts\u002Fcontrast_checker.py [options]\n\nOptions:\n  --fg COLOR              Foreground color (hex)\n  --bg COLOR              Background color (hex)\n  --file FILE             Scan CSS file for color pairs\n  --tailwind DIR          Scan directory for Tailwind color classes\n  --json                  Output results as JSON\n  --suggest               Suggest accessible alternatives for failures\n  --level {aa,aaa}        Target conformance level (default: aa)\n```\n\n## Common Pitfalls\n\n| Pitfall | Correct Approach |\n|---------|------------------|\n| `role=\"button\"` on a `\u003Cdiv>` | Use native `\u003Cbutton>` -- includes keyboard handling for free |\n| `tabindex=\"0\"` on everything | Only interactive elements need focus; use native elements |\n| `aria-label` on non-interactive elements | Use `aria-labelledby` pointing to visible text |\n| `display: none` for screen reader hiding | Use `.sr-only` class instead |\n| Color alone to convey meaning | Add icons, text labels, or patterns alongside color |\n| Placeholder as only label | Always provide a visible `\u003Clabel>` |\n| `outline: none` without replacement | Always provide a visible focus indicator via `focus-visible` |\n| Empty `alt=\"\"` on informational images | Informational images need descriptive alt text |\n| Skipping heading levels (h1 -> h3) | Heading levels must be sequential |\n| `onClick` without `onKeyDown` | Add keyboard support or prefer native elements |\n| Ignoring `prefers-reduced-motion` | Wrap animations in `@media (prefers-reduced-motion: no-preference)` |\n\n## Related Skills\n\n| Skill | Relationship |\n|-------|-------------|\n| **senior-frontend** | Frontend patterns used in a11y fixes |\n| **code-reviewer** | Include a11y checks in code review workflows |\n| **senior-qa** | Integration of a11y testing into QA processes |\n| **playwright-pro** | Automated browser testing with accessibility assertions |\n| **epic-design** | WCAG 2.1 AA compliant animations and scroll storytelling |\n| **tdd-guide** | Test-driven development patterns for a11y test cases |\n\n## Reference Documentation\n\n| Reference | Description |\n|-----------|-------------|\n| [wcag-quick-ref.md](references\u002Fwcag-quick-ref.md) | WCAG 2.2 Level A & AA criteria quick reference |\n| [wcag-22-new-criteria.md](references\u002Fwcag-22-new-criteria.md) | New WCAG 2.2 success criteria (Focus Appearance, Target Size, etc.) |\n| [aria-patterns.md](references\u002Faria-patterns.md) | ARIA patterns, keyboard interaction, and live regions |\n| [framework-a11y-patterns.md](references\u002Fframework-a11y-patterns.md) | Framework-specific fix patterns (React, Vue, Angular, Svelte, HTML) |\n| [color-contrast-guide.md](references\u002Fcolor-contrast-guide.md) | Color contrast checker details, Tailwind palette mapping, sr-only class |\n| [ci-cd-integration.md](references\u002Fci-cd-integration.md) | GitHub Actions, GitLab CI, Azure DevOps, pre-commit hook configs |\n| [audit-report-template.md](references\u002Faudit-report-template.md) | Stakeholder-ready audit report template |\n| [testing-checklist.md](references\u002Ftesting-checklist.md) | Manual testing checklist (keyboard, screen reader, visual, forms) |\n| [examples-by-framework.md](references\u002Fexamples-by-framework.md) | Full audit examples for Vue, Angular, Next.js, and Svelte |\n\n## Resources\n\n- [WCAG 2.2 Specification](https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F)\n- [WAI-ARIA Authoring Practices 1.2](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F)\n- [Deque axe-core Rules](https:\u002F\u002Fgithub.com\u002Fdequelabs\u002Faxe-core\u002Fblob\u002Fdevelop\u002Fdoc\u002Frule-descriptions.md)\n- [eslint-plugin-jsx-a11y](https:\u002F\u002Fgithub.com\u002Fjsx-eslint\u002Feslint-plugin-jsx-a11y)\n","# Accessibility Audit\n\nWCAG 2.2 Accessibility Audit and Remediation Skill\n\n## Description\n\nThe a11y-audit skill provides a complete accessibility audit pipeline for modern web applications. It implements a three-phase workflow -- Scan, Fix, Verify -- that identifies WCAG 2.2 Level A and AA violations, generates exact fix code per framework, and produces stakeholder-ready compliance reports.\n\nFor every violation it finds, it provides the precise before\u002Fafter code fix tailored to your framework (React, Next.js, Vue, Angular, Svelte, or plain HTML).\n\n**What this skill does:**\n\n1. **Scans** your codebase for every WCAG 2.2 Level A and AA violation, categorized by severity (Critical, Major, Minor)\n2. **Fixes** each violation with framework-specific before\u002Fafter code patterns\n3. **Verifies** that fixes resolve the original violations and introduces no regressions\n4. **Reports** findings in a structured format suitable for developers, PMs, and compliance stakeholders\n5. **Integrates** into CI\u002FCD pipelines to prevent accessibility regressions\n\n## Features\n\n| Feature | Description |\n|---------|-------------|\n| **Full WCAG 2.2 Scan** | Checks all Level A and AA success criteria across your codebase |\n| **Framework Detection** | Auto-detects React, Next.js, Vue, Angular, Svelte, or plain HTML |\n| **Severity Classification** | Categorizes each violation as Critical, Major, or Minor |\n| **Fix Code Generation** | Produces before\u002Fafter code diffs for every issue |\n| **Color Contrast Checker** | Validates foreground\u002Fbackground pairs against AA and AAA ratios |\n| **Compliance Reporting** | Generates stakeholder reports with pass\u002Ffail summaries |\n| **CI\u002FCD Integration** | GitHub Actions, GitLab CI, Azure DevOps pipeline configs |\n| **Keyboard Navigation Audit** | Detects missing focus management and tab order issues |\n| **ARIA Validation** | Checks for incorrect, redundant, or missing ARIA attributes |\n\n### Severity Definitions\n\n| Severity | Definition | Example | SLA |\n|----------|-----------|---------|-----|\n| **Critical** | Blocks access for entire user groups | Missing alt text, no keyboard access to navigation | Fix before release |\n| **Major** | Significant barrier that degrades experience | Insufficient color contrast, missing form labels | Fix within current sprint |\n| **Minor** | Usability issue that causes friction | Redundant ARIA roles, suboptimal heading hierarchy | Fix within next 2 sprints |\n\n## Usage\n\n### Quick Start\n\n```bash\n# Scan entire project\npython scripts\u002Fa11y_scanner.py \u002Fpath\u002Fto\u002Fproject\n\n# Scan with JSON output for tooling\npython scripts\u002Fa11y_scanner.py \u002Fpath\u002Fto\u002Fproject --json\n\n# Check color contrast for specific values\npython scripts\u002Fcontrast_checker.py --fg \"#777777\" --bg \"#ffffff\"\n\n# Check contrast across a CSS\u002FTailwind file\npython scripts\u002Fcontrast_checker.py --file \u002Fpath\u002Fto\u002Fstyles.css\n```\n\n### Slash Command\n\n```\n\u002Fa11y-audit                    # Audit current project\n\u002Fa11y-audit --scope src\u002F       # Audit specific directory\n\u002Fa11y-audit --fix              # Audit and auto-apply fixes\n\u002Fa11y-audit --report           # Generate stakeholder report\n\u002Fa11y-audit --ci               # Output CI-compatible results\n```\n\n### Three-Phase Workflow\n\n**Phase 1: Scan** -- Walk the source tree, detect framework, apply rule set.\n\n```bash\npython scripts\u002Fa11y_scanner.py \u002Fpath\u002Fto\u002Fproject --format table\n```\n\n**Phase 2: Fix** -- Apply framework-specific fixes for each violation.\n\n> See [references\u002Fframework-a11y-patterns.md](references\u002Fframework-a11y-patterns.md) for the complete fix patterns catalog.\n\n**Phase 3: Verify** -- Re-run the scanner to confirm fixes and check for regressions.\n\n```bash\npython scripts\u002Fa11y_scanner.py \u002Fpath\u002Fto\u002Fproject --baseline audit-baseline.json\n```\n\n## Example: React Component Audit\n\n```tsx\n\u002F\u002F BEFORE: src\u002Fcomponents\u002FProductCard.tsx\nfunction ProductCard({ product }) {\n  return (\n    \u003Cdiv onClick={() => navigate(`\u002Fproduct\u002F${product.id}`)}>\n      \u003Cimg src={product.image} \u002F>\n      \u003Cdiv style={{ color: '#aaa', fontSize: '12px' }}>{product.name}\u003C\u002Fdiv>\n      \u003Cspan style={{ color: '#999' }}>${product.price}\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n| # | WCAG | Severity | Issue |\n|---|------|----------|-------|\n| 1 | 1.1.1 | Critical | `\u003Cimg>` missing `alt` attribute |\n| 2 | 2.1.1 | Critical | `\u003Cdiv onClick>` not keyboard accessible |\n| 3 | 1.4.3 | Major | Color `#aaa` on white fails contrast (2.32:1, needs 4.5:1) |\n| 4 | 1.4.3 | Major | Color `#999` on white fails contrast (2.85:1, needs 4.5:1) |\n| 5 | 4.1.2 | Major | Interactive element missing role and accessible name |\n\n```tsx\n\u002F\u002F AFTER: src\u002Fcomponents\u002FProductCard.tsx\nfunction ProductCard({ product }) {\n  return (\n    \u003Ca href={`\u002Fproduct\u002F${product.id}`} className=\"product-card\"\n       aria-label={`View ${product.name} - $${product.price}`}>\n      \u003Cimg src={product.image} alt={product.imageAlt || product.name} \u002F>\n      \u003Cdiv style={{ color: '#595959', fontSize: '12px' }}>{product.name}\u003C\u002Fdiv>\n      \u003Cspan style={{ color: '#767676' }}>${product.price}\u003C\u002Fspan>\n    \u003C\u002Fa>\n  );\n}\n```\n\n> See [references\u002Fexamples-by-framework.md](references\u002Fexamples-by-framework.md) for Vue, Angular, Next.js, and Svelte examples.\n\n## Tools Reference\n\n### a11y_scanner.py\n\n```\nUsage: python scripts\u002Fa11y_scanner.py \u003Cpath> [options]\n\nOptions:\n  --json                  Output results as JSON\n  --format {table,csv}    Output format (default: table)\n  --severity {critical,major,minor}  Filter by minimum severity\n  --framework {react,vue,angular,svelte,html,auto}  Force framework (default: auto)\n  --baseline FILE         Compare against previous scan results\n  --report                Generate stakeholder report\n  --output FILE           Write results to file\n  --quiet                 Suppress output, exit code only\n  --ci                    CI mode: non-zero exit on critical issues\n```\n\n### contrast_checker.py\n\n```\nUsage: python scripts\u002Fcontrast_checker.py [options]\n\nOptions:\n  --fg COLOR              Foreground color (hex)\n  --bg COLOR              Background color (hex)\n  --file FILE             Scan CSS file for color pairs\n  --tailwind DIR          Scan directory for Tailwind color classes\n  --json                  Output results as JSON\n  --suggest               Suggest accessible alternatives for failures\n  --level {aa,aaa}        Target conformance level (default: aa)\n```\n\n## Common Pitfalls\n\n| Pitfall | Correct Approach |\n|---------|------------------|\n| `role=\"button\"` on a `\u003Cdiv>` | Use native `\u003Cbutton>` -- includes keyboard handling for free |\n| `tabindex=\"0\"` on everything | Only interactive elements need focus; use native elements |\n| `aria-label` on non-interactive elements | Use `aria-labelledby` pointing to visible text |\n| `display: none` for screen reader hiding | Use `.sr-only` class instead |\n| Color alone to convey meaning | Add icons, text labels, or patterns alongside color |\n| Placeholder as only label | Always provide a visible `\u003Clabel>` |\n| `outline: none` without replacement | Always provide a visible focus indicator via `focus-visible` |\n| Empty `alt=\"\"` on informational images | Informational images need descriptive alt text |\n| Skipping heading levels (h1 -> h3) | Heading levels must be sequential |\n| `onClick` without `onKeyDown` | Add keyboard support or prefer native elements |\n| Ignoring `prefers-reduced-motion` | Wrap animations in `@media (prefers-reduced-motion: no-preference)` |\n\n## Related Skills\n\n| Skill | Relationship |\n|-------|-------------|\n| **senior-frontend** | Frontend patterns used in a11y fixes |\n| **code-reviewer** | Include a11y checks in code review workflows |\n| **senior-qa** | Integration of a11y testing into QA processes |\n| **playwright-pro** | Automated browser testing with accessibility assertions |\n| **epic-design** | WCAG 2.1 AA compliant animations and scroll storytelling |\n| **tdd-guide** | Test-driven development patterns for a11y test cases |\n\n## Reference Documentation\n\n| Reference | Description |\n|-----------|-------------|\n| [wcag-quick-ref.md](references\u002Fwcag-quick-ref.md) | WCAG 2.2 Level A & AA criteria quick reference |\n| [wcag-22-new-criteria.md](references\u002Fwcag-22-new-criteria.md) | New WCAG 2.2 success criteria (Focus Appearance, Target Size, etc.) |\n| [aria-patterns.md](references\u002Faria-patterns.md) | ARIA patterns, keyboard interaction, and live regions |\n| [framework-a11y-patterns.md](references\u002Fframework-a11y-patterns.md) | Framework-specific fix patterns (React, Vue, Angular, Svelte, HTML) |\n| [color-contrast-guide.md](references\u002Fcolor-contrast-guide.md) | Color contrast checker details, Tailwind palette mapping, sr-only class |\n| [ci-cd-integration.md](references\u002Fci-cd-integration.md) | GitHub Actions, GitLab CI, Azure DevOps, pre-commit hook configs |\n| [audit-report-template.md](references\u002Faudit-report-template.md) | Stakeholder-ready audit report template |\n| [testing-checklist.md](references\u002Ftesting-checklist.md) | Manual testing checklist (keyboard, screen reader, visual, forms) |\n| [examples-by-framework.md](references\u002Fexamples-by-framework.md) | Full audit examples for Vue, Angular, Next.js, and Svelte |\n\n## Resources\n\n- [WCAG 2.2 Specification](https:\u002F\u002Fwww.w3.org\u002FTR\u002FWCAG22\u002F)\n- [WAI-ARIA Authoring Practices 1.2](https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F)\n- [Deque axe-core Rules](https:\u002F\u002Fgithub.com\u002Fdequelabs\u002Faxe-core\u002Fblob\u002Fdevelop\u002Fdoc\u002Frule-descriptions.md)\n- [eslint-plugin-jsx-a11y](https:\u002F\u002Fgithub.com\u002Fjsx-eslint\u002Feslint-plugin-jsx-a11y)\n",{"name":5,"description":7},"main","57e7aa6b6e03bce1a7d7862ba9c2ec312f7f19b5","src\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit",0,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee","https:\u002F\u002Fwithcyril.me\u002F","Hi, I’m Julian Cyril D, a Computer Science and Business Systems student at PSNACET.\r\nI’m passionate about full-stack development, UI\u002FUX design, and building sma","2026-11-04 23:28:50",{"source":8,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add Cyrilthetecchieee\u002Fcyril-code- --skill a11y-audit",{"tool":39,"command":40},"bunx","bunx skills add Cyrilthetecchieee\u002Fcyril-code- --skill a11y-audit",{"tool":42,"command":43},"pnpm","pnpm dlx skills add Cyrilthetecchieee\u002Fcyril-code- --skill a11y-audit","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002FSKILL.md",true,[47,53,59,63,67,71,75,79,83,87,91,95,99,103,109],{"path":48,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":51,"sourceHtmlUrl":52},"assets\u002Fsample-component.tsx","ASSET","资产文件",1263,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Fassets\u002Fsample-component.tsx",{"path":54,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":57,"sourceHtmlUrl":58},"expected_outputs\u002Fsample-contrast-output.txt","REFERENCE","参考文档",813,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Fexpected_outputs\u002Fsample-contrast-output.txt",{"path":60,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":61,"sourceHtmlUrl":62},"expected_outputs\u002Fsample-scan-output.json",898,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Fexpected_outputs\u002Fsample-scan-output.json",{"path":64,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":65,"sourceHtmlUrl":66},"expected_outputs\u002Fsample-scan-report.md",2213,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Fexpected_outputs\u002Fsample-scan-report.md",{"path":68,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":69,"sourceHtmlUrl":70},"references\u002Faria-patterns.md",6034,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Freferences\u002Faria-patterns.md",{"path":72,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":73,"sourceHtmlUrl":74},"references\u002Faudit-report-template.md",1280,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Freferences\u002Faudit-report-template.md",{"path":76,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":77,"sourceHtmlUrl":78},"references\u002Fci-cd-integration.md",3346,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Freferences\u002Fci-cd-integration.md",{"path":80,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":81,"sourceHtmlUrl":82},"references\u002Fcolor-contrast-guide.md",2521,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Freferences\u002Fcolor-contrast-guide.md",{"path":84,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":85,"sourceHtmlUrl":86},"references\u002Fexamples-by-framework.md",8159,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Freferences\u002Fexamples-by-framework.md",{"path":88,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":89,"sourceHtmlUrl":90},"references\u002Fframework-a11y-patterns.md",14416,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Freferences\u002Fframework-a11y-patterns.md",{"path":92,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":93,"sourceHtmlUrl":94},"references\u002Ftesting-checklist.md",1790,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Freferences\u002Ftesting-checklist.md",{"path":96,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":97,"sourceHtmlUrl":98},"references\u002Fwcag-22-new-criteria.md",2201,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Freferences\u002Fwcag-22-new-criteria.md",{"path":100,"resourceType":55,"resourceTypeDesc":56,"sizeBytes":101,"sourceHtmlUrl":102},"references\u002Fwcag-quick-ref.md",6528,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Freferences\u002Fwcag-quick-ref.md",{"path":104,"resourceType":105,"resourceTypeDesc":106,"sizeBytes":107,"sourceHtmlUrl":108},"scripts\u002Fa11y_scanner.py.txt","SCRIPT","脚本",29650,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Fscripts\u002Fa11y_scanner.py.txt",{"path":110,"resourceType":105,"resourceTypeDesc":106,"sizeBytes":111,"sourceHtmlUrl":112},"scripts\u002Fcontrast_checker.py.txt",16581,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fengineering-team\u002Fa11y-audit\u002Fskills\u002Fa11y-audit\u002Fscripts\u002Fcontrast_checker.py.txt",[114,123,130,138,145,152],{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":118,"licenseFileUrl":119,"sourceHtmlUrl":120,"categories":121,"keywords":122,"publishedAt":19},"01M7AQV6CYX8RMC78420V9WZ62","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.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fwebapp-testing\u002FSKILL.md",[],[],{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":19},"01M7AQV2895N3S1MEX6K76G6G2","youtube-downloader","Download YouTube videos with customizable quality and format options. Use this skill when the user asks to download, save, or grab YouTube videos. Supports various quality settings (best, 1080p, 720p, 480p, 360p), multiple formats (mp4, webm, mkv), and audio-only downloads as MP3.","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fvideo-downloader\u002FSKILL.md",[],[],{"skillNo":131,"name":132,"nameZh":6,"description":133,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":118,"licenseFileUrl":134,"sourceHtmlUrl":135,"categories":136,"keywords":137,"publishedAt":19},"01M7AQTRNX62DNKVZ5GXEHRBKB","theme-factory","Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors\u002Ffonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftheme-factory\u002FSKILL.md",[],[],{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":144,"publishedAt":19},"01M7AQTNNVHAAN9H6DA8T6ZVE0","template-skill","Replace with description of the skill and when Claude should use it.","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftemplate-skill\u002FSKILL.md",[],[],{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":151,"publishedAt":19},"01M7AQTJ3MQ6AKX152MEX2MYCC","tailored-resume-generator","Analyzes job descriptions and generates tailored resumes that highlight relevant experience, skills, and achievements to maximize interview chances","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftailored-resume-generator\u002FSKILL.md",[],[],{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":118,"licenseFileUrl":156,"sourceHtmlUrl":157,"categories":158,"keywords":159,"publishedAt":19},"01M7AQTD7D5MYET2YWG7HG9WM3","slack-gif-creator","Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like \"make me a GIF for Slack of X doing Y\".","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fslack-gif-creator\u002FSKILL.md",[],[]]