Addyosmani 스킬

WCAG 2.2 지침에 따라 웹 접근성을 감사하고 개선합니다. "접근성 개선", "a11y 감사", "WCAG 준수", "스크린 리더 지원", "키보드 탐색", "접근 가능하게 만들기"와 같은 요청이 있을 때 사용하세요.

안정적인 API 및 인터페이스 설계를 안내합니다. API, 모듈 경계 또는 공개 인터페이스를 설계할 때 사용하세요. REST나 GraphQL 엔드포인트를 생성하거나, 모듈 간 타입 계약을 정의하거나, 프론트엔드와 백엔드 간 경계를 설정할 때 사용하세요.

최신 웹 개발 모범 사례를 보안, 호환성 및 코드 품질에 적용합니다. "모범 사례 적용", "보안 감사", "코드 현대화", "코드 품질 검토" 또는 "취약점 확인"을 요청받을 때 사용하세요.

실제 브라우저에서 Chrome DevTools MCP를 통해 테스트합니다. 브라우저에서 실행되는 모든 것을 빌드하거나 디버깅할 때 사용합니다. DOM을 검사하거나, 콘솔 오류를 캡처하거나, 네트워크 요청을 분석하거나, 성능을 프로파일링하거나, 실제 런타임 데이터로 시각적 출력을 확인해야 할 때 사용합니다. chrome-devtools MCP 서버가 구성되어 있어야 합니다.

CI/CD 파이프라인 설정을 자동화합니다. 빌드 및 배포 파이프라인을 설정하거나 수정할 때 사용합니다. 품질 게이트를 자동화하거나, CI에서 테스트 러너를 구성하거나, 배포 전략을 수립해야 할 때 사용합니다.

다축 코드 리뷰를 수행합니다. 변경 사항을 병합하기 전에 사용하세요. 자신, 다른 에이전트 또는 사람이 작성한 코드를 검토할 때 사용하세요. 코드가 메인 브랜치에 들어가기 전에 여러 차원에서 코드 품질을 평가해야 할 때 사용하세요.

코드를 명확하게 단순화합니다. 동작을 변경하지 않고 코드를 명확하게 리팩토링할 때 사용합니다. 코드가 작동하지만 읽기, 유지보수 또는 확장이 어려울 때 사용합니다. 불필요한 복잡성이 축적된 코드를 검토할 때 사용합니다.

에이전트 컨텍스트 설정을 최적화합니다. 새 세션을 시작할 때, 에이전트 출력 품질이 저하될 때, 작업 간 전환 시, 또는 프로젝트의 규칙 파일과 컨텍스트를 구성해야 할 때 사용하세요.

Core Web Vitals(LCP, INP, CLS)를 최적화하여 더 나은 페이지 경험과 검색 순위를 제공합니다. "Core Web Vitals 개선", "LCP 수정", "CLS 감소", "INP 최적화", "페이지 경험 최적화" 또는 "레이아웃 이동 수정"을 요청받을 때 사용하세요.

체계적인 근본 원인 디버깅을 안내합니다. 테스트가 실패하거나, 빌드가 깨지거나, 동작이 예상과 다르거나, 예상치 못한 오류가 발생할 때 사용하세요. 추측보다는 근본 원인을 찾고 수정하는 체계적인 접근 방식이 필요할 때 사용하세요.

사용 중단 및 마이그레이션을 관리합니다. 오래된 시스템, API 또는 기능을 제거할 때 사용합니다. 사용자를 한 구현에서 다른 구현으로 마이그레이션할 때 사용합니다. 기존 코드를 유지할지 중단할지 결정할 때 사용합니다.

결정 사항과 문서를 기록합니다. 아키텍처 결정을 내리거나, 공개 API를 변경하거나, 기능을 출시할 때, 또는 미래의 엔지니어와 에이전트가 코드베이스를 이해하는 데 필요한 맥락을 기록해야 할 때 사용하세요.

모든 사소하지 않은 결정을 새로운 맥락의 적대적 검토에 먼저 적용한 후 확정합니다. 정확성이 속도보다 중요할 때, 익숙하지 않은 코드에서 작업할 때, 위험이 큰 경우(프로덕션, 보안에 민감한 로직, 되돌릴 수 없는 작업), 또는 확신 있는 출력을 나중에 디버깅하는 것보다 지금 검증하는 것이 더 저렴할 때 사용하십시오.

프로덕션 품질의 접근 가능하고 반응형 사용자 인터페이스를 구축합니다. 인터페이스나 페이지를 만들거나 수정할 때, 컴포넌트를 생성할 때, 레이아웃을 구현할 때, WCAG 접근성 요구사항을 충족할 때, 상태를 관리할 때, 또는 결과물이 AI 생성물처럼 보이지 않고 프로덕션 품질처럼 보여야 할 때 사용하세요.

git 워크플로우 관행을 구조화합니다. 코드 변경 시 사용합니다. 커밋, 브랜칭, 충돌 해결 시 또는 여러 병렬 스트림에서 작업을 구성해야 할 때 사용합니다. 릴리스를 생성하거나, 시맨틱 버전 범프를 선택하거나, 태깅하거나, 체인지로그를 작성할 때 사용합니다.

