Modern Web Guidance


Modern Web Guidance는 웹 플랫폼 전문 지식, 권장사항, 브라우저 호환성 데이터를 코딩 에이전트에 직접 삽입하는 기술 모음입니다.

modern-web-guidance CLI를 사용하여 설치(권장):

npx modern-web-guidance@latest install
시작하기 GitHub에서 보기

선호하는 AI 코딩 에이전트와 호환

Modern Web Guidance는 선호하는 AI 코딩 에이전트와 함께 사용할 수 있으므로 선호하는 워크플로에서 최신 웹 권장사항에 관한 안내를 받을 수 있습니다.
모든 설치 옵션 보기

Vercel의 Agent Skills를 사용하여 프로젝트에 Modern Web Guidance를 설치합니다.

npx skills add GoogleChrome/modern-web-guidance

Claude Code용 Modern Web Guidance 기능을 설치합니다.

claude plugin marketplace add GoogleChrome/modern-web-guidance
claude plugin install modern-web-guidance@googlechrome

Copilot CLI용 Modern Web Guidance 기술을 설치합니다.

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Antigravity CLI용 Modern Web Guidance 기술을 설치합니다.

agy plugin install https://github.com/GoogleChrome/modern-web-guidance
이 개요를 시청하여 Modern Web Guidance의 정의, 해결하는 문제, AI 지원 웹 개발 워크플로를 개선하는 방법을 알아보세요.
지금 보기

더 나은 사용자 환경을 위한 프롬프트

다음 샘플 프롬프트를 사용해 AI 지원 코딩 워크플로에서 Modern Web Guidance를 호출하여 새로운 기능을 빌드하고, 기존 코드를 현대화하고, 앱 속도를 높여 보세요. 
Create an accordion-style stats component that smoothly animates on open and close.
 
Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.
 
Design a dashboard card that uses container queries to adapt its layout to its own width.
 
Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.
 
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.
 
Implement a passkey-based login flow using the latest WebAuthn features.
 
Implement a starter Content Security Policy (CSP) without breaking my app.
 
Perform a security audit of my site and suggest improvements.
 
Set up my app to begin preloading pages when users hover over important links.
 
My app has lots of long tasks, and its INP is affected. Help me fix it.
 
Help me improve my app's LCP.
AI 코딩 어시스턴트를 안내하여 최첨단의 상호 운용 가능한 웹 코드를 생성하는 방법을 알아보세요. 이 입문 Codelab에서는 기존 웹 앱을 감사하고 Modern Web Guidance 도구를 사용하여 에이전트가 최신 권장사항을 따르도록 유도합니다. 기준 브라우저 타겟을 설정하고, Core Web Vitals를 최적화하고, 일반 AI 출력을 고성능 웹 솔루션으로 변환하는 방법을 알아보세요.
시작하기
에이전트용 Chrome DevTools를 Modern Web Guidance 기술과 결합하여 웹 개발 워크플로를 개선하세요. 실시간 성능 감사를 실행하고, 접근성 트리를 검사하고, 콘솔 로그를 캡처한 다음, 정확한 최신 웹 코드 수정사항을 자동으로 적용합니다.
자세히 알아보기

참여 방법 알아보기

Modern Web Guidance를 개선할 수 있는 아이디어가 있으신가요? 참여 방법을 알아보세요.
자세히 알아보기