web-review-criteria

Audit HTML/CSS/JS structure and WASM integration for the Way of the Goat website.

1|Updated Oct 13, 2024
One-click install
npx skills add https://github.com/cliveportman/way-of-the-goat --skill web-review-criteria
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-review-criteria
Source: https://github.com/cliveportman/way-of-the-goat/tree/main/.claude/skills/web-review-criteria
Command: npx skills add https://github.com/cliveportman/way-of-the-goat --skill web-review-criteria

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This checklist helps teams quickly verify that Way of the Goat's web pages are semantically correct, accessible, and free from common HTML/CSS/JS and WASM integration issues.

Core Features & Use Cases

  • HTML Semantics: validates correct landmark usage, logical heading order, and proper forms with labels.
  • Accessibility & Semantics: covers ARIA usage, keyboard navigation, focus visibility, and color contrast considerations.
  • Performance & Security: includes checks for WASM loading strategy, font loading, and avoidance of unsafe patterns.

Quick Start

Run the review against the current site codebase to generate a pass/fail report and remediation steps.

Frequently Asked Questions about web-review-criteria

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

FAQPage Schema
How do I audit HTML semantics and accessibility for a website?

To audit HTML semantics and accessibility, you validate correct landmark usage, logical heading order, proper form labels, ARIA implementation, keyboard navigation, and focus visibility to generate a pass/fail remediation report.

What should I check when integrating WASM into a web page?

When integrating WASM, you should verify the loading strategy for performance and ensure secure script loading patterns are followed to avoid unsafe execution and potential security vulnerabilities on the page.

How do I validate color contrast and keyboard operability in CSS?

Validating color contrast and keyboard operability involves checking CSS focus visibility, ensuring logical tab order, and confirming ARIA usage so that all interactive elements are fully accessible via keyboard input.

Does this web review process work for static pages and embedded components?

Yes, the web review process applies to both static pages and embedded components, auditing HTML, CSS, and JavaScript structure to ensure semantic correctness, accessibility, performance, and security across the entire site.

Why does my web page fail accessibility checks for missing landmarks?

Web pages fail accessibility checks when HTML lacks proper semantic landmarks, has illogical heading order, or uses incorrect ARIA roles, which prevents assistive technologies from navigating the document structure effectively.

What is the best way to check font loading and unsafe script patterns?

The best way to check font loading and unsafe script patterns is to run a comprehensive performance and security audit that evaluates WASM loading strategies and identifies unsafe JavaScript execution risks.