frontend-semantic-auditor
CommunityEnforce semantic HTML, accessibility, and SEO.
Authorguiledo
Version1.0.0
Installs0
System Documentation
What problem does it solve?
The front-end code generated for projects often misses semantic structure, accessible controls, and SEO best practices, leading to poor usability and discoverability. The skill enforces semantic HTML, keyboard accessibility, proper headings, accessible forms, descriptive alt text, and correct metadata to improve accessibility and search performance.
Core Features & Use Cases
- Semantic HTML-first approach, replacing generic divs with appropriate landmarks like nav, main, article, aside, header, and footer.
- Keyboard-friendly interactions and ARIA-conscious patterns to ensure reachable controls and avoid non-interactive div sprawl.
- Heading hierarchy verification and form labeling to support screen reader navigation and data capture.
- Media accessibility and meta setup, including alt text on images and correct meta tags for SEO.
Quick Start
Audit a page for semantics, accessibility, and SEO, or generate accessible frontend HTML and components.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: frontend-semantic-auditor Download link: https://github.com/guiledo/dotfiles/archive/main.zip#frontend-semantic-auditor Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.