mcpField
F
front-review

front-review

github.com/effeiloテスト・品質339 回インストール26 週間前に更新
リポジトリ

front-review について

front-reviewは、開いているファイルや指定されたファイルを対象にする、フロントエンド向けコードレビューのスキルです。拡張子に応じてルールを選び、標準モードと厳格モードでレビューします。

主な機能

  1. 01拡張子に応じた言語ルールの選択
  2. 02標準・厳格レビューの切り替え
  3. 03共通ルールと言語別ルールの適用
  4. 04重要度別の構造化レポート

活用シーン

  1. 01開いているフロントエンドファイルのレビュー
  2. 02複雑さや性能面を厳格に確認
  3. 03指定されたファイルのコードレビュー

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/effeilo/claude-code-frontend-skills --skill front-review

インストール後、Claude Code で/front-reviewを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

front-review-astro.md
front-review-css.md
front-review-html.md
front-review-js.md
front-review-rules.md
front-review-svelte.md
front-review-vue.md
README.md
examples/css/
dashboard.css
dashboard.review.md
examples/js/
cart-service.js
cart-service.review.md

詳細

現在開いているファイル、またはユーザーが明示的に指定したファイルをレビューします。

  • デフォルト（引数なし）：標準モード：明確な問題を指摘し、実行可能な提案を行うバランスの取れたレビューです。
  • $ARGUMENTS に strict が含まれる場合：厳格モード：品質、複雑さ、パフォーマンスに関するルールの基準を引き上げます。

ステップ 1：ファイルの言語を判定する

対象ファイルの拡張子を確認します。

  • .js、.ts、.mjs、.jsx、.tsx の場合 → 言語ファイルは front-review-js.md です
  • .css、.sass、.scss の場合 → 言語ファイルは front-review-css.md です
  • .html の場合 → 言語ファイルは front-review-html.md です
  • .vue の場合 → 言語ファイルは front-review-vue.md です
  • .svelte の場合 → 言語ファイルは front-review-svelte.md です
  • .astro の場合 → 言語ファイルは front-review-astro.md です
  • それ以外の場合 → このファイル形式はサポートされていないことをユーザーに伝えます。サポート対象の形式：.js、.ts、.mjs、.jsx、.tsx、.css、.sass、.scss、.html、.vue、.svelte、.astro。

このスキルファイルのパスは、常にコンテキストから取得できます。サブファイルのパスはすべて、このファイルを基準に解決してください。

ステップ 1.5：最新のドキュメントで補足する（任意）

このセッションで context7 MCP が利用可能な場合は、判定した言語またはフレームワーク（例：React、Vue、Svelte、Astro、Sass）の最新の公式ドキュメントを取得してください。 そのドキュメントを使って、ステップ 2 と 3 で読み込んだルールを補足してください。特に、非推奨になったパターンや、最新バージョンでより適切な代替手段があるパターンを指摘します。 context7 が利用できない場合は、このステップを省略して、学習済みの知識に基づいて続行してください。

ステップ 2：共通ルールを読み込む

front-review-rules.md（このスキルファイルと同じディレクトリにあります）を読み込みます。 ここには、共通のレビュー規則、重大度の定義、厳格モードでの基準の上書き設定が記載されています。

ステップ 3：言語固有のルールを読み込む

ステップ 1 で特定した言語ファイル（このスキルファイルと同じディレクトリにあります）を読み込みます。 ここには、言語固有のルール、検出パターン、コード例が記載されています。

ステップ 4：ファイルをレビューする

報告する前に対象ファイル全体を読み、すべての問題を収集します。 front-review-rules.md と言語ファイルのルールをすべて適用します。 厳格モードでは、front-review-rules.md の末尾に定義された、引き上げ後の基準を適用します。

出力形式

ファイルは変更しないでください。構造化されたレビュー報告を出力します。

## Code Review : filename.ext
> **Strict mode** *(include this line only when strict is active)*

### 🔴 Critical
**[line N] Short issue title**
Code: `relevant snippet`
Problem: clear explanation of what is wrong and why it matters.
Fix: concrete suggestion to resolve it.

---

### 🟠 Important
...

### 🟡 Minor
...

### 💡 Suggestion
...

---

### Summary
| Severity | Count |
|---|---|
| 🔴 Critical | N |
| 🟠 Important | N |
| 🟡 Minor | N |
| 💡 Suggestion | N |
| **Total** | **N** |
  • 問題を重大度別に分類します：Critical → Important → Minor → Suggestion。
  • 問題のない重大度のセクションは省略します。
  • 影響の大きい問題に焦点を当て、些細なスタイル上の好みをすべて指摘しないでください。
  • 各問題には、行番号、コードスニペット、明確な問題の説明、具体的な修正方法を含めてください。

コメント

Markdown 対応