フロントエンドレビュー

SkillDev tools

Performs code reviews of frontend implementations. Use when asked for PR reviews, code reviews, implementation checks, or quality verification. Inspects items in order, from the validity of implementation layer choices through each technical dimension.

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