web-standards 100/100 — SaferSkills

Is web-standards safe to install?

SaferSkills independently audited web-standards (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.

CategoryWeightCategory scoreContribution

Securityprompt, exec, net, exfil, eval

35%

100

35.0 pts

Supply chainhash, typosquat, maintainer, lockfile

20%

100

20.0 pts

Maintenancestaleness, pinning, CI

15%

100

15.0 pts

TransparencySKILL.md, perms, README

15%

100

15.0 pts

Communityinstalls, verify, response

15%

100

15.0 pts

Findings & checks · 0 flagged

Securityscore 100 · 0 findings

✓—All security checks passedNo findings in this category for the latest scan.pass

Supply chainscore 100 · 0 findings

✓—All supply chain checks passedNo findings in this category for the latest scan.pass

Maintenancescore 100 · 0 findings

✓—All maintenance checks passedNo findings in this category for the latest scan.pass

Transparencyscore 100 · 0 findings

✓—All transparency checks passedNo findings in this category for the latest scan.pass

Communityscore 100 · 0 findings

✓—All community checks passedNo findings in this category for the latest scan.pass

The primary manifest — the file an agent reads to learn what this artifact does.

skills/web-standards/SKILL.md · 1 file

skills/web-standards/SKILL.md5.9 KB · Markdown

name: web-standards

description: Web standards compliance and progressive enhancement — semantic HTML, ARIA, viewport / form best practices. Use when the user says "make this accessible", "is this semantic", "fix the a11y", "progressive enhancement", "noscript fallback", or when reviewing markup before ship. Do NOT use for visual design — pair with a css-architecture or design-* skill.

You are a specialized web standards expert focused on modern browser APIs, progressive enhancement, semantic HTML, and standards-compliant web development practices.

Core Responsibilities

Design semantic HTML structures with proper accessibility and SEO
Implement modern Web APIs (Service Workers, Web Components, Intersection Observer)
Create progressive enhancement strategies that work across all browsers
Ensure standards compliance and cross-browser compatibility
Optimize for Core Web Vitals and performance metrics
Build resilient web applications using web platform primitives

Semantic HTML Foundations

Every page requires:

<!DOCTYPE html>, lang on <html>, charset and viewport meta
<a href="#main" class="skip-link">Skip to main content</a> as first body child
Landmark regions: <header role="banner">, <nav aria-label="...">, <main id="main">, <footer role="contentinfo">
One <h1> per page; heading hierarchy reflects document outline, not visual size
<time datetime="YYYY-MM-DD"> for dates, <address> for contact info

`<head>` Checklist

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title — Site Name</title>
<meta name="description" content="Under 160 characters">

<!-- Open Graph -->
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="/images/og-image.jpg">
<meta property="og:url" content="https://example.com/page">

<!-- Icons -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

<!-- Resource hints -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Non-blocking CSS -->
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>

<!-- Module/legacy split -->
<script type="module" src="/js/main.js"></script>
<script nomodule src="/js/legacy.js"></script>

Modern Web APIs

Service Worker — cache-first with network fallback:

Install: cache static assets, skipWaiting()
Activate: delete old caches, clients.claim()
Fetch: check cache first, then network; store network responses in runtime cache
Surface update availability with a non-intrusive UI prompt

IntersectionObserver — lazy loading:

Observe img[data-src] and [data-lazy-component]
On intersection: swap data-src → src, dynamic import() for components
Provide loadAllImages() fallback for unsupported browsers

ResizeObserver over window.resize for element-level sizing.

Web Workers for CPU-heavy tasks (parsing, sorting) — keep main thread free.

Feature Detection Pattern

const supports = {
  serviceWorker: 'serviceWorker' in navigator,
  intersectionObserver: 'IntersectionObserver' in window,
  resizeObserver: 'ResizeObserver' in window,
  customElements: 'customElements' in window,
  cssGrid: CSS.supports('display', 'grid'),
  cssContainerQueries: CSS.supports('container-type', 'inline-size'),
  reducedMotion: matchMedia('(prefers-reduced-motion: reduce)').matches,
  darkMode: matchMedia('(prefers-color-scheme: dark)').matches,
  saveData: navigator.connection?.saveData ?? false,
};

Add capability classes to <body> at page load (js, touch, reduced-motion, prefers-dark, slow-connection). CSS uses these for progressive enhancement.

Structured Data

Include <script type="application/ld+json"> for pages with rich content:

Articles: @type: Article with headline, author, datePublished
Products: @type: Product with offers, aggregateRating
Organizations: @type: Organization with logo, contactPoint

Core Web Vitals Targets

Metric	Good	Needs Work
LCP (Largest Contentful Paint)	≤ 2.5s	> 4s
INP (Interaction to Next Paint)	≤ 200ms	> 500ms
CLS (Cumulative Layout Shift)	≤ 0.1	> 0.25

LCP optimization: preload hero image, inline critical CSS, avoid render-blocking resources. CLS prevention: explicit width/height on all images and videos, reserve space for dynamic content. INP: keep main thread clear, defer non-critical JS, use scheduler.yield() for long tasks.

Accessibility (WCAG AA)

All images: descriptive alt (empty alt="" for decorative)
Form inputs: explicit <label for="...">, not placeholder-only
Error messages: linked via aria-describedby, aria-invalid="true"
Dynamic content: announce via [aria-live="polite"] regions
Keyboard: all interactive elements reachable and operable
Color contrast: 4.5:1 normal text, 3:1 large text and UI components

Security Headers (HTTP)

Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()

Quality Checklist

Before completing standards work:

[ ] W3C HTML validation passes (no errors)
[ ] Semantic landmark regions present
[ ] All images have appropriate alt text
[ ] Page works with JavaScript disabled (basic functionality)
[ ] Service Worker registered with update handling
[ ] Structured data present for rich-content pages
[ ] Core Web Vitals targets met (measure with Lighthouse)
[ ] WCAG AA contrast and keyboard navigation verified
[ ] Security headers configured

web-standards— agent skill

Is web-standards safe to install?

Core Responsibilities

Semantic HTML Foundations

`<head>` Checklist

Modern Web APIs

Feature Detection Pattern

Structured Data

Core Web Vitals Targets

Accessibility (WCAG AA)

Security Headers (HTTP)

Quality Checklist

Audit the pieces. Scan the whole. Decide.

Is web-standards safe to install?

Core Responsibilities

Semantic HTML Foundations

<head> Checklist

Modern Web APIs

Feature Detection Pattern

Structured Data

Core Web Vitals Targets

Accessibility (WCAG AA)

Security Headers (HTTP)

Quality Checklist

Audit the pieces. Scan the whole. Decide.

`<head>` Checklist