웹 페이지와 이미지 등의 실제 파일 형식이 HTTP 헤더와 일치하는지 점검하고, CSS와 JavaScript 로딩 실패 원인 및 서버 설정의 수정 위치를 정리합니다.
Use when auditing server configuration or diagnosing broken resources. Applies to any web server serving HTML, CSS, JS, images, fonts, or other static assets.
웹 페이지와 관련 파일의 제공 설정을 점검하여 CSS나 JavaScript가 제대로 로드되지 않는 원인을 조사합니다. 파일 종류를 알려 주는 HTTP Content-Type 헤더를 확인합니다. HTML, CSS, JavaScript, 이미지의 실제 형식과 비교하여 일치하지 않는 부분이나 문자 인코딩 지정이 빠진 곳을 짚습니다.
페이지 레이아웃이 깨지거나 스크립트가 실행되지 않는 문제를 조사할 때 유용합니다. 정적 파일을 제공하는 서버의 설정을 검토할 때도 사용할 수 있습니다. HTML 페이지가 아닌 파일이 text/html로 반환되는 문제도 확인합니다.
Content-Type을 확인해 주세요.”charset=utf-8과 X-Content-Type-Options: nosniff 설정을 점검해 주세요.”실제 HTTP 응답 헤더를 확인하는 작업입니다. 수정은 사용 중인 서버나 프레임워크 설정에서 수행합니다. 원문에서는 Next.js 등의 설정 위치로 next.config.js를 제시합니다.
이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.
AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.
총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 23일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Incorrect MIME types cause browsers to block stylesheets and scripts (MIME sniffing is disabled by X-Content-Type-Options: nosniff), breaking page rendering and signalling poor site quality to crawlers.
For key pages and their linked resources, inspect the HTTP Content-Type response header. Verify HTML responses use text/html; charset=utf-8, CSS uses text/css, JS uses text/javascript, and images use image/jpeg, image/png, etc.
Update your server configuration to serve each file type with its correct MIME type. Set X-Content-Type-Options: nosniff to prevent browsers from guessing content types. In Next.js and similar frameworks, configure headers in next.config.js.
The Content-Type header tells browsers and crawlers what kind of content is being sent. When it mismatches the actual file type, browsers either block the resource or render it incorrectly—CSS served as text/plain won't be applied, and JavaScript served as text/html may be blocked by strict MIME checking.
For HTML, CSS, and JS assets, check the Content-Type response header. Verify HTML responses include 'charset=utf-8'. Check that X-Content-Type-Options: nosniff is set. Flag any resource returning Content-Type: text/html that is not an HTML page. Check for missing charset declarations on text responses.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Create and review custom 404 pages that help visitors recover from broken or moved links through search and navigation. Check the rendered page and HTTP response so missing content returns a proper 404 status.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Audit or create a dedicated About page that explains a website’s purpose and identifies its people or organization. Review the rendered output and supporting information, including expertise and contact details, to find gaps.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
페이지와 공통 컴포넌트에 자동 접근성 테스트를 추가하고 검사 누락을 찾습니다. 지속적 통합에 검사를 연결해 구조·속성 문제와 변경으로 생긴 오류를 확인합니다.
로그인부터 다단계 인증과 계정 복구까지 점검하고, 붙여넣기 차단이나 인증 코드 수동 입력처럼 이용을 방해하는 인증 절차의 개선을 돕습니다.
Review form errors, success messages, and live updates so screen reader users receive important notifications. Check the HTML delivered to the browser, announcement settings, display duration, and dismissal controls, then identify specific elements that need changes.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Review HTML tables so screen reader users can understand how headers and data relate. Check header markup, table descriptions, and merged cells, then identify specific fixes and ways to verify them.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.