dzero-review

フロントエンド実装のコードレビューを実施する。PR レビュー、コードレビュー、実装チェック、品質確認を依頼されたときに使う。実装レイヤー選定の妥当性から各技術軸の観点まで順に検査する。

SKILL.md

GitHub

フロントエンドレビュー

D-ZERO のフロントエンド実装をレビューするときの手順。以下の順に検査し、指摘には根拠(該当スキルまたは ガイドライン の該当箇所)を添える。

レビュー手順

  1. 実装レイヤー選定の妥当性(最初に必ず)
    • dzero-tech-selection を読み、レビュー対象の実装が適切なレイヤーで行われているかを検査する
    • 例: JS で実装されているが HTML ネイティブ要素や CSS だけで実現できるものはないか
  2. デザインとの突き合わせ
    • デザインデータ(Figma 等)を参照した実装の場合、dzero-design-to-code の原則に照らして違反を検査する
  3. 各技術軸の検査
    • 変更内容に該当する軸のスキルを読み、その実装規範に照らして違反を検査する
      • HTML / Pug: dzero-html
      • CSS: dzero-css
      • JavaScript / TypeScript: dzero-js
      • アクセシビリティ: dzero-a11y(マークアップ・インタラクションの変更がある場合は必ず)
  4. ブラウザでの動作確認
    • レビュー対象のページをブラウザで実際に表示し、表示崩れ・動作・インタラクションを確認する(コードリーディングだけで完了としない。確認手段はプロジェクトの環境の指示に従う)
  5. lint の確認
    • lint で担保される事項はレビューで人力チェックせず、lint が実行されているか(CI・pre-commit)だけを確認する

報告形式

  • 指摘は「重要度(要修正 / 提案 / 質問)+ 該当箇所 + 根拠」の形式でまとめる
  • 根拠を示せない指摘はしない(好みの問題は「提案」として明示する)