INP 디버깅, 스크롤 버벅거림 조사, 메인 스레드 차단을 위한 자동화된 워크플로를 통한 지능적인 상호 작용 성능 분석. 긴 프레임이 감지되면 자동으로 스크립트 특성을 실행하고, 입력 대기 시간 단계를 분석하고, 레이아웃 변경과 상호 작용의 상관 관계를 파악하는 의사 결정 트리가 포함되어 있습니다. 완전한 상호 작용 감사, 타사 스크립트 영향 분석 및 애니메이션 성능 디버깅을 위한 워크플로우를 제공합니다. 핵심 웹 바이탈(INP/CLS 상관 관계) 및 로딩(스크립트 실행 분석)과의 교차 기술 통합. 사용자가 느린 상호작용, 버벅거리는 스크롤, 응답하지 않는 페이지 또는 INP 최적화에 대해 문의할 때 사용합니다. Chrome DevTools MCP와 호환됩니다.
명령줄에서 webperf-interaction AI 스킬을 개발 환경에 빠르게 설치
출처: nucliweb/webperf-snippets.
JavaScript snippets for measuring web performance in Chrome DevTools. Execute with mcpchrome-devtoolsevaluatescript, capture output with mcpchrome-devtoolsgetconsolemessage.
When the user asks for interaction analysis or "audit responsiveness":
When INP is slow (>200ms) or the user asks "debug INP" or "slow interactions":
INP 디버깅, 스크롤 버벅거림 조사, 메인 스레드 차단을 위한 자동화된 워크플로를 통한 지능적인 상호 작용 성능 분석. 긴 프레임이 감지되면 자동으로 스크립트 특성을 실행하고, 입력 대기 시간 단계를 분석하고, 레이아웃 변경과 상호 작용의 상관 관계를 파악하는 의사 결정 트리가 포함되어 있습니다. 완전한 상호 작용 감사, 타사 스크립트 영향 분석 및 애니메이션 성능 디버깅을 위한 워크플로우를 제공합니다. 핵심 웹 바이탈(INP/CLS 상관 관계) 및 로딩(스크립트 실행 분석)과의 교차 기술 통합. 사용자가 느린 상호작용, 버벅거리는 스크롤, 응답하지 않는 페이지 또는 INP 최적화에 대해 문의할 때 사용합니다. Chrome DevTools MCP와 호환됩니다. 출처: nucliweb/webperf-snippets.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-interactionINP 디버깅, 스크롤 버벅거림 조사, 메인 스레드 차단을 위한 자동화된 워크플로를 통한 지능적인 상호 작용 성능 분석. 긴 프레임이 감지되면 자동으로 스크립트 특성을 실행하고, 입력 대기 시간 단계를 분석하고, 레이아웃 변경과 상호 작용의 상관 관계를 파악하는 의사 결정 트리가 포함되어 있습니다. 완전한 상호 작용 감사, 타사 스크립트 영향 분석 및 애니메이션 성능 디버깅을 위한 워크플로우를 제공합니다. 핵심 웹 바이탈(INP/CLS 상관 관계) 및 로딩(스크립트 실행 분석)과의 교차 기술 통합. 사용자가 느린 상호작용, 버벅거리는 스크롤, 응답하지 않는 페이지 또는 INP 최적화에 대해 문의할 때 사용합니다. Chrome DevTools MCP와 호환됩니다. 출처: nucliweb/webperf-snippets.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf-interaction 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/nucliweb/webperf-snippets