Menu
Ensures sustainable web design and minimizes environmental impact (W3C guidelines)
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Guide users through creating custom VS Code agents with specialized capabilities, tool restrictions, and subagent workflows. Use when users want to create agent modes, define specialized workflows with context isolation, or build multi-stage agent systems with different tool access per stage. Provides structured interview process for comprehensive agent development.
Technology-agnostic, referential-agnostic orchestration framework for all compliance standards (RGAA, RGESN, RGS, RGPD, RGI, W3C-WSG)
Ensures digital accessibility for all users (WCAG 2.1 AA compliance, French RGAA 4.1.2 standard)
Ensures eco-responsible IT practices and minimizes environmental impact
Ensures system interoperability via open standards, documented APIs, and standardized data exchange
Ensures personal data protection and privacy rights according to GDPR/RGPD
| name | compliance-w3c-wsg |
| description | Ensures sustainable web design and minimizes environmental impact (W3C guidelines) |
| category | Sustainability & Environment |
| keywords | W3C, sustainability, green web, energy efficiency, carbon footprint, performance, accessibility |
| license | MIT |
W3C Web Sustainability Guidelines (WSG)
// ✅ Perceived performance: Show loading state first
import { Suspense } from 'react'
const Dashboard = () => (
<Suspense fallback={<SkeletonLoader />}>
<HeavyDataComponent />
</Suspense>
)
// ✅ Progressive image loading
<picture>
<source srcSet="image-small.webp" media="(max-width: 480px)" />
<source srcSet="image-medium.webp" media="(max-width: 1024px)" />
<source srcSet="image-large.webp" />
<img src="image-fallback.jpg" loading="lazy" alt="..." />
</picture>
// ✅ Code splitting by route
const AdminDashboard = lazy(() => import('./admin/dashboard'))
const UserProfile = lazy(() => import('./user/profile'))
// ✅ Energy-efficient algorithms (pagination vs loading all)
// ❌ Avoid: Loading 10,000 items
const allItems = await repository.find()
// ✅ Use: Pagination
const items = await repository.find({
skip: (page - 1) * pageSize,
take: pageSize,
})
// ✅ Compress responses
app.use(compression({ level: 6 })) // brotli at level 6
// ✅ Cache expensive computations
const cachedData = await cache.get('expensive-calc')
if (!cachedData) {
const result = expensiveCalculation()
await cache.set('expensive-calc', result, 3600) // 1 hour
}
// ✅ Minimal API payload (only needed fields)
// ❌ Avoid: Sending entire object
select: '*'
// ✅ Use: Select only needed fields
select: ['id', 'name', 'email'] // Reduce by 70%+
// ✅ Image optimization
<picture>
<source srcSet="image.avif" type="image/avif" />
<source srcSet="image.webp" type="image/webp" />
<img src="image.jpg" alt="..." sizes="(max-width: 480px) 100vw, 50vw" />
</picture>
// ✅ Font optimization
@font-face {
font-family: 'Efficient';
src: url('font-subset.woff2') format('woff2');
font-display: swap; // Show fallback immediately
}
// ✅ Reduce DNS lookups
// Have fewer external domains (CDN, fonts, analytics)
// ✅ Progressive enhancement: Form works without JS
;<form action="/api/submit" method="POST" noValidate>
<input name="email" type="email" required />
<button type="submit">Subscribe</button>
</form>
// Enhanced with JS for instant feedback (no page reload)
form.addEventListener('submit', (e) => {
e.preventDefault()
fetch('/api/submit', { method: 'POST', body: new FormData(form) })
})
// ✅ Service worker for offline support
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
}
// ✅ Monitor Core Web Vitals
import { getMetrics } from 'web-vitals'
getMetrics((metric) => {
console.log(`${metric.name}: ${metric.value}`)
// Send to analytics
fetch('/api/metrics', {
method: 'POST',
body: JSON.stringify({
name: metric.name,
value: metric.value,
timestamp: new Date(),
}),
})
})
// ✅ Carbon tracking (using API)
const carbonFootprint = await fetch('https://api.websustainability.org/carbon', {
body: JSON.stringify({ pageSize, requests, energy }),
}).then((r) => r.json())
// ✅ Feature detection for older browsers
const supportsWebP = () => {
const canvas = document.createElement('canvas')
return canvas.toDataURL('image/webp').indexOf('webp') === 5
}
// Fallback for older browsers
const imageFormat = supportsWebP() ? 'webp' : 'jpg'
// ✅ CSS for older devices
@supports (display: grid) {
.container {
display: grid
grid-template-columns: repeat(3, 1fr)
}
}
@supports not (display: grid) {
.container {
display: flex
flex-wrap: wrap
}
}
// ✅ Detect low power mode
if (navigator.deviceMemory < 4) {
// Disable heavy animations for low-memory devices
document.body.classList.add('low-memory')
}
// ✅ Detect high contrast mode (uses less battery)
if (window.matchMedia('(prefers-contrast: more)').matches) {
// Simplify colors, reduce complexity
}
// ✅ Use CSS transforms (GPU accelerated, less battery)
// ❌ Avoid: left/top (causes repaints)
animation: slide 0.3s ease-in-out
// ✅ Use: transform
@keyframes slide {
from { transform: translateX(0) }
to { transform: translateX(100px) }
}
// ✅ Accept slow networks
const img = new Image()
img.src = 'large-image.jpg'
img.style.loadingStrategy = 'lazy'
// ✅ Detect network speed
if (navigator.connection?.effectiveType === '4g') {
loadHighResAssets()
} else {
loadCompressedAssets()
}
// ✅ Localize currency and time
const formatter = new Intl.NumberFormat(userLocale, {
style: 'currency',
currency: userCurrency,
})
// ✅ Service worker caching
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll(['/', '/styles.css', '/offline.html'])
})
)
})
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request)
})
)
})
| Standard | Overlap | Distinction |
|---|---|---|
| RGESN | ~80% overlap | WSG more detailed, RGESN more French-specific |
| WCAG | ~40% (accessibility = sustainability) | WSG broader (energy, emissions, hardware) |
| RGI | ~20% (API efficiency) | WSG focused on user-facing sustainability |
| Performance | ~60% (perf = lower energy) | WSG adds carbon/emissions tracking |
| Pitfall | Problem | Solution |
|---|---|---|
| Ignoring slow networks | 40% of users on slow connections | Test on 3G/4G, mobile devices |
| Large images | 50% of page weight often images | Optimize: WebP, AVIF, responsive srcset |
| Heavy JS framework | Modern frameworks 300KB+ | Use lightweight alternatives, code splitting |
| No caching | Repeated downloads waste energy | Implement server + client-side caching |
| Bundling all code | Users download unused JS | Code splitting, tree-shaking, lazy loading |
| No offline support | App breaks without connection | Service workers, offline-first design |
| Autoplaying videos | Drains battery, wastes data | Play on user interaction, not autoplay |
| Font loading blocks render | Font requests block page display | Use font-display: swap, system fonts |
The W3C Web Sustainability Guidelines provide a holistic framework for building web applications that:
By following these guidelines, teams build applications that are better for users, better for the environment, and better for society.