원시 아이디어를 구조화된 발산 및 수렴 사고를 통해 날카롭고 실행 가능한 개념으로 다듬습니다. 아이디어가 여전히 모호할 때, 계획을 확정하기 전에 가정을 검증해야 할 때, 또는 하나로 수렴하기 전에 옵션을 확장하고 싶을 때 사용합니다. "ideate", "refine this idea", 또는 "stress-test my plan"에 의해 트리거됩니다.

변경 사항을 점진적으로 전달합니다. 여러 파일에 걸친 기능이나 변경 사항을 구현할 때 사용하세요. 한 번에 많은 양의 코드를 작성하려고 하거나, 작업이 한 번에 처리하기에 너무 크다고 느껴질 때 사용하세요.

사용자가 스스로 원한다고 생각하는 것이 아니라 실제로 원하는 것을 추출합니다. 한 번에 한 질문씩 인터뷰를 진행하여 근본 의도에 대한 신뢰도가 약 95%에 도달할 때까지 수행합니다. 요청이 불충분하게 명시된 경우("누구를 위해" 또는 "왜 지금" 없이 "X를 만들어 줘"), 사용자가 명시적으로 요청한 경우("인터뷰해 줘", "따져 봐 줘", "확실한가?", "내 생각을 스트레스 테스트해 줘"), 또는 계획, 명세, 코드가 존재하기 전에 모호한 요구사항을 조용히 임의로 채우고 있는 자신을 발견했을 때 사용합니다.

코드를 계측하여 프로덕션 동작을 확인하고 진단할 수 있도록 합니다. 로깅, 메트릭, 트레이싱 또는 알림을 추가할 때 사용합니다. 프로덕션에서 실행되는 기능을 출시할 때, 해당 기능이 제대로 작동한다는 증거가 필요할 때 사용합니다. 프로덕션 문제가 보고되었지만 사용 가능한 데이터로는 무슨 일이 일어났는지 알 수 없을 때 사용합니다.

웹 성능을 최적화하여 더 빠른 로딩과 더 나은 사용자 경험을 제공합니다. "사이트 속도 높이기", "성능 최적화", "로딩 시간 줄이기", "느린 로딩 수정", "페이지 속도 개선", "성능 감사" 요청 시 사용하세요.

프론트엔드, 백엔드, 쿼리, 데이터베이스 전반에 걸쳐 애플리케이션 성능을 최적화합니다. 성능 요구사항이 있거나, 성능 저하가 의심되거나, Core Web Vitals나 로드 시간 개선이 필요하거나, N+1 쿼리 패턴을 수정해야 하거나, 프로파일링에서 병목 현상이 발견된 경우 사용하세요.

작업을 순서가 있는 태스크로 분해합니다. 명세나 명확한 요구사항이 있고 이를 구현 가능한 태스크로 나눠야 할 때 사용합니다. 작업이 시작하기에 너무 크게 느껴지거나, 범위를 추정해야 하거나, 병렬 작업이 가능할 때 사용합니다.

코드를 취약점으로부터 강화합니다. 사용자 입력, 인증, 데이터 저장소 또는 외부 통합을 처리할 때 사용하세요. 신뢰할 수 없는 데이터를 받거나, 사용자 세션을 관리하거나, 타사 서비스와 상호작용하는 모든 기능을 구축할 때 사용하세요.

검색 엔진 가시성과 순위를 최적화합니다. "SEO 개선", "검색 최적화", "메타 태그 수정", "구조화된 데이터 추가", "사이트맵 최적화", 또는 "검색 엔진 최적화"를 요청받을 때 사용하세요.

프로덕션 출시를 준비합니다. 프로덕션에 배포할 준비를 할 때 사용하세요. 출시 전 체크리스트가 필요할 때, 모니터링을 설정할 때, 단계적 롤아웃을 계획할 때, 또는 롤백 전략이 필요할 때 사용하세요.

모든 구현 결정을 공식 문서에 근거합니다. 권위 있는 출처가 인용된 코드로, 구식 패턴 없이 작업하려 할 때 사용하세요. 정확성이 중요한 프레임워크나 라이브러리로 구축할 때 사용하세요.

코딩 전에 명세를 작성합니다. 새 프로젝트, 기능 또는 중요한 변경을 시작할 때 아직 명세가 없는 경우 사용합니다. 요구사항이 불명확하거나, 모호하거나, 막연한 아이디어로만 존재할 때 사용합니다.

테스트로 개발을 주도합니다. 로직을 구현하거나, 버그를 수정하거나, 동작을 변경할 때 사용하세요. 코드가 작동함을 증명해야 할 때, 버그 보고가 들어왔을 때, 또는 기존 기능을 수정하려고 할 때 사용하세요.

에이전트 스킬을 발견하고 호출합니다. 세션을 시작할 때나 현재 작업에 적용되는 스킬을 찾아야 할 때 사용하세요. 이는 다른 모든 스킬이 어떻게 발견되고 호출되는지를 관리하는 메타 스킬입니다.

성능, 접근성, SEO 및 모범 사례를 포괄하는 종합적인 웹 품질 감사입니다. "내 사이트 감사", "웹 품질 검토", "라이트하우스 감사 실행", "페이지 품질 확인", "내 웹사이트 최적화" 요청 시 사용하세요.