무료GitHub에 공개한국어 소개

interaction-to-next-paint

클릭 등의 조작부터 화면 갱신까지 걸리는 시간을 INP로 측정합니다. 결과를 바탕으로 느린 이벤트 처리와 긴 작업을 찾아 개선하고 무거운 계산의 web workers 이전을 돕습니다.

원문원문 설명 보기

Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize interaction to next paint. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

thedaviddias/Front-End-Checklist

AI 평가90점/ 100 설치 방법 보기

이럴 때 유용합니다

클릭 등 조작 후 응답 지연을 조사할 때
측정에 근거해 이벤트 처리와 긴 작업을 검토할 때
무거운 계산의 web workers 이전을 검토할 때

한국어 소개

할 수 있는 일

클릭 등의 조작부터 화면 갱신까지 걸리는 시간을 응답성 지표인 INP로 조사합니다. Chrome DevTools나 PageSpeed Insights로 측정하며, 200ms 이내를 목표로 확인합니다. 응답을 늦추는 이벤트 처리와 긴 작업을 찾아 작업을 나누거나, web workers로 무거운 계산을 별도의 실행 환경으로 옮기는 일을 돕습니다.

이럴 때 유용합니다

페이지는 표시되었지만 조작한 뒤 반응이 느린 상황에 적합합니다. 주요 화면 처리를 맡는 메인 스레드가 오랫동안 점유되는지 조사할 때 도움이 됩니다. 수정할 파일, 네트워크 요청, 렌더링 단계를 측정 결과와 연결해 정리할 때도 활용합니다.

사용 예시

“조작에 대한 반응이 느린 페이지의 INP를 측정하고, 지연 원인과 측정 방법을 알려 주세요.”
“이벤트 처리를 조사하고, 긴 작업을 나누거나 web workers로 옮겨야 할 부분을 제안해 주세요.”

주의 사항

개선안을 제시하기 전에 DevTools, Lighthouse, 실제 사용 데이터 등으로 원인을 확인합니다. 체감만으로 판단하지 않으며, 어떤 측정 방법으로 문제를 확인했는지도 기록합니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호INP로 조작 응답성을 측정하고 이벤트 처리와 긴 작업을 검토하는 용도가 명시되어 있습니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: B일부 부족측정 도구와 200ms 목표는 있지만 작업 분할이나 계산 이전의 구체적인 절차는 없습니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호개선 전에 측정으로 원인을 확인하도록 하며 파일 삭제나 인증 정보 읽기 지시는 없습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호측정 도구로 Chrome DevTools나 PageSpeed Insights를 지정하며 API 키 등 추가 전제는 없습니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 23일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(2)

SKILL.md1.7 KB
references/rule.md5.7 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Optimize interaction to next paint

INP replaced FID as a Core Web Vital in 2024—it measures how quickly your page responds to user interactions throughout the session, not just the first interaction.

Quick Reference

INP measures responsiveness to ALL interactions—target under 200ms
Break up long tasks into smaller chunks
Use web workers for heavy computation
Optimize event handlers and avoid blocking the main thread

Check

Measure INP using Chrome DevTools or PageSpeed Insights. Verify interaction responses occur within 200ms.

Fix

Optimize event handlers, break up long tasks, use web workers for heavy computation, and reduce main thread blocking.

Explain

Explain how INP measures overall page responsiveness by tracking the latency of all user interactions during a page visit.

Code Review

Review the routes, assets, and loading behavior that affect Optimize interaction to next paint. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/performance/interaction-to-next-paint

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