skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

refactor

Fixes accessibility issues across codebases through WCAG 2.1 compliant refactoring.

Updated Mar 28, 2026
Search Tags:#accessibility#a11y#refactoring#react#wcag#semantic html#aria
One-click install
npx skills add https://github.com/po4yka/blog --skill refactor-po4yka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactor
Source: https://github.com/po4yka/blog/tree/main/.agents/skills/accesslint-refactor
Command: npx skills add https://github.com/po4yka/blog --skill refactor-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web applications often ship with accessibility violations like missing alt text, poor keyboard navigation, and incorrect ARIA usage. Manually auditing and fixing these issues across many files is slow and error-prone. ## Core Features & Use Cases - Scoped Accessibility Fixes: Fix issues in a single file, a directory, or the entire codebase depending on the path you provide. - Tiered Refactoring: Handles simple fixes (alt text, ARIA labels, heading hierarchy), moderate fixes (semantic HTML, focus management, keyboard handlers), and complex fixes (focus traps, accessible modals, tabs, and live regions). - Structured Reporting: Produces per-file change logs with before/after code examples, WCAG guidelines addressed, and a summary report with a testing checklist. - Use Case: Point it at your React components directory to convert clickable divs into proper buttons, add focus trapping to modals, and associate labels with form inputs, all documented against WCAG 2.1 criteria. ## Quick Start Ask the assistant to refactor the accessibility issues in your components directory and report which WCAG guidelines were addressed.

Frequently Asked Questions about refactor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix accessibility issues across multiple files at once?▼

Provide a directory path or no argument to fix issues across all files in that scope. The skill scans for violations, plans the refactoring, applies fixes incrementally, and reports each change with the WCAG guidelines it satisfies.

What accessibility issues can be fixed automatically in React code?▼

Common fixes include adding alt text and ARIA labels, converting clickable divs to buttons, associating labels with form inputs, adding keyboard event handlers, and implementing focus traps for modals. Complex patterns like accessible tabs and live regions are also supported.

Does this work with Vue and plain HTML or only React?▼

It supports React, Vue, and plain HTML/CSS. For Vue it uses v-bind for dynamic ARIA attributes and proper event modifiers; for HTML it applies semantic elements, landmark regions, and visible focus indicators.

Can it fix color contrast violations in CSS?▼

Yes, it updates color values in CSS, styled-components, or theme files to meet contrast requirements, using the accesslint:contrast-checker skill to analyze color pairs while preserving the original hue where possible.

When will it ask for confirmation before making changes?▼

It asks before major architectural changes, adding significant dependencies, removing functionality, performance-affecting changes, or modifying widely shared components. Routine fixes proceed without confirmation.

Related Skills

Explore More Software Engineering Skills→
alirezarezvanialirezarezvani
25.3k

a11y-audit

Scan frontend codebases for WCAG 2.2 violations and generate framework-specific fixes.

Community
Advanced
petrkindlmannpetrkindlmann
64

accessibility-testing

Automate accessibility testing with axe-core and Playwright for WCAG conformance.

Community
Advanced
ChoreShoreChoreShore

color-contrast

Validate WCAG 2.1 color contrast ratios and suggest compliant alternatives.

Official
Intermediate
ChoreShoreChoreShore

compound-components

Design accessible UI primitives with ARIA roles and keyboard navigation.

Official
Advanced