opquast-digital-quality
Applies 245 digital quality rules for web development.
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.zipInstalls 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.Key capabilities
- →Apply 245 rules across 14 categories for web projects
- →Implement accessibility features based on Opquast rules
- →Harden security practices for web applications
- →Ensure privacy policy presence and data handling
- →Generate HTML/CSS code meeting quality standards
- →Validate web projects against Opquast rules
How it works
The skill applies 245 Opquast rules across 14 categories to web projects, covering aspects like content, security, and accessibility. It uses a severity scale to report issues found during review.
Inputs & outputs
When to use opquast-digital-quality
- →Audit website quality
- →Improve web accessibility
- →Harden security practices
About this skill
Opquast Digital Quality Best Practices
Canonical source:
examples/OPQUAST_DIGITAL_QUALITY_BEST_PRACTICES.mdinmgifford/ACCESSIBILITY.mdThis skill is derived from that file. When in doubt, the example is authoritative.
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)
| Level | Meaning |
|---|---|
| Critical | Completely blocks access, purchase, or task completion for a user group |
| Serious | Significantly impairs access or usability; workaround unreasonable to expect |
| Moderate | Creates friction; workaround available but burdensome |
| Minor | Best-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 by Category (245 rules across 14 categories)
| Category | Rules | Key Requirements |
|---|---|---|
| Content | 1–14 | Metadata (description + OG tags), explicit dates, <abbr> for acronyms, data tables for charts, labelled ads, moderation/abuse-report mechanisms |
| Personal Data / Privacy | 15–29 | Privacy link in footer, documented data access/modification process, no third-party-only login, generic auth-failure messages, Referrer-Policy, HTTPS for sensitive data, no sensitive data in URLs |
| E-Commerce | 30–68 | No pre-checked opt-ins, availability/delivery time/cost before checkout, explicit pricing incl. tax, two+ payment methods, order confirmation email, invoices online |
| Forms | 69–98 | <label for="...">, format/case-sensitivity hints, required indicated in text, password strength + show/hide, aria-invalid, aria-describedby, preserve data on error, correct input type/autocomplete, paste not blocked, disabled buttons not aria-hidden |
| Identification | 99–115 | Unique page titles (Page | Site), lang attribute, favicon, address/phone in footer, two+ contact methods, response-time/hours stated |
| Images/Media | 116–127 | Meaningful alt, empty alt="" for decorative, image-link alt describes destination, transcripts + synchronised captions, no autoplay, pausable media |
| Internationalisation | 128–135 | International dialling codes, country in addresses, hreflang/visible language indicator, lang on <html> and inline changes, translated-language link labels |
| Links | 136–152 | Descriptive anchor text (no "click here"), tel: protocol, new-tab warning, file type + size for downloads, no broken internal links |
| Navigation | 153–172 | Public content without forced login, no nav pop-ups, homepage link, breadcrumbs, consistent nav placement, visible icon labels, skip links, visible :focus-visible, logical tab order, internal search, sitemap |
| Newsletter | 173–179 | Confirmed opt-in, unsubscribe link, one-click unsubscribe, archives online, stated frequency |
| Presentation | 180–196 | Consistent visual identity, no colour-only info, contrast 4.5:1 normal / 3:1 large text, meaning survives with styles off, 24×24px+ touch targets, no zoom blocking, responsive layout, print styles |
| Security | 197–217 | HTTPS everywhere + HSTS, no mixed content, self-service password reset, no plain-text passwords, X-Content-Type-Options, X-Frame-Options/frame-ancestors, CSP, SRI on third-party scripts, no exposed server versions, SPF/DKIM/DMARC |
| Server/Performance | 218–230 | robots.txt, sitemap.xml, proper 404 status (not 200), custom error page with nav, gzip/Brotli, cache-control headers, minified CSS/JS |
| Structure/Code | 231–244 | Machine-readable dates (<time datetime>), UTF-8, unique IDs, no meta refresh, heading hierarchy h1>h2>h3, tagged (not scanned) PDFs, <caption>/<th scope> on data tables |
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), Personal Data/Privacy (user accounts/data collection)
2. Consult the Full Rule Text
For the complete rule text, code examples, and rule numbers, consult the canonical Opquast guide or the official checklist directly — this skill summarizes the categories and highest-value patterns rather than reproducing all 245 rules verbatim.
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
altattributes - 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
(rule 98 principle: don't add ARIA states that duplicate native semantics).
Use aria-required only on custom widgets (role="combobox" etc.). Also
indicate required state in visible text — an asterisk alone is insufficient
unless the convention is explained (rule 71).
<label for="email">
Email address <span aria-hidden="true">*</span> <span class="hint">(required)</span>
<span class="hint" id="email-hint">Example: [email protected]</span>
</label>
<input id="email" type="email" autocomplete="email"
required aria-describedby="email-hint" />
Password Field (rules 75–76, 202–205)
<label for="password">Password</label>
<div class="password-wrapper">
<input id="password" type="password" aria-describedby="password-hint" />
<button type="button" aria-controls="password" aria-pressed="false">
Show password
</button>
</div>
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
Do not expose server software versions in response headers (rule 213) —
remove or obfuscate Server and X-Powered-By. Apply Subresource Integrity
to third-party scripts/stylesheets (rule 214):
<script src="https://cdn.example.com/library.min.js"
integrity="sha384-<hash>" crossorigin="anonymous"></script>
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) ")"; }
}
Accessible Data Table (rules 242–243)
<table>
<caption>Quarterly revenue by region (USD thousands)</caption>
<thead>
<tr><th scope="col">Region</th><th scope="col">Q1</th></tr>
</thead>
<tbody>
<tr><th scope="row">North America</th><td>1,200</td></tr>
</tbody>
</table>
WCAG Relationship
Opquast complements WCAG 2.2 rather than replacing it. Key mappings:
| Opquast Rules | WCAG Criteria |
|---|---|
| 116 (decorative imag |
Content truncated.
When not to use it
- →When the project is not a website or web application
- →When the focus is solely on WCAG 3.0 without Opquast v5 considerations
Limitations
- →The skill is limited to the 245 rules defined in the Opquast Digital Quality Framework (Version 5, 2025-2030).
- →The skill does not cover WCAG 3.0, which is in development.
How it compares
This workflow systematically applies a predefined set of 245 rules with a severity scale, unlike a manual review that might miss specific checks or lack consistent issue grading.
Compared to similar skills
opquast-digital-quality side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| opquast-digital-quality (this skill) | 0 | 2mo | No flags | Intermediate |
| github-code-review | 13 | 3mo | Review | Advanced |
| reviewing-nextjs-16-patterns | 11 | 8mo | Review | Intermediate |
| frontend-developer | 27 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
github-code-review
ruvnet
Comprehensive GitHub code review with AI-powered swarm coordination
reviewing-nextjs-16-patterns
djankies
Review code for Next.js 16 compliance - security patterns, caching, breaking changes. Use when reviewing Next.js code, preparing for migration, or auditing for violations.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
supabase-postgres-best-practices
davila7
Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.
web-quality-audit
davila7
Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".
graphql
davila7
GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.