본문으로 건너뛰기
cccskills
무료GitHub에 공개

run-react-doctor

Use when asked to run, read, or interpret react-doctor output on the Namias portfolio. Covers the npm scripts, the doctor.config.json schema, the score model, the 12-rule catalog, and which findings are real vs false-positive by design.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md5.1 KB

SKILL.md(원문)

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

run-react-doctor

react-doctor (https://react.doctor) is pinned to 0.2.16 in package.json and configured via doctor.config.json at the repo root. It runs against src/** only — studio code, scripts, and test files are excluded by config (see ignore.files).

Scripts (use these, not the raw CLI)

ScriptWhat it writesWhen to use
npm run doctorTTY report to stdoutLocal check while iterating
npm run doctor:verboseTTY + extra contextWhen a finding is unclear
npm run doctor:json.react-doctor/report.jsonWhen you need to parse or diff
npm run doctor:baseline.react-doctor/baseline.json + docs/react-doctor/baseline.{json,txt}Recapture the baseline (only at release branches)
npm run doctor:checkSame as npm run doctor but set -eUsed by CI
npm run doctor:diffdiff against HEADComparing branches

The CI gate is .github/workflows/react-doctor.yml (threshold = 0 findings = 100/100).

The 12-rule catalog (and what to fix vs ignore)

doctor.config.json declares the per-rule severity. The rules, in score order:

Security (errors)

  • no-danger — dangerouslySetInnerHTML without a sandbox. Fix: route through the <JsonLd> component at src/components/seo/JsonLd.tsx (the single audited entry point).
  • iframe-missing-sandbox — every <iframe> must set sandbox. Fix: add the attribute with the minimum capability set. Cal.com is the only one that needs allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox; the PDF viewer gets empty sandbox.

Bugs (errors)

  • no-array-index-as-key — re-orderable list using the index as the React key. Fix: use a stable id from the data (slug, _key, name, id).
  • no-fetch-in-effect — useEffect + fetch is a footgun (no abort, no dedupe, no retry). Fix: use SWR (swr@^2.4.1) with a null key to skip; in tests, wrap the tree in <SWRConfig value={{ provider: () => new Map() }}> to isolate the cache.

Performance (warnings)

  • rendering-hydration-mismatch-time — calling new Date() or similar in render. Fix: hoist to a module-level constant; only re-derive in a useEffect if the value can change during the lifetime of the tab.

Accessibility (warnings)

  • button-has-type — <button> without an explicit type. Fix: add type="button" (or submit/reset for forms). For icon-only buttons, add an aria-label too.
  • control-has-associated-label — input without a label. Fix: add aria-label or a <label htmlFor>.
  • prefer-tag-over-role — role="..." on a div when a native element would do. Fix: use the native element. Exception: ARIA patterns without a native equivalent (role="listbox", role="dialog" inside a useDialog hook) need a documented disable — // eslint-disable-next-line react-doctor/prefer-tag-over-role on the same line as the role attribute.

Maintainability (warnings)

  • only-export-components — file exports a component plus utilities/types. Fix: move non-component exports to *.lib.ts and *.types.ts siblings; keep a barrel index.ts.
  • no-multi-comp — multiple components in one file. Fix: extract to a sibling file.
  • jsx-no-constructed-context-values — <MyContext.Provider value={{...}}> allocates a new object on every render. Fix: wrap the value in useMemo and include the dependencies.
  • exhaustive-deps / react-hooks/exhaustive-deps — ESLint's hook-deps rule, surfaced through react-doctor. Fix: add the dep; if intentional, memoize the value with useMemo or useCallback.

What is intentionally NOT in the score

doctor.config.json excludes these by design:

  • 270× unused-file (deadCode: false) — react-doctor does not trace Next.js App Router conventions or Sanity Studio entry points. Per-file reachability is proven by next build + vitest run.
  • 322× design-* (ignore.tags: ["design"]) — design-debt findings, not correctness. They are tracked in the design backlog, not the score.
  • Studio / scripts / tests (ignore.files) — separate lint lanes.

If a finding appears in one of those buckets, do not fix it; it is a deslop false positive.

Reading the JSON report

const r = require('./.react-doctor/report.json');
console.log(r.summary.errorCount, 'err,', r.summary.warningCount, 'warn');
r.diagnostics.forEach(d => console.log(d.filePath + ':' + d.line + ':' + d.column + ' [' + d.severity + '] ' + d.rule + ' — ' + d.title));

Score model

  • 9 errors ≈ 9 points (each error ~1 point)
  • 34 warnings ≈ 1-2 points (warnings are non-linear; the score has a "no findings" bonus)
  • The threshold in CI is 0 findings = 100/100. The local npm run doctor shows the score from the share API; if it is unreachable, the local report still says "No issues found!" and the PR gate still passes.

리뷰

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

댓글

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

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

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Audit and fix accessibility issues across the portfolio to ensure WCAG 2.1 AA compliance.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

PP-Namias/Portfolio22026년 10월 16일 업데이트

Creates a new blog post document in the Sanity studio. Use when the user wants to write a blog post, publish an article, or schedule a future post.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

PP-Namias/Portfolio22026년 10월 16일 업데이트

Creates a new certification document in the Sanity studio. Use when the user wants to add a credential, certificate, or professional accreditation to the Certifications collection.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

PP-Namias/Portfolio22026년 10월 16일 업데이트

Adds a new skill MD file to the studio's skills collection. Use when the user wants to author a new step-by-step recipe for the studio's in-app Skills tool or the .agents mirror.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

PP-Namias/Portfolio22026년 10월 16일 업데이트

Creates a new project document in the Sanity studio. Use when the user wants to add a new portfolio project, a case study, or a work sample to the Projects collection.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

PP-Namias/Portfolio22026년 10월 16일 업데이트

Creates a new experience document in the Sanity studio. Use when the user wants to add a job, role, internship, or work history entry to the Experience collection.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

PP-Namias/Portfolio22026년 10월 16일 업데이트

PP-Namias의 스킬 모두 보기

이 스킬의 문제 신고