Design & UX · Review & audit
web
/web
Use when building or reviewing anything that renders in a browser — accessibility (WCAG 2.2), Core Web Vitals, security headers, SEO, responsive layout, error states, or loading states. Framework-agnostic.
For whom
Assessment and security
90/ 100Class: good
Format25 / 25
Frontmatter with name and description, valid name, description up to 1,024 characters, name matching the folder.
Discoverability25 / 25
Description explains when to use the skill, has a reasonable length and uses third person.
Content25 / 35
At least 150 words and at most 500 lines, headings, step lists, examples or code.
Hygiene15 / 15
No placeholders such as TODO, no Windows paths, with a licence.
Riskno signals detected in the scan
- Files in this package
- 6
- Scripts
- 0
- HTML comments
- 0
- URLs in SKILL.md
- 0
Deprecation
No signals detected. Repository changed on 28.10.2026, without references to retired models or APIs.
Licence
MIT, open: use and modify while retaining author attribution.
What it does and when to use it
Use when building or reviewing anything that renders in a browser — accessibility (WCAG 2.2), Core Web Vitals, security headers, SEO, responsive layout, error states, or loading states. Framework-agnostic.
Original author description
Use when building or reviewing anything that renders in a browser — accessibility (WCAG 2.2), Core Web Vitals, security headers, SEO, responsive layout, error states, or loading states. Framework-agnostic.
How it works
- Philosophy
- What's Included
- What This Pack Does NOT Cover
Original SKILL.md headings · 36 lines, 224 words
SKILL.md preview
--- name: "web" description: "Use when building or reviewing anything that renders in a browser — accessibility (WCAG 2.2), Core Web Vitals, security headers, SEO, responsive layout, error states, or loading states. Framework-agnostic." version: "2.0.0" type: knowledge layer: domain requires: sage: ">=1.0.0" activates-when: detected: [react, vue, svelte, angular, next, nuxt, astro, remix, gatsby, vite, webpack, html] tags: [react,vue,svelte,angular,next] --- # web **Layer 1 — Domain Foundation (v2.0)** Universal web development principles that apply to every web project regardless of framework. React, Vue, Svelte, vanilla JS — these principles hold. ## Philosophy This pack encodes the foundational web platform knowledge that agents frequently get right in isolation but miss in practice. An agent knows what ARIA labels are. It still produces a form with no error announcements for screen readers. An agent knows about Core Web Vitals. It still renders a 2MB hero image without dimensions. The gap isn't knowledge — it's consistent application. ## What's Included | Type | Count | Coverage | |------|-------|----------| | Patterns | 7 | Accessibility (WCAG 2.2), performance (Core Web Vitals), security headers (OWASP), SEO, responsive design, error UX, loading states | | Anti-patterns | 6 | Div soup, missing alt text, layout shift, unprotected forms, client-only critical paths, no security headers | | Constitution | 7 | principles | Grounded in: W3C WCAG 2.2 (October 2023), Google Core Web Vitals (2025), OWASP Secure Headers Project, OWASP CSP Cheat Sheet, MDN Web Docs, Web Almanac 2025, European Accessibility Act (June 2025). ## What This Pack Does NOT Cover - Framework-specific patterns (see `react`, `nextjs`, etc.) - CSS methodology opinions (BEM vs utility-first vs CSS-in-JS) - Build tool configuration (Webpack, Vite, Turbopack) - Backend/API patterns (see `api` or `baas`)
Files in this package (6)
- README.md 1 KB
- SKILL.md 2 KB
- tests.md 3 KB
- anti-patterns/web-anti-patterns.md 5 KB
- constitution/web.constitution-additions.md 2 KB
- patterns/web-patterns.md 10 KB
Versions
| Repository | Score | Licence |
|---|---|---|
| This page · xoai/sage | 90 | MIT |
| unsady/den | 100 | Apache-2.0 |
| G4bar/web-cli | 100 | MIT |
| PantherHale/qurn-skills | 95 | MIT |
| tpc-pascal/skillsmith | 90 | MIT |
Database snapshot: 13.11.2026 · package version dc01b01c9ad9 (SHA-256 digest of the entire package)
Downloads in the last 30 days: 0 · ranking
Report a problem with this skill: harmful content, incorrect descriptions or an author’s removal request.
Similar skills
- 90uiux
Design direction, design systems/tokens, components, accessibility (WCAG 2.2 AA), responsive layout, motion, and Core Web Vitals for web UI. Use when designing, building, reviewing, or polishing web UI; verify in a browser. - 90accessibility
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible". Do NOT use for SEO (use seo), performance (use core-web-vitals),… - 90a11y-performance
Use for release-level accessibility and performance review, including WCAG 2.2 AA, keyboard/focus, target size, reduced motion, semantic controls, Core Web Vitals, images/fonts/JavaScript, and animation or 3D performance budgets. - 100frontend-design
Designs and audits web interfaces for visual quality, usability and accessibility. Use when picking a palette, type scale or spacing, when a UI looks generic or AI-generated, when reviewing UI code for WCAG 2.2, focus or form issues, or when checking Core Web Vitals or CSS… - 90maisongr-frontend
Maison GR method for building and changing user interfaces to a production standard. Use when creating or modifying web or mobile UI components, pages, forms, navigation, dialogs, styling or design tokens, and when reviewing UI changes for accessibility (WCAG 2.2 AA), responsive… - 90web-quality-audit
Audit and improve web quality across accessibility, performance, UX, privacy, and browser security. Use for frontend audits, client audits, redesigns, landing pages, production-readiness passes, Core Web Vitals, keyboard navigation, privacy reviews, CSP/cookie/header checks, and…