# Front Review

> Review a JS, TS, React (JSX/TSX), CSS, Sass, HTML, Vue, Svelte, or Astro file for code quality, potential bugs, performance, and maintainability. Usage: /front-review [strict]

- Skill: `effeilo/front-review` (Agent Skill, multi-file: 13 files)
- Install (CLI): `npx skillmds@latest add effeilo/front-review`
- Raw SKILL.md: https://api.skillmd.com/api/skills/effeilo/front-review/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: effeilo (https://skillmd.com/u/effeilo)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/effeilo/front-review

---


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.