フロントエンドレビュー

SkillDev tools

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

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the フロントエンドレビュー skill

What this skill tells your AI

The instructions your AI receives, as published by d-zero-dev/frontend-guidelines in skills/dzero-review/SKILL.md and read by ahel’s review.

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)だけを確認する

報告形式

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

Signals

GitHub stars
20
Forks
6
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
dzero-review
Source
github.com/d-zero-dev/frontend-guidelines