agentskills.codes
OP

opquast-digital-quality

by mgiffordSource

Apply the Opquast Digital Quality Framework (245 rules, 14 categories) when building, reviewing, or auditing websites and web applications. Use for web development quality assurance, accessibility compliance, security hardening, privacy implementation, e-commerce best practices, and holistic digital

Install

mkdir -p .claude/skills/opquast-digital-quality && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17161" && unzip -o skill.zip -d .claude/skills/opquast-digital-quality && rm skill.zip

Installs to .claude/skills/opquast-digital-quality

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Apply the Opquast Digital Quality Framework (245 rules, 14 categories) when building, reviewing, or auditing websites and web applications. Use for web development quality assurance, accessibility compliance, security hardening, privacy implementation, e-commerce best practices, and holistic digital quality checks.
316 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)

About this skill

Opquast Digital Quality Best Practices

Apply the Opquast Digital Quality Checklist (Version 5, 2025-2030) when building or reviewing web projects. The framework contains 245 rules across 14 categories covering content, privacy, e-commerce, forms, accessibility, security, performance, and more.

Rules are published under Creative Commons BY-SA 4.0. Agents may reference and cite rule text; attribute Opquast and respect the ShareAlike licence — derivatives must use the same licence. See opquast.com for the authoritative source.

Severity Scale (this skill)

Opquast covers 245 rules across 14 categories. Use this scale when reporting issues found during review:

LevelMeaning
CriticalCompletely blocks access, purchase, or task completion for a user group
SeriousSignificantly impairs access or usability; workaround unreasonable to expect
ModerateCreates friction; workaround available but burdensome
MinorBest-practice gap; marginal impact

Category-level severity guidance:

  • Security failures (HTTPS, headers, passwords): Critical to Serious
  • Forms failures (labels, error handling): Critical to Serious
  • Navigation failures (keyboard, focus): Critical to Serious
  • Images/Media missing alt/captions: Critical
  • Privacy policy missing: Serious
  • Presentation contrast: Serious; zoom blocked: Serious
  • Content, Links, Identification: Moderate to Minor in most cases
  • Server/Performance, Newsletter, Internationalisation: Minor in most cases

When to Use This Skill

  • Building a new website or web application
  • Reviewing or auditing an existing site for quality
  • Implementing accessibility, security, or privacy features
  • Creating e-commerce flows, forms, or navigation systems
  • Generating HTML/CSS code that must meet quality standards

Quick Reference: AI-Enforceable Requirements

CategoryKey Requirements
Content<meta name="description"> + OG tags, explicit dates, <abbr> for acronyms, data tables for charts
PrivacyPrivacy link in footer, generic auth-failure messages, HTTPS for sensitive data, no sensitive data in URLs
E-CommerceNo pre-checked opt-ins, availability before checkout, explicit pricing, two+ payment methods
Forms<label for="...">, required attribute (not aria-required alone), aria-invalid, aria-describedby, correct input type, autocomplete
IdentificationUnique page titles (Page | Site), lang attribute, favicon, two+ contact methods
Images/MediaMeaningful alt, empty alt="" for decorative, captions + transcripts for AV, no autoplay
Internationalisationlang on <html>, hreflang for translations, international dialling codes
LinksDescriptive anchor text (no "click here"), tel: protocol, file type + size for downloads
NavigationSkip links, visible :focus-visible, logical tab order, consistent nav placement, breadcrumbs
PresentationContrast 4.5:1 normal / 3:1 large text, no colour-only info, no blocked zoom, responsive, print styles
SecurityHTTPS everywhere, HSTS, CSP, SRI, no plain-text passwords, security headers
Server/Performancerobots.txt, sitemap.xml, gzip/Brotli, cache headers, minified CSS/JS
Structure/CodeUTF-8, unique IDs, no meta refresh, tagged PDFs, heading hierarchy h1>h2>h3
NewsletterConfirmed opt-in, unsubscribe link, archives online, state frequency

Workflow

1. Identify Applicable Categories

Not all 14 categories apply to every project:

  • All web projects: Content, Forms, Identification, Images/Media, Links, Navigation, Presentation, Security, Server/Performance, Structure/Code
  • Add if applicable: E-Commerce (online sales), Newsletter (email marketing), Internationalisation (multi-language), Privacy (user accounts/data collection)

2. Load Detailed Rules

Read the relevant reference file for the full rules with code examples:

  • Rules 1-172 (Content, Privacy, E-Commerce, Forms, Identification, Images/Media, Internationalisation, Links, Navigation): See references/rules-part1.md
  • Rules 173-244 (Newsletter, Presentation, Security, Server/Performance, Structure/Code): See references/rules-part2.md

