addyosmani/web-quality-skills
6 skills86.6k installs13.1k starsGitHub
Install
npx skills add https://github.com/addyosmani/web-quality-skillsSkills in this repo
1AccessibilityAccessibility is an agent skill from the web-quality-skills collection that teaches agents how to audit and improve user-facing web experiences against WCAG 2.2 and common Lighthouse accessibility rules. Solo and indie builders shipping SaaS dashboards, marketing sites, browser extensions with UI, or content products install it when triggers like “a11y audit”, “WCAG compliance”, “screen reader support”, or “keyboard navigation” appear in the chat. The skill is procedural reference material—not a hosted scanner—so the agent reads your markup and suggests specific replacements: descriptive alt text, logical heading order, labelled forms, table headers, focus traps in dialogs, and status announcements via live regions. It also documents operable requirements such as full keyboard paths, visible focus, skip links, and minimum touch targets, plus understandable copy for errors and robust parsing so assistive tech does not break on invalid ARIA. Use it during frontend implementation, before release review, or when you need a structured remediation list you can paste into issues or PRs without hiring a separate accessibility consultant for the first pass.25kinstalls2SeoThe seo skill from web-quality-skills gives solo builders an agent playbook for technical and on-page search optimization grounded in Lighthouse SEO audits and Google Search guidance. It focuses on what you control in the repo: crawl rules, indexation directives, metadata, structured data, and sitemap hygiene while being honest that content quality and backlinks remain larger levers it only partially addresses. Install it when you are asked to improve SEO, fix meta tags, add structured data, or optimize sitemaps—not when you need a link-building campaign. The skill documents approximate influence weights so you prioritize engineering work that actually moves crawlability and snippet quality. It explicitly defers Core Web Vitals depth to a sibling skill, which keeps Launch SEO work separate from performance tuning. Best for marketing sites, SaaS docs, and storefronts you ship yourself with an AI coding agent.23.4kinstalls3PerformancePerformance is an agent skill for solo builders who ship marketing sites, SaaS dashboards, or storefronts and need structured web performance work instead of random tweaks. It mirrors deep Lighthouse performance thinking: find bottlenecks in code and assets, rank them by Core Web Vitals impact, and apply specific fixes with measurable before/after outcomes. The skill encodes a practical performance budget across total weight, JavaScript, CSS, above-the-fold images, fonts, and third-party scripts so tradeoffs stay explicit on 3G-class connections. Guidance spans server response (TTFB, compression, CDN edge caching) and runtime efficiency. Use it during ship when pages feel slow, after a deploy regression, or when launch SEO depends on page speed. It pairs well with frontend refactors but does not replace profiling tools—you still validate in real Lighthouse or field data.14.3kinstalls4Core Web VitalsCore Web Vitals is a focused reference skill for Largest Contentful Paint inside the web-quality skills pack. Solo and indie builders shipping landing pages, dashboards, or content sites can invoke it when Lighthouse or Search Console flags slow LCP. The skill walks through what element becomes LCP, how TTFB and resource load stack into the final paint, and concrete fixes: edge functions, cache headers, preloading the hero asset, modern image formats, and sizing attributes. It complements generic frontend work by tying recommendations to measurable vitals rather than subjective polish. Use it during perf passes before launch, after a redesign, or when SEO and conversion depend on fast first paint. The agent applies patterns from the reference to your stack (e.g. Vercel edge config snippets) without replacing a full audit tool—you still validate in DevTools and field data.8.3kinstalls5Web Quality Auditweb-quality-audit is a frontend quality checker from Addy Osmani’s web-quality-skills collection. Solo builders shipping marketing sites, SaaS shells, or content apps invoke it when they want a deterministic, non-destructive HTML sweep before merge or deploy. The bash entrypoint walks a file or folder, emits developer-readable progress on stderr, and prints a JSON payload on stdout suitable for CI parsing or agent follow-up fixes. It enforces practical guardrails—maximum finding counts per file and globally—so one broken template cannot drown out the rest of the audit. Unlike browser Lighthouse runs, this skill focuses on fast static HTML signals that agents can fix in-repo immediately. Use it in Ship alongside manual review; rerun in Launch or Grow when SEO landing pages change. Intermediate comfort with shell scripts and jq installation is assumed.8kinstalls6Best PracticesBest practices is an agent skill from the web-quality-skills collection that translates modern Lighthouse-style guidance into actionable edits for solo web projects. When you are asked to apply best practices, run a security audit, modernize legacy markup, review code quality, or hunt vulnerabilities, the skill steers agents toward HTTPS everywhere, eliminating mixed content, setting HSTS, and defining Content Security Policy at the header or meta layer. It also frames compatibility and quality expectations so reviews do not stop at superficial lint fixes. Indie builders shipping marketing sites, SaaS dashboards, or content apps use it as a structured pass over HTML, script includes, and deployment headers before users hit production. It complements dedicated perf or SEO skills by focusing on safe defaults and reviewer-visible scheme choices rather than feature development.7.6kinstalls