메뉴
6 web quality skills from Google Chrome's Addy Osmani: accessibility (WCAG), web quality audit (Lighthouse-style), Core Web Vitals (LCP/INP/CLS), performance, SEO, and security best practices.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Catalogue navigator for design-agent-skills. Lists available design skill stubs, matches user intent to the right stub, and routes to install and invoke. Use when the user wants to browse or find the right design skill.
Domain navigator for UI craft, visual design, brand, color, typography, mobile design, and interactive design engineering skills. Routes to skills for taste-driven UI, platform design (iOS/Android), components, color science, and the full visual design stack.
Create programmatic videos with React. Official Remotion skill package — compose video sequences using React components, animate with spring physics, and render to MP4/GIF. Ideal for product demos, explainers, and data-driven videos.
SwiftUI visual design skill for distinctive iOS/macOS interfaces that avoid generic AI-slop patterns. Covers design direction, layout systems, typography, color, spacing, brand integration, and design review.
Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS. Ensures UI work meets baseline quality standards before shipping.
Produces distinctive, production-grade frontend interfaces with high design quality and a strong point of view. Actively avoids generic AI-generated aesthetics in favour of considered, original UI decisions.
| name | addyosmani-quality |
| description | 6 web quality skills from Google Chrome's Addy Osmani: accessibility (WCAG), web quality audit (Lighthouse-style), Core Web Vitals (LCP/INP/CLS), performance, SEO, and security best practices. |
| triggers | ["Addy Osmani","web quality","core web vitals","web accessibility","Lighthouse audit","SEO audit","web best practices"] |
| das | {"category":"accessibility-quality","upstream":"https://github.com/addyosmani/web-quality-skills","version":"latest","install":false} |
Catalogue stub — full package: addyosmani/web-quality-skills
Run this before any web quality, performance, or accessibility audit:
Is an Osmani skill already installed?
Check: ~/.design-agent-skills/skills/web-quality-audit/SKILL.md exists (representative skill).
Do you have shell access?
! — add -g for global install or omit for project-only# WCAG compliance, screen reader, keyboard navigation
npx skills add addyosmani/web-quality-skills --skill accessibility
# Lighthouse-style: performance, a11y, SEO, best practices
npx skills add addyosmani/web-quality-skills --skill web-quality-audit
# LCP, INP, CLS-specific optimizations
npx skills add addyosmani/web-quality-skills --skill core-web-vitals
# Loading speed, runtime efficiency, resource optimization
npx skills add addyosmani/web-quality-skills --skill performance
# Search engine optimization, structured data
npx skills add addyosmani/web-quality-skills --skill seo
# Security, modern web APIs, code quality
npx skills add addyosmani/web-quality-skills --skill best-practices
accessibility — "WCAG compliance", "screen reader", "keyboard nav"web-quality-audit — "Lighthouse audit", "web quality"core-web-vitals — "LCP", "INP", "CLS", "Core Web Vitals"performance — "page speed", "loading performance"seo — "SEO", "structured data", "crawlability"best-practices — "web security", "modern APIs", "code quality"Addy Osmani's (Google Chrome) 6-skill web quality suite. Covers the complete quality axis: accessibility (WCAG 2.2), Lighthouse-style holistic audits, Core Web Vitals optimization, loading/runtime performance, SEO, and security best practices — each as a focused, actionable skill.