초기 스타일 지정부터 최종 보안 구현에 이르기까지 웹 개발 주기의 현재 단계에 맞는 최신 웹 가이드 기술을 선택하세요.
핵심 웹 분야
웹 분야별로 작업을 구체화하고 집중하는 데 도움이 되는 오케스트레이터입니다.
accessibility
/modern-web-guidance accessibility
전체 애플리케이션에서 효과적인 접근성 패턴을 평가, 수정, 구현하는 데 도움이 되는 중앙 감사 가이드 역할을 합니다.
performance
/modern-web-guidance performance
Core Web Vitals를 최적화하고, 페이지 로드 시간 지연 시간을 줄이고, 사용자 입력에 대한 응답성을 개선하는 데 도움이 됩니다.
user-experience
/modern-web-guidance user-experience
반응형 맞춤 요소, 부드러운 전환, 최신 스타일 지정 패턴을 빠르게 구현하는 데 도움이 되는 사용자 인터페이스 (UI) 툴킷 역할을 합니다.
GitHub에서 user-experience 스킬 보기
웹 기술
이러한 핵심 기술은 모든 최신 애플리케이션에 필수적인 빌딩 블록을 제공하여 프로젝트가 시맨틱 HTML, 속도, 상호 운용성을 고려한 최신 권장사항으로 시작되도록 합니다.
html
/modern-web-guidance html
최신 HTML 아키텍처, 시맨틱, 기본 대화형 API (대화상자, 팝오버, 세부정보), 포커스 관리, 리소스 우선순위에 관한 작업 중심 가이드라인입니다. 웹 문서를 구조화하거나, 기본 오버레이를 구현하거나, 리소스 로드 순서를 최적화할 때 이 가이드를 사용하세요.
css
/modern-web-guidance css
최신 CSS 아키텍처, 레이아웃, 성능에 관한 작업 중심 가이드라인입니다. 스타일을 작성하거나, 디자인 시스템을 관리하거나, 웹 렌더링을 최적화할 때 이 가이드를 사용하세요.
css-layout
/modern-web-guidance css-layout
Flexbox, 그리드, 하위 그리드, 컨테이너 쿼리, 앵커 위치 지정, 내재적 크기 조정과 같은 최신 CSS 레이아웃입니다. 반응형 UI 구성요소 또는 페이지 레이아웃을 설계할 때 이 스킬을 사용하세요.
forms
/modern-web-guidance forms
더욱 액세스 가능하고 안전하며 사용자 친화적인 웹 양식을 빌드하기 위한 권장사항입니다. 양식, 입력, 제출 흐름을 만들거나 수정할 때 이 가이드를 사용하세요.
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
WebAssembly를 사용하여 최신 웹용 C 및 C++를 컴파일합니다. C++ 코드를 포팅하거나, Emscripten으로 C++ 라이브러리를 빌드하거나, 브라우저에서 고성능 C++ 구성요소를 설정해야 할 때 이 기술을 사용하세요.
브라우저 기능 (선택)
이러한 기술은 Manifest V3와 같은 최신 표준을 따르는 Chrome 확장 프로그램을 개발하고 메타데이터, 개인 정보처리방침, 권한 근거를 준비하는 데 도움이 되는 Chrome 웹 스토어에 게시를 간소화하는 데 도움이 됩니다. 이러한 기술은 선택사항이며 기본적으로 사용 설정되지 않습니다.
chrome-extensions
/modern-web-guidance chrome-extensions
일반적인 서비스 워커 수명 주기 및 샌드박스화 문제를 방지하는 Manifest V3에서 안전하고 규정을 준수하는 Chrome 확장 프로그램을 빌드합니다. 수신 동의하려면 chrome-extensions 스킬을 지정해야 합니다.
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
GitHub에서 chrome-extensions 스킬 보기
보안, 신뢰, ID
이러한 기술은 방어적 HTTP 헤더와 출처 격리를 통해 XSS와 같은 클라이언트 측 익스플로잇으로부터 애플리케이션을 보호하여 사용자 신뢰에 중점을 둡니다. 또한 개발자는 패스키로 인증 흐름을 개발하고, 서드 파티 추적을 최소화하고, 기술을 사용하여 C/C++ 라이브러리를 WebAssembly 모듈로 포팅할 수 있습니다.
security
/modern-web-guidance security
웹 개발자를 위한 예방적 보안 가이드라인 (XSS, CSP, 쿠키, 교차 출처 격리)입니다. 이 스킬을 사용하여 보안 정책을 안전하게 감사, 테스트, 배포하는 프로세스를 안내합니다.
passkeys
/modern-web-guidance passkeys
웹 애플리케이션에서 WebAuthn 및 패스키를 구현하기 위한 포괄적인 오리엔테이션 및 교차 원칙입니다. 패스키 등록, 인증, 관리 또는 재인증을 처리할 때 이 가이드를 사용하세요.
privacy
/modern-web-guidance privacy
웹 개발자가 개인 정보 보호 중심 설계, 데이터 수집 최소화, 서드 파티 감사, 안전한 데이터 처리를 구현하기 위한 작업 중심 가이드라인입니다. 애플리케이션을 설계하거나, 서드 파티 서비스를 통합하거나, 사용자 데이터를 처리하거나, 보안 헤더를 구성할 때 이 기술을 사용하세요.
에이전트형 시스템
이러한 기술은 WebMCP를 사용하여 웹 애플리케이션과 AI 워크플로 간의 격차를 해소하는 데 도움이 됩니다. 클라이언트 측 브라우저 기능을 대화형 도구로 노출하면 AI 에이전트가 애플리케이션 기능과 직접 상호작용하도록 지시할 수 있습니다.
webmcp
/modern-web-guidance webmcp
WebMCP를 구현하여 클라이언트 측 브라우저 기능을 AI 에이전트를 위한 대화형 도구로 노출합니다.
다음 단계
이제 최신 웹 가이드를 이해했으므로 직접 사용해 보세요. 최신 웹 가이드에서 지원되는 기능과 사용 사례를 알아보고 몇 가지 샘플 프롬프트를 사용해 시작해 보세요.