3. Apply During Development

When generating or reviewing code, apply rules as implementation requirements:

  • HTML generation: Include metadata, semantic structure, accessible forms, proper alt text
  • CSS generation: Ensure contrast ratios, focus styles, responsive layout, print styles
  • Server configuration: Set security headers, enable compression, configure caching
  • Content review: Check date formats, link text, abbreviation expansion

4. Validate

After implementation, verify against applicable rules. Common automated checks:

  • HTML validation and heading hierarchy
  • Colour contrast ratios (4.5:1 normal text, 3:1 large text)
  • Missing alt attributes
  • Missing form labels
  • Security headers present
  • Broken internal links

Essential Code Patterns

Page Template Minimum

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Page description here." />
  <meta property="og:title" content="Page Title | Site Name" />
  <meta property="og:description" content="Page description for sharing." />
  <title>Page Title | Site Name</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <nav aria-label="Main navigation"><!-- ... --></nav>
  <main id="main"><!-- ... --></main>
  <footer>
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Use</a>
  </footer>
</body>
</html>

Accessible Form Field

Use native required on native inputs. aria-required is redundant when required is present and should be omitted to avoid accessibility tree noise. Use aria-required only on custom widgets (role="combobox" etc.).

<label for="email">
  Email address <span aria-hidden="true">*</span>
  <span class="hint" id="email-hint">Required. Example: [email protected]</span>
</label>
<input id="email" type="email" autocomplete="email"
  required aria-describedby="email-hint" />

Security Headers (Server Config)

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
Content-Security-Policy: default-src 'self';
Referrer-Policy: strict-origin-when-cross-origin

Focus and Contrast Styles

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}
body {
  color: #1a1a1a; /* ~16:1 contrast on white */
  background: #ffffff;
}

Print Styles

@media print {
  nav, header, footer, .sidebar, .no-print { display: none; }
  body { font-size: 12pt; color: #000; }
  a[href]::after { content: " (" attr(href) ")"; }
}

WCAG Relationship

Opquast complements WCAG 2.2 rather than replacing it. Key mappings:

Opquast RulesWCAG Criteria
116 (decorative images alt="")1.1.1 Non-text Content (A)
117-118 (meaningful alt text)1.1.1 Non-text Content (A)
121-122 (transcripts, captions)1.2.2, 1.2.3, 1.2.5
124-127 (no autoplay, pausable)1.4.2, 2.2.2
131-132 (lang attribute)3.1.1, 3.1.2
164 (skip links)2.4.1 Bypass Blocks (A)
165 (focus visible)2.4.7, 2.4.11 Focus Visible/Appearance
166 (keyboard operable)2.1.1 Keyboard (A)
167 (logical tab order)2.4.3 Focus Order (A)
181 (not colour alone)1.4.1 Use of Color (A)
182 (contrast)1.4.3, 1.4.11 Contrast (AA)
186 (touch targets 24×24px min)2.5.8 Target Size Minimum (AA, WCAG 2.2)
193 (no zoom block)1.4.4 Resize Text (AA)
69-70 (labels, instructions)1.3.1, 3.3.2
79-80 (error identification)3.3.1, 3.3.3

Use Opquast as a holistic quality baseline and layer WCAG testing for full accessibility compliance.

Sustainability Connection

Several Opquast categories directly align with SUSTAINABILITY.md and the Web Sustainability Guidelines:

  • Server/Performance (rules 226-230): compression, caching, minification — directly reduce data transfer and energy per page view
  • Presentation (rule 193): not blocking zoom; (rule 194): responsive layout — reduce need for separate mobile sites
  • Structure/Code (rule 239): no meta refresh — avoids unnecessary page reloads

When applying Opquast Server/Performance rules, cross-reference with SUSTAINABILITY.md for additional guidance on carbon-aware delivery and asset optimisation.

Definition of Done Checklist

Apply to every project; skip categories not in scope:

Content & Identification

  • <meta name="description"> and OG tags on every page
  • Unique <title> in Page | Site format
  • <html lang="..."> present and correct
  • <link rel="icon"> present
  • Privacy policy linked from footer
  • At least two contact methods available

Forms

  • Every field has programmatically associated <label>
  • Native required used; aria-required omitted on native inputs
  • aria-invalid="true" set on invalid fields
  • Error messages associated via aria-describedby
  • Correct input type and autocomplete values
  • Paste not blocked

Images & Media

  • Decorative images have alt=""
  • Informative images have descriptive alt
  • All video has synchronised captions
  • All audio has text transcript
  • No autoplay (audio or video)
  • All media pausable

**Nav

Content truncated.

Search skills

Search the agent skills registry