Claude Code 수준에서 페이지 접근성 이슈 감사

알 수 없는 접근성 상태의 UI를 넘겨받았고 체크박스가 아닌 실제 감사가 필요할 때. 'axe를 실행했으니 완료'가 아닌 실제 접근성 개선.

Addy Osmani Agent Skills — 사용 사례, 설치 & 라이브 데모

Name: Addy Osmani Agent Skills (Claude Skill)
Author: addyosmani

왜 쓰나요

핵심 기능

성능 스킬: Core Web Vitals, 렌더 예산, INP 디버깅
접근성: axe + 스크린 리더 워크스루 스크립트
보안: OWASP 중심 리뷰와 시크릿 스캐닝
디버깅: 구조화된 근본 원인 워크플로, 프로파일러 지원
코딩 에이전트 전반에서 작동 (Claude Code, Cursor, Codex, Gemini CLI)
MIT, 텔레메트리 없음

라이브 데모

실제 사용 모습

준비됨

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "addyosmani-agent-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "addyosmani-agent-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/addyosmani/agent-skills",
          "~/.claude/skills/addyosmani-agent-skills"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add addyosmani-agent-skills -- git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Addy Osmani Agent Skills

Claude가 무거운 작업을 대신하는 Core Web Vitals 실패 수정

👤 프론트엔드 엔지니어, 성능 의식 있는 팀 ⏱ ~90 min intermediate

언제 쓸까: PageSpeed가 하락했고, LCP가 2.5초를 넘었으며, 비즈니스에서 이유를 묻고 있을 때.

사전 조건

스킬 설치 — git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills
감사할 URL 또는 저장소 — 공개 URL 또는 로컬 개발 서버

흐름

진단

Use the perf skill on https://mysite.com. Pull a CrUX report, run a Lighthouse trace, and identify the top 3 LCP and INP culprits.✓ 복사됨

→ 파일 참조가 있는 원인 순위 목록, '이미지 최적화' 같은 일반적 조언이 아님
수정

For the top LCP culprit, apply the fix. For images, prefer fetchpriority + AVIF/WebP fallback. Show diff and rationale.✓ 복사됨

→ 코드 변경 + 예상 지표 전후 영향
검증

Re-run Lighthouse locally. Compare to previous run.✓ 복사됨

→ 수치 개선됨; 개선 안 됐다면 가설이 틀렸음 — 1단계로

결과: 기록이 남는 측정 가능한 LCP/INP 개선.

함정

Claude가 과도하게 무거운 프레임워크 재작성을 선택 — 스킬에 '최소 가능 변경' 규칙이 포함되어 있습니다 — 에이전트가 벗어나면 다시 붙여넣으세요

함께 쓰기: filesystem

TypeScript 코드베이스에 기본 보안 리뷰 실행

👤 전담 보안팀이 없는 개발자 ⏱ ~75 min advanced

언제 쓸까: 출시 전 건전한 스윕을 원할 때 — 펜 테스트는 아니지만 아무것도 안 하는 것보다 낫습니다.

흐름

스캔

Use the security skill. Scan src/ for: hardcoded secrets, unsafe SQL/NoSQL queries, missing rate limits on POST handlers, JWT misuse.✓ 복사됨

→ file:line과 심각도가 있는 발견 표
상위 5개 수정

Fix the highest-severity items. Add tests where feasible.✓ 복사됨

→ 5개 수정 완료

결과: 기본 보안 리뷰를 통과하는 코드베이스.

함정

테스트 픽스처에서 거짓 양성 — 스킬은 기본적으로 /tests/와 /__fixtures__/를 존중합니다 — 재정의하려면 --include-tests를 전달하세요

함께 쓰기: github

회귀 버그에 구조화된 디버그 스킬 사용

👤 '어제는 잘 됐는데' 버그가 있는 모든 개발자 ⏱ ~60 min intermediate

언제 쓸까: 30분째 추측하고 있을 때 — 구조화된 근본 원인 흐름으로 전환하세요.

흐름

재현

Use the debug skill. First step: get a minimal reproduction.✓ 복사됨

→ 재현 단계 + 단일 실패 테스트
이분 탐색

Bisect git history with the failing test as oracle.✓ 복사됨

→ 문제 커밋 식별됨
수정

Surgical fix — preserve the intended behavior of the offending commit.✓ 복사됨

→ 설명과 함께 수정 커밋됨

결과: 테스트로 뒷받침된 재현 가능한 수정, 추측이 아님.

함정

버그가 코드가 아닌 환경/데이터에 있을 때 스킬이 이분 탐색을 과도하게 적용 — 스킬이 체크리스트 순서대로 환경/데이터를 먼저 확인합니다 — 순서를 따르세요

함께 쓰기: github

조합

다른 MCP와 조합해 10배 효율

addyosmani-agent-skills + github

스킬 출력에서 PR 열기

addyosmani-agent-skills + filesystem

스킬 감사 보고서 유지

도구

이 MCP가 노출하는 것

도구	입력	언제 호출
perf.audit	url_or_path	성능 회귀
a11y.audit	path	출시 전 접근성 확인
security.scan	path	출시 전 보안 스윕
debug.bisect	failing_test, search_window	알려진 정상 기준이 있는 회귀

비용 및 제한

운영 비용

API 쿼터: 해당 없음 — 로컬 스킬
호출당 토큰: 대규모 리뷰는 높을 수 있음; 대형 코드베이스는 50k+ tokens 사용
금액: 무료 (MIT)
팁: 전체 사이트가 아닌 경로별로 perf/a11y를 실행하여 비용을 제한하세요

보안

권한, 시크릿, 파급범위

최소 스코프: filesystem-read

자격 증명 저장: 없음

데이터 외부 송신: Lighthouse는 로컬에서 실행됩니다; 감사된 URL만 fetch됨

스킬 출력이 소스 코드를 인용할 수 있습니다 — 외부 공유 전에 검토하세요

문제 해결

자주 발생하는 오류와 해결

Lighthouse 실행 실패

Node 18+과 Chrome을 설치하세요; 스킬은 둘 다 PATH에 있어야 합니다

확인: `npx lighthouse https://example.com`이 단독으로 작동함

axe 규칙이 오래됨

스킬이 고정된 axe 버전과 함께 제공됩니다; 정기적으로 git pull로 업데이트하세요

이분 탐색이 비결정적 테스트에서 영원히 실행됨

--repeat 3을 전달하여 각 커밋을 3번씩 테스트 — 불안정한 테스트가 필터링됩니다

대안

Addy Osmani Agent Skills 다른 것과 비교

대안	언제 쓰나	단점/장점
wshobson/agents	백엔드 / 데이터 / DevOps를 포함한 광범위한 역할 커버리지를 원할 때	wshobson이 더 넓지만 Addy의 번들은 웹 성능/접근성에 더 깊이 있습니다
Anthropic 공식 스킬	일반적이고 공식 검증된 빌딩 블록이 필요할 때	덜 의견적이지만 현장에서 검증된 형태가 아님

Addy Osmani Agent Skills