frontend-semantic-auditor

Audit frontend code for accessibility, semantics, and SEO compliance.

Updated Nov 26, 2025

Search Tags:#accessibility #a11y #seo #semantic-html #frontend-audit #web-semantics

Ready to run

npx skills add https://github.com/guiledo/dotfiles --skill frontend-semantic-auditor

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-semantic-auditor
Source: https://github.com/guiledo/dotfiles/tree/main/opencode/.config/opencode/skills/frontend-semantic-auditor
Command: npx skills add https://github.com/guiledo/dotfiles --skill frontend-semantic-auditor

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about frontend-semantic-auditor

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

FAQPage Schema

How do I audit frontend code for accessibility and SEO compliance?▼

To audit frontend code for accessibility and SEO compliance, review semantic HTML structure, validate heading hierarchies, check keyboard support, verify form labeling, and ensure correct meta tag generation across React, Vue, or plain HTML pages.

What is semantic HTML enforcement and when do I need it for web pages?▼

Semantic HTML enforcement replaces generic divs with appropriate landmarks like nav, main, and article. You need it for web pages to ensure screen reader navigation, keyboard accessibility, and proper metadata for search performance.

Does semantic HTML and a11y auditing work with React and Vue components?▼

Semantic HTML and a11y auditing works with React and Vue components, as well as plain HTML. It applies accessible frontend patterns to UI components and landing pages to ensure landmarks, keyboard interactions, and metadata are correct.

How do I fix keyboard accessibility and ARIA patterns in my UI components?▼

To fix keyboard accessibility and ARIA patterns in UI components, implement keyboard-friendly interactions and ARIA-conscious patterns that ensure controls are reachable, avoiding non-interactive div sprawl across web pages.

Why does my landing page have poor usability and discoverability despite valid code?▼

Your landing page may have poor usability and discoverability because it misses semantic structure, accessible controls, and SEO best practices. Validating heading hierarchy, form labeling, and alt text ensures screen reader navigation and correct metadata.

What's the best way to generate accessible frontend HTML with correct meta tags?▼

The best way to generate accessible frontend HTML with correct meta tags is to enforce semantic HTML landmarks, verify descriptive alt text on images, and validate proper form labeling to support data capture and SEO compliance.