web-design-guidelines — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited web-design-guidelines (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
WCAG accessibility, semantic HTML, keyboard navigation, forms, and performance patterns for inclusive web interfaces. Contains 23 rules across 4 categories. Supports both coding reference and audit mode.
When the user asks to "audit accessibility", "check WCAG compliance", or "review accessibility" — run the checklist below against their codebase.
$ARGUMENTS): audit only those files or componentsCheck the project for:
.tsx/.jsx files → React.vue files → Vue.blade.php files → Laravel Blade.html files → Static HTMLWork through every item below. For each, output:
file:line, description of the issue, and fix recommendation#### Semantic HTML & Structure
<header>, <main>, <nav>, <footer>, <article>, <section>) — not <div> souph1 → h2 → h3) — no skipped levels<h1> per page<a href="#main-content">Skip to content</a>)aria-label on multiple <nav> elements)#### Keyboard Navigation
tabindex values)outline: none without replacement)#### Images & Media
<img> elements have alt attributes — descriptive for content images, empty (alt="") for decorative#### Color & Contrast
#### Forms
<label> (not just placeholder text)aria-required="true"aria-describedbyrole="alert" or aria-live="assertive" for screen reader announcementtype attributes on inputs (email, tel, url, number)autocomplete attributes present on common fields (name, email, address, credit card)#### ARIA & Screen Readers
aria-label="Close")aria-live regionsaria-busy="true", status messages)aria-hidden="true")#### Motion & Animation
prefers-reduced-motion respected — animations disabled or reducedEnd the audit with:
## Accessibility Audit Summary
- **PASS**: X checks
- **FAIL**: X checks
- **N/A**: X checks
- **WCAG Level**: AA / Partial AA / Below AA
- **Top Priority Fixes**: (list the 3 most impactful FAIL items)Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Accessibility | CRITICAL | a11y- |
| 2 | Forms | HIGH | form- |
| 3 | Animation & Motion | CRITICAL | motion- |
| 4 | Performance & UX | MEDIUM | perf- |
a11y-semantic-html - Use semantic HTML elementsa11y-heading-hierarchy - Maintain proper heading hierarchya11y-screen-reader - Optimize for screen reader compatibilitya11y-skip-links - Provide skip links for navigationa11y-keyboard-nav - Ensure full keyboard navigationa11y-focus-management - Manage keyboard focus properlya11y-aria-labels - Add ARIA labels to interactive elementsa11y-color-contrast - Ensure sufficient color contrast (WCAG AA)a11y-alt-text - Provide meaningful alt text for imagesa11y-error-messages - Make error messages accessiblea11y-form-labels - Associate labels with form inputsa11y-live-regions - Announce dynamic content to screen readersform-autocomplete - Use autocomplete attributesform-input-types - Use correct input typesform-error-display - Display form errors clearlyform-validation-ux - Design user-friendly validationform-inline-validation - Implement smart inline validationform-multi-step - Design effective multi-step formsform-placeholder-usage - Use placeholders appropriatelyform-submit-feedback - Provide clear submission feedbackmotion-reduced - Respect prefers-reduced-motion (WCAG AAA)perf-image-loading - Optimize image loading for UXperf-layout-stability - Prevent cumulative layout shift// ❌ Div soup
<div className="header"><div className="nav"><div onClick={handleClick}>Home</div></div></div>
// ✅ Semantic HTML
<header><nav aria-label="Main"><a href="/">Home</a></nav></header>
<main><article><h1>Title</h1><p>Content</p></article></main><label htmlFor="email">Email <span aria-hidden="true">*</span></label>
<input id="email" type="email" required aria-required="true" aria-describedby="email-error" autoComplete="email" />
{error && <p id="email-error" role="alert">{error}</p>}@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Read individual rule files for detailed explanations:
rules/a11y-semantic-html.md
rules/form-autocomplete.md
rules/motion-reduced.md
rules/perf-image-loading.mdFor the complete guide with all rules expanded: AGENTS.md
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.