Modern Web Guidance - 코딩 에이전트를 최신 웹 표준으로 안내하는 스킬
Show HN: Get your coding agent off ~2019 JavaScript, onto modern web primitives
Modern Web Guidance는 Google Chrome, Microsoft Edge, Mozilla Firefox, MDN 팀이 협력하여 만든 도구로, 코딩 에이전트가 최신 웹 플랫폼 기능과 모범 사례를 활용하도록 돕습니다. LLM이 학습한 오래된 코드 패턴 대신, 250개의 현대 웹 기능과 203개의 실제 사용 사례를 담은 가이드를 제공하여 에이전트가 최적화된 네이티브 API를 사용하도록 유도합니다. `npx modern-web-guidance@latest install` 명령으로 쉽게 설치할 수 있으며, 코드베이스에서 레거시 패턴을 스캔하는 기능도 제공합니다.
코딩 에이전트가 레거시 패턴에서 벗어나 현대 웹 플랫폼의 강력한 기능을 활용하는 솔루션으로 이끌어 줍니다.
HN 토론
103- surround
다음은 이 스킬이 에이전트에게 사용하라고 알려줄 브라우저 기능 목록인데, Chrome에서는 안정적이지만 Firefox와 Safari에서는 지원되지 않습니다:
CSS @function
CSS calc-size()
CSS interpolate-size
CSS corner-shape
CSS border-shape
CSS flex-wrap: balance
CSS text-fit
CSS text-decoration-skip-spaces
CSS scroll-axis-lock
CSS scroll-target-group
CSS :target-current
CSS scroll-initial-target
CSS container scroll-state queries
scrollsnapchange 이벤트
scrollsnapchanging 이벤트
HTML focusgroup
Element.startViewTransition()
CSS view-transition-scope
Interest Invokers (interestfor)
LanguageModel (Prompt API)
LanguageDetector
Translator
Summarizer API
Window.fetchLater()
Speculation Rules API
Long Animation Frames API
VisibilityStateEntry
PerformanceSoftNavigation
InteractionContentfulPaint
Connection-Allowlist
CSS url() integrity() 수정자
HTML meta name="text-scale"
HTML template for
HTML 처리 명령
PasswordCredential
Promise를 반환하는 스크롤 메서드
Web App Origin Migration
Local Network Access 권한
Request.targetAddressSpace
beforeinstallprompt 이벤트
공정하게 말하자면, 이 스킬은 Chrome 자체에서 지원하지 않는 약 11개의 기능도 권장합니다. 그리고 이 프로젝트는 호환성에 신경 쓰는 것처럼 보입니다: "모델이 합리적이고 가벼운 폴백을 사용하도록 안내합니다."
- simonw
배포 제안: 지금 있는 npm 패키지 외에도 GitHub Pages를 설정해서 https://googlechrome.github.io/modern-web-guidance-src/skill... 에 스킬의 마크다운 인덱스 문서를 게시하세요 (현재는 404입니다).
그 인덱스 페이지는 모든 문서의 일반 마크다운 버전으로 링크되어야 하고, grep으로 검색해서 올바른 답을 찾을 수 있도록 설계되어야 합니다.
그렇게 하면 아무것도 설치할 필요가 없습니다 — 내 에이전트가 HTTP 요청을 할 수 있다면 "https://googlechrome.github.io/modern-web-guidance-src/skill... 에서 팁을 찾아봐"라고 말할 수 있고, 그러면 인덱스를 가져온 다음 가장 관련 있는 문서로 이동할 겁니다 — MCP나 npm, 설치가 전혀 필요 없습니다.
- advisedwang
Chrome은 이미 브라우저 표준 세계에서 너무 많은 권력을 가지고 있습니다. 우리에게 필요한 마지막 것은 모든 사람의 LLM이 웹 개발 방법에 대해 Chrome 팀의 지침을 따르는 것입니다. 이 길은 "이 사이트를 보려면 [지배적인 브라우저]에서 보세요"로 되돌아갑니다.
- chalmovsky
놀랍네요! 저는 방금 Alex Russell의 'React는 레거시 기술이다'라는 발언이 안타깝게도 완전히 무시된 이유에 대한 글을 쓰고 있었습니다.
그런데 이게 바로 제 손에 떨어졌네요! 제가 하고 싶었던 주장 중 일부가 여기에 제시된 것 같습니다. 제대로 살펴볼 기회는 없었지만, 매우 유망하고 좋아 보입니다!
감사합니다!
- flossly
저는 템플릿을 컴파일된 언어로 두는 것을 선호합니다: 문자열 맵을 보간 지점이 있는 문자열에 전달하는 것이 아니라, 실제로 "그냥 코드"로 템플릿/레이아웃/컴포넌트를 같은 "그냥 코드" 안에서 결합하여 HTML 빌더를 정의하는 것입니다.
HtmlFlow(Java/Kotlin)나 kotlinx.html처럼요.
저는 이 접근 방식과 함께 Tailwind와 Alpine.js를 선택합니다. 왜냐하면 SSR 우선(가장 중요한 곳에서 작은 JS 기반 개선을 곁들인)을 원하기 때문입니다. 그래서 SPA가 아니고, 스타일링은 스타일이 적용되는 HTML 코드에 가깝게 유지하고 싶습니다(CSS 정의와 사용 간의 매칭이 필요 없음). 또한 HTML과 관련된 작은 JS 조각들을 HTML 가까이에 두는 것을 선호합니다(Alpine이 이를 쉽게 하고 제 JS 요구 사항의 99%를 구현할 명확한 경로를 제공합니다).
모두처럼 LLM이 저를 위해 코딩합니다 :) 하지만 결과는 저와 제 LLM 모두가 추론하기 쉽습니다. 바닐라 JS는 거의 없습니다. jQuery도 없습니다. 대부분 HTML에 바인딩된 Alpine 지시문입니다. 그리고 어디에나 Tailwind입니다. 이렇게 하면 작동 방식을 한 곳에서 볼 수 있습니다: 아니면 CTRL-클릭으로 찾아갈 수 있습니다.
- phyzix5761
"모범 사례"는 AI 시대에 사실상 죽었습니다. 곧 아무도 AI가 생성한 코드를 읽지 않을 것이고, 그것은 무서운 생각입니다.
- bakkoting
> 뭔가 잘못되었거나 이상한 점을 발견하면 저희에게 알려주세요!
하지만 어떻게요? modern-web-guidance-src 저장소에 이슈를 제출하는 것이 올바른 장소이길 바랍니다? 어쨌든 atob와 btoa 대신 fromBase64와 toBase64를 사용하는 것에 대해 하나 제출했습니다.
하지만 어차피 에이전트에 전부 올인하고 있으니, 적어도 지난 3-5년간의 모든 JS, DOM, HTML 스펙 커밋을 살펴보고 명백한 개선이며 에이전트가 사용하지 않는 것들을 자동으로 분류하는 것을 고려해야 합니다. 꽤 간단할 겁니다.
---
참고로, 대상 브라우저에 따라 이 버전을 자동으로 제공하는 것이 매우 도움이 될 것 같습니다. 예를 들어, 저는 모든 에버그린 브라우저에서 적어도 1년 동안 사용 가능하지 않은 것은 사용하고 싶지 않습니다. 대부분의 개발자가 비슷한 기준을 가지고 있거나, 적어도 최첨단을 사용하고 싶어하지 않는다고 생각합니다. 그리고 저장소에서 그것을 얻는 것이 _가능_하지만, 스크립트를 작성하거나 에이전트가 모든 기능에 대해 자체 판단을 사용하게 하는 등 약간의 노력이 듭니다. 그것은 당신 쪽에서 할 수 있는 작업이며 나머지 우리가 할 필요 없도록 해줄 수 있습니다.
- internet2000
아니요, 사양합니다. 제 에이전트가 Chrome 단일 문화에 기여하는 것을 원하지 않습니다. Chrome은 새로운 IE6입니다.