모던 웹 가이던스

무엇을 해주나

Claude가 프론트엔드 코드를 쓰기 전에 modern-web-guidance npm 패키지를 호출해 해당 작업에 맞는 최신 웹 표준 가이드를 찾아옵니다.

• search "<질의>"로 목적에 맞는 가이드 후보를 유사도 순으로 검색
• retrieve "<id>"로 해당 가이드 전문(구현 단계, 브라우저 지원 데이터, 폴백 전략)을 가져오기
• 생성한 코드를 가이드와 대조해 최신 패턴과 폴백이 제대로 적용됐는지 검증
• Baseline(널리 사용 가능) 기준으로 폴백 필요 여부를 판단하고, 프로젝트별 브라우저 지원 정책을 CLAUDE.md에 문서화하도록 제안

모달/팝오버, 앵커 포지셔닝, 컨테이너 쿼리, :has(), View Transitions, 스크롤 연동 애니메이션, LCP/INP 최적화, content-visibility, 파일시스템 접근·WebUSB 같은 영역을 다룹니다. 반대로 백엔드/SQL/CI·CD 작업에는 발동하지 않도록 명시되어 있습니다.

이런 분께 추천

• 모델의 학습 데이터에 남아 있는 구식 CSS/JS 패턴 때문에 답답했던 프론트엔드 개발자
• 라이브러리를 추가하기 전에 브라우저 기본 기능으로 해결할 수 있는지 확인하고 싶은 분
• React/Vue/Angular 프로젝트에서 레이아웃·스타일을 최신 표준으로 정리하려는 팀
• 브라우저 지원 범위와 폴백 정책을 일관되게 유지해야 하는 프로젝트

활용 예시

1. "히어로 이미지 로딩이 느려요" → LCP 후보 이미지 우선순위 최적화 가이드(Fetch Priority)를 찾아 적용
2. "드롭다운 메뉴를 버튼에 붙여서 띄워줘" → JS 위치 계산 라이브러리 대신 Popover API + CSS 앵커 포지셔닝과 폴백 코드 제안
3. "페이지 전환 애니메이션을 넣고 싶어" → View Transitions 가이드를 가져와 점진적 향상 방식으로 구현
4. "글이 아주 많은 목록 페이지가 버벅여요" → content-visibility / hidden="until-found" 기반 렌더링 지연 패턴 적용

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/pending/googlechrome/modern-web-guidance/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 aiskillstore/marketplace 의 pending/googlechrome/modern-web-guidance 폴더를 내 ~/.claude/skills/modern-web-guidance/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.