Modern Web Guidance는 여러 일반적인 사용 사례에서 AI 코딩 에이전트를 안내하여 접근성, 성능, 보안이 뛰어난 최신 웹 환경을 빌드하는 데 도움이 되는, 항상 최신 상태로 유지되고 전문가의 검증을 거친 기능의 집합입니다.

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 기술을 설치합니다.

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

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

Gemini CLI에 Modern Web Guidance 스킬을 설치합니다.

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

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

다음 샘플 프롬프트를 사용하여 AI 지원 코딩 워크플로에서 최신 웹 안내를 호출하여 새로운 기능을 빌드하고, 기존 코드를 현대화하고, 앱 속도를 높여 보세요. 
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.
상담사를 위한 Chrome DevTools와 Modern Web Guidance 기술을 결합하여 웹 개발 워크플로를 개선하세요. 실시간 성능 감사를 실행하고, 접근성 트리를 검사하고, 콘솔 로그를 캡처한 다음, 정확한 최신 웹 코드 수정사항을 자동으로 적용합니다.
자세히 알아보기

참여 방법 알아보기

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