존재하지 않는 페이지를 방문한 사람에게 검색과 주요 페이지 링크를 제공하는 맞춤형 404 페이지를 만들고 점검합니다. 화면 내용과 HTTP 상태 코드도 확인합니다.
- 맞춤형 404 페이지를 제작합니다
- 끊어진 링크의 검색과 안내를 정비합니다
- 없는 페이지의 200 응답을 확인합니다
프런트엔드 점검 항목에 맞는 npm 패키지를 찾고 다운로드 수와 최근 배포 시점 등의 조건을 확인해, 적합한 패키지 이름을 규칙 파일의 메타데이터에 추가합니다.
Use when you need to find the 2-3 most popular and well-maintained npm packages relevant to a frontend checklist rule, validate they meet quality thresholds, and add them to the rule's frontmatter.
프런트엔드 점검 항목과 관련된 npm 패키지를 찾아 조건에 맞는 후보를 규칙 파일에 추가합니다. 규칙이 다루는 문제를 파악한 뒤 탐지, 수정, 테스트에 쓸 수 있는 패키지를 조사합니다. 주간 다운로드 수가 10,000회를 초과하고, 최근 배포가 18개월 이내이며, npm registry에 등록되어 있는지 확인합니다.
Front-End Checklist 규칙에 구현이나 검증에 쓸 도구 정보를 추가할 때 적합합니다. 관련성뿐 아니라 사용량과 배포 시점도 확인하려는 경우에 도움이 됩니다. 보통 두세 개를 고르지만, 조건에 맞는 후보가 적으면 하나만 추가하거나 항목을 비워 둡니다.
npmPackages에 추가해 주세요.”npm 검색과 등록 정보, 다운로드 수 조회가 가능한 환경이 필요합니다. 정해진 디렉터리 구조의 규칙 파일을 대상으로 하며, 추가 후에는 pnpm validate:packages로 검증합니다. 패키지 이름만 기록합니다.
이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.
AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.
총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 23일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Identify, validate, and add npm package references to a Front-End Checklist rule.
Given a rule file or rule slug, this skill will:
npmPackages frontmatter fieldBefore selecting any package, check it against these criteria using the npm registry:
| Criterion | Minimum |
|---|---|
| Weekly downloads | >10,000/week |
| Last publish | Within 18 months |
| npm registry | Must be listed (registry.npmjs.org/{name}) |
Packages that fail any threshold must be excluded, regardless of how relevant they are.
Read the rule file: packages/content/rules/en/{category}/{slug}.mdx
Focus on:
tools: field?Search for packages that:
Use https://www.npmjs.com/search?q={keywords} and knowledge of the ecosystem to find candidates.
Prefer packages that are:
eslint, stylelint, official plugins)For each candidate package, fetch and verify:
# Metadata
curl https://registry.npmjs.org/{package}/latest | jq '{name, version, description}'
# Weekly downloads
curl https://api.npmjs.org/downloads/point/last-week/{package} | jq '.downloads'
Record the weekly download count and last publish date. Reject any below threshold.
Add a npmPackages array to the frontmatter with the package names only (metadata is fetched at build time):
npmPackages:
- eslint
- eslint-plugin-jsx-a11y
- axe-core
Place it after tools: and before resources:.
Run the validation script to confirm all packages pass thresholds:
pnpm validate:packages packages/content/rules/en/{category}/{slug}.mdx
If any package fails, either remove it or replace it with a better alternative.
For the rule accessibility/form-labels:
npmPackages:
- eslint-plugin-jsx-a11y
- axe-core
- @testing-library/jest-dom
All three have >100k weekly downloads and were published within the last 6 months.
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
존재하지 않는 페이지를 방문한 사람에게 검색과 주요 페이지 링크를 제공하는 맞춤형 404 페이지를 만들고 점검합니다. 화면 내용과 HTTP 상태 코드도 확인합니다.
사이트의 목적과 운영자를 소개하는 페이지를 점검하거나 작성합니다. 조직의 역사, 사명, 전문성, 연락처를 확인하고 실제 페이지 출력에서 정보 누락을 찾습니다.
페이지와 공통 컴포넌트에 자동 접근성 테스트를 추가하고 검사 누락을 찾습니다. 지속적 통합에 검사를 연결해 구조·속성 문제와 변경으로 생긴 오류를 확인합니다.
로그인부터 다단계 인증과 계정 복구까지 점검하고, 붙여넣기 차단이나 인증 코드 수동 입력처럼 이용을 방해하는 인증 절차의 개선을 돕습니다.
폼 오류, 완료 알림, 실시간 업데이트가 스크린 리더로도 전달되도록 실제 표시되는 HTML 속성, 표시 시간, 알림을 닫는 조작을 점검합니다.
표 머리글과 셀의 대응 관계를 점검해 화면 낭독으로도 데이터의 의미가 전달되는 HTML로 정리합니다. 단순한 표부터 병합 셀이 있는 복잡한 표까지 확인합니다.