스킬

web-quality-skills: Lighthouse로 측정 우선 웹 품질 점검하기

기존 페이지를 근거 중심으로 품질 점검하려는 사람에게 맞다. 공식 npx로 설치하고 먼저 web-quality-audit를 돌린 뒤, 결과를 보고 나서 파일을 바꾼다.

Official source · web-quality-skills

Install

npx skills add addyosmani/web-quality-skills

누구에게 맞나

느낌으로 스타일을 고치는 것이 아니라 측정 결과로 웹 품질을 올리려는 사람에게 맞다. 공식 문구: 이것은 비공식·측정 우선 Agent Skills 모음이다. Google Lighthouse, 에이전트용 Chrome DevTools, Core Web Vitals, WCAG, 검색 관련 안내와 함께 웹 프로젝트를 최적화한다.

더 맞는 사람은 열 수 있는 사이트나 로컬 프로젝트가 이미 있고, 먼저 근거 중심 품질 점검을 한 번 하려는 사람이다. 원문이 지명한 스킬은 web-quality-audit이다. Lighthouse와 소스 코드 분류를 가로질러 점검한다. 트리거 문구는 “Audit my site”, “Review this for quality”, “Check web quality”를 포함한다.

기술 스택과 무관하다고 주장하며 React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, 순수 HTML 등과 쓸 수 있다. 이 집합을 「이 프레임워크만 지원한다」로 읽지 말 것.

시작 전에 npx skills add를 실행할 수 있어야 한다. 주 경로를 다른 설치기로 바꾸지 말 것.

3분 안에 첫 시도를 마치기

저장소가 준 npx 주 경로만 따른다. 첫 시도는 점검만 한다. 운영 코드는 바꾸지 말 것.

전제 조건: 이 기기에 이미 npm/npx가 있고, 기존 웹 프로젝트 또는 도달 가능한 사이트가 있다. 점검할 주소를 만들지 말 것.

설치 위치: 작업 공간에서 실행한다:

npx skills add addyosmani/web-quality-skills

공식 저장소:

https://github.com/addyosmani/web-quality-skills

스킬 설명 앵커:

https://github.com/addyosmani/web-quality-skills#web-quality-audit

Lighthouse 개요:

https://developer.chrome.com/docs/lighthouse/overview/

낮은 위험 트리거: 설치 후 기존 프로젝트에 “Check web quality” 또는 “Review this for quality”라고 말한다. 공식은 이를 근거 중심 점검으로 적는다. 먼저 보고서를 보고 파일을 바꿀지 정한다. Agent Skills 규격 페이지는 원문의 가리킴일 뿐이다:

https://agentskills.io/

성공 신호: 도우미가 Lighthouse와 소스 코드 분류로 점검 결과를 내고 바로 패치를 내지 않는다. 다음이 성능이나 접근성 코드 변경이면 먼저 어떤 파일을 바꿀지 확인한다.

사용 사례

사례 1: 기존 사이트에 web-quality-audit를 한다. 공식 트리거 문장 하나를 써서 Lighthouse와 소스 코드 분류를 가로질러 점검하게 한다. 사이트가 이미 있고 먼저 측정 근거를 받고 싶은 사람에게 맞다. 증거가 그리는 스킬 행은 이 하나뿐이며 다른 스킬 이름은 적지 않는다. 출력을 점검 결과로 다루고 자동으로 밖으로 보내지 말 것.

사례 2: 다른 프레임워크 프로젝트에서 같은 측정 우선 점검을 한다. 공식은 스택과 무관하다고 적고 React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, 순수 HTML을 예로 든다. 스택은 이미 고정되었고 품질 점검만 더하려는 사람에게 맞다. 「그중 하나가 필수」라고 짐작하지 말고, 나타나지 않은 스킬 이름도 채우지 말 것.

사용 경계

주 설치 명령은 npx skills add addyosmani/web-quality-skills이다. 원문은 Claude Code 플러그인 명령도 적는다: /plugin marketplace add addyosmani/web-quality-skills, 이어서 /plugin install web-quality-skills@addy-web-quality-skills. 첫 시도에서 두 경로를 한 작업에 섞지 말 것.

이 페이지가 지명한 스킬은 web-quality-audit뿐이다. 다른 스킬 이름을 스스로 채우지 말 것.

이것은 비공식 모음이다. 공식은 모든 WCAG 조항을 덮는다고 보장하지 않으며, 검색 안내와 DevTools를 동시에 열라고도 하지 않는다.