mcpField
F
front-review

front-review

github.com/effeiloTesting & quality339 installsUpdated 26w ago
Repository

About front-review

front-review is a code review skill for frontend files, aimed at developers reviewing an open or specified file. It selects rules by file extension and supports standard and strict review modes.

Key features

  1. 01Selects language rules by extension
  2. 02Standard and strict review modes
  3. 03Applies shared and language-specific rules
  4. 04Produces severity-grouped review reports

Use cases

  1. 01Reviewing the currently open frontend file
  2. 02Checking complexity and performance more strictly
  3. 03Reviewing a file specified by the user

Install

Copy the command and run it in a terminal.

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

After installing, type/front-reviewin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with 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

Details

From the project README

Review the file that is currently open or explicitly mentioned by the user.

  • Default (no arguments): Standard mode : balanced review flagging clear issues and actionable suggestions.
  • If $ARGUMENTS contains strict: Strict mode : tightened thresholds on quality, complexity, and performance rules.

Step 1 : Detect the file language

Look at the extension of the target file:

  • If .js, .ts, .mjs, .jsx, .tsx → the language file is front-review-js.md
  • If .css, .sass, .scss → the language file is front-review-css.md
  • If .html → the language file is front-review-html.md
  • If .vue → the language file is front-review-vue.md
  • If .svelte → the language file is front-review-svelte.md
  • If .astro → the language file is front-review-astro.md
  • Otherwise → inform the user that this file type is not supported. Supported types: .js, .ts, .mjs, .jsx, .tsx, .css, .sass, .scss, .html, .vue, .svelte, .astro.

The path of this skill file is always available from context. Resolve all sub-file paths relative to it.


Step 1.5 : Enrich with latest documentation (optional)

If the context7 MCP is available in this session, use it to fetch the latest official documentation for the detected language or framework (e.g., React, Vue, Svelte, Astro, Sass). Use this documentation to complement the rules loaded in Steps 2 and 3, particularly to flag patterns that are deprecated or have a better equivalent in the latest version. If context7 is not available, skip this step and continue with your training knowledge.


Step 2 : Load the shared rules

Read front-review-rules.md (located in the same directory as this skill file). It contains universal review rules, severity definitions, and strict mode threshold overrides.


Step 3 : Load the language-specific rules

Read the language file identified in Step 1 (located in the same directory as this skill file). It contains language-specific rules, detection patterns, and code examples.


Step 4 : Review the file

Read the entire target file before reporting, collect all issues first. Apply all rules from front-review-rules.md and the language file. In strict mode, apply the tightened thresholds defined at the end of front-review-rules.md.


Output format

Do not modify the file. Output a structured review report:

## 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** |
  • Group issues by severity: Critical → Important → Minor → Suggestion.
  • Omit severity sections that have no issues.
  • Focus on impactful issues, do not flag every minor stylistic preference.
  • Each issue must include a line reference, a code snippet, a clear problem statement, and a concrete fix.

Comments

Markdown supported