フロントエンドレビュー
SkillDev toolsフロントエンド実装のコードレビューを実施する。PR レビュー、コードレビュー、実装チェック、品質確認を依頼されたときに使う。実装レイヤー選定の妥当性から各技術軸の観点まで順に検査する。
Available today. Use it from your connected AI after setup.
No other account needed.
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 のフロントエンド実装をレビューするときの手順。以下の順に検査し、指摘には根拠(該当スキルまたは ガイドライン の該当箇所)を添える。
レビュー手順
- 実装レイヤー選定の妥当性(最初に必ず)
dzero-tech-selectionを読み、レビュー対象の実装が適切なレイヤーで行われているかを検査する- 例: JS で実装されているが HTML ネイティブ要素や CSS だけで実現できるものはないか
- デザインとの突き合わせ
- デザインデータ(Figma 等)を参照した実装の場合、
dzero-design-to-codeの原則に照らして違反を検査する
- デザインデータ(Figma 等)を参照した実装の場合、
- 各技術軸の検査
- 変更内容に該当する軸のスキルを読み、その実装規範に照らして違反を検査する
- HTML / Pug:
dzero-html - CSS:
dzero-css - JavaScript / TypeScript:
dzero-js - アクセシビリティ:
dzero-a11y(マークアップ・インタラクションの変更がある場合は必ず)
- HTML / Pug:
- 変更内容に該当する軸のスキルを読み、その実装規範に照らして違反を検査する
- ブラウザでの動作確認
- レビュー対象のページをブラウザで実際に表示し、表示崩れ・動作・インタラクションを確認する(コードリーディングだけで完了としない。確認手段はプロジェクトの環境の指示に従う)
- 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