Fix Frontend Review Comments
JetBrains/kotlin-web-site
Apply pull-request review comments to the frontend of kotlinlang.org (Next.js, React, TypeScript, CSS Modules under blocks/, components/, pages/, hooks/, utils/, test/).
Review frontend code, UI changes, generated implementations, and pull requests with severity-based findings and checklist-driven analysis.
Install Frontend Reviewer
$ npx skills add ceilf6/FrontAgent --skill frontend-reviewer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ceilf6/FrontAgent frontend-reviewer --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/ceilf6/FrontAgent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend-reviewer .claude/skills/frontend-reviewer && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "frontend-reviewer" agent skill from https://github.com/ceilf6/FrontAgent/tree/develop/skills/frontend-reviewer into .claude/skills/frontend-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-reviewer", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/ceilf6/FrontAgent/tree/develop/skills/frontend-reviewerType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add ceilf6/FrontAgent --skill frontend-reviewer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ceilf6/FrontAgent frontend-reviewer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ceilf6/FrontAgent.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/frontend-reviewer .agents/skills/frontend-reviewer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend-reviewer" agent skill from https://github.com/ceilf6/FrontAgent/tree/develop/skills/frontend-reviewer into .agents/skills/frontend-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-reviewer", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ceilf6/FrontAgent --skill frontend-reviewer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ceilf6/FrontAgent frontend-reviewer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ceilf6/FrontAgent.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/frontend-reviewer .cursor/skills/frontend-reviewer && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "frontend-reviewer" agent skill from https://github.com/ceilf6/FrontAgent/tree/develop/skills/frontend-reviewer into .cursor/skills/frontend-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-reviewer", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/ceilf6/FrontAgent.git --path skills/frontend-reviewer--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add ceilf6/FrontAgent --skill frontend-reviewer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ceilf6/FrontAgent frontend-reviewer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ceilf6/FrontAgent.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/frontend-reviewer .gemini/skills/frontend-reviewer && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "frontend-reviewer" agent skill from https://github.com/ceilf6/FrontAgent/tree/develop/skills/frontend-reviewer into .gemini/skills/frontend-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-reviewer", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install ceilf6/FrontAgent frontend-reviewerInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add ceilf6/FrontAgent --skill frontend-reviewer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ceilf6/FrontAgent.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/frontend-reviewer .github/skills/frontend-reviewer && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "frontend-reviewer" agent skill from https://github.com/ceilf6/FrontAgent/tree/develop/skills/frontend-reviewer into .github/skills/frontend-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-reviewer", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ceilf6/FrontAgent --skill frontend-reviewer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ceilf6/FrontAgent frontend-reviewer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ceilf6/FrontAgent.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/frontend-reviewer .opencode/skills/frontend-reviewer && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "frontend-reviewer" agent skill from https://github.com/ceilf6/FrontAgent/tree/develop/skills/frontend-reviewer into .opencode/skills/frontend-reviewer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-reviewer", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
frontend-reviewer- GitHub stars
- 120
- Token cost
- ~491 tokens
- SKILL.md length
- 179 words
- Files
- 5 (incl. references)
- Skills in repo
- 4
- Repo updated
- First seen
- Licence
- MIT
At a glance
Review frontend code, UI changes, generated implementations, and pull requests with severity-based findings and checklist-driven analysis.
- Works in 6 steps: Read references/severity-rubric.md. → Read references/review-checklist.md. → Read… → …
- Auditing React/TypeScript/CSS code
- SKILL.md covers Workflow, Output Contract and Guardrails
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Frontend Reviewer is an agent skill from ceilf6/FrontAgent. Review frontend code, UI changes, generated implementations, and pull requests with severity-based findings and checklist-driven analysis. Use when auditing React/TypeScript/CSS code, validating AI-generated frontend output, performing acceptance review before merge, or checking whether a frontend change is safe to ship.
Its SKILL.md is about 490 tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `agents/openai.yaml`, `references/frontend-quality-rules.md` and `references/review-checklist.md`).
It sits in Frontend & Design, covering Pull requests. It works with React and TypeScript. The repository describes itself as: Frontend AI coding agent platform with CLI, VS Code extension, desktop app, MCP server, RAG planning, Skills, SDD guardrails, browser automation, and LoRA planner models |…. The licence is MIT.
When your agent uses it
- Auditing React/TypeScript/CSS code
- Validating AI-generated frontend output
- Performing acceptance review before merge
- Checking whether a frontend change is safe to ship
Example prompts
- “/frontend-reviewer”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Read references/severity-rubric.md.
- Read references/review-checklist.md.
- Read references/frontend-quality-rules.md when architecture, layering, or maintainability questions matter.
- Inspect only the files relevant to the request, the diff, or the changed surfaces implied by the task.
- Report findings grouped by severity, highest risk first.
- If no findings exist, state that explicitly and mention residual risks or testing gaps.
What it can do on your machine
Read from SKILL.md and the folder at commit e78cbed. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Frontend Reviewer loads about 491 tokens when it runs, and up to ~1.4k if it reads all its reference files. Until then it costs about 85 tokens; SKILL.md has 179 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from ceilf6/FrontAgent at commit e78cbed, republished under its MIT licence (© ceilf6). 179 words, ~491 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-reviewer/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- frontend-reviewer
- description
- Review frontend code, UI changes, generated implementations, and pull requests with severity-based findings and checklist-driven analysis. Use when auditing React/TypeScript/CSS code, validating AI-generated frontend output, performing acceptance review before merge, or checking whether a frontend change is safe to ship.
- triggers.keywords
- code review, acceptance review, quality audit, review frontend, frontend review, 审查, 审计, 代码评审, 验收评审
- triggers.negative
- landing page, restyle, dashboard redesign
Frontend Reviewer
Review relevant frontend files and produce concrete findings ordered by severity. Keep the review evidence-based, concise, and actionable.
Workflow
- Read
references/severity-rubric.md. - Read
references/review-checklist.md. - Read
references/frontend-quality-rules.mdwhen architecture, layering, or maintainability questions matter. - Inspect only the files relevant to the request, the diff, or the changed surfaces implied by the task.
- Report findings grouped by severity, highest risk first.
- If no findings exist, state that explicitly and mention residual risks or testing gaps.
Output Contract
- Start with findings. Do not lead with a summary.
- For each finding include:
- affected file path
- optional line number when known
- severity
- why it matters
- shortest viable fix direction
- Prefer one issue per finding. Split unrelated problems.
- Use exact evidence. Avoid generic advice.
Guardrails
- Do not invent files, line numbers, or user intent.
- Do not upgrade style nits into blocking issues.
- Do not hide uncertainty. Mark assumptions when evidence is incomplete.
- Do not spend space on praise unless the user explicitly asks for it.
- Prefer behavioral regressions, data-flow bugs, accessibility issues, and missing tests over cosmetic commentary.
© ceilf6, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 4 other files (references) in skills/frontend-reviewer of ceilf6/FrontAgent.
- SKILL.md
- agents/openai.yaml
- references/frontend-quality-rules.md
- references/review-checklist.md
- references/severity-rubric.md
Open the folder on GitHubat commit e78cbed
Compare with similar skills
Frontend Reviewer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Frontend Reviewer this skillceilf6/FrontAgent | 120 | — | ~491 | Automated safety check: Pass | MIT | |
| Fix Frontend Review CommentsJetBrains/kotlin-web-site | 1.6k | — | ~444 | Automated safety check: Pass | Apache-2.0 | |
| React Code Reviewgiuseppe-trisciuoglio/developer-kit | 357 | — | ~2.6k | Automated safety check: Notes | MIT | |
| Admin Template Project Initializersouthliu/south-admin-react | 580 | — | ~519 | Automated safety check: Pass | MIT | |
| Code Reviewnteract/semiotic | 2.7k | — | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| Using Docs Kitlobehub/lobe-ui | 2.2k | — | ~2.8k | Automated safety check: Pass | MIT |
Similar skills
- Official
React Code Review
giuseppe-trisciuoglio/developer-kit
Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility…
Admin Template Project Initializer
southliu/south-admin-react
Removes the south-admin-react template's demo pages, components and menu entries, after a dry-run preview and your confirmation, and cleans up the matching imports.
Code Review
nteract/semiotic
Review Semiotic pull requests for behavioral bugs, regressions, contract drift, and missing evidence.
Using Docs Kit
lobehub/lobe-ui
Set up and author a documentation site with @lobehub/docs-kit (the lobedocs CLI, React Router + Vite static docs used by ui.lobehub.com).
Typescript React Reviewer
SuFxGIT/scoutarr
Expert code reviewer for TypeScript + React 19 applications.
More from ceilf6/FrontAgent
Frontend Design
ceilf6/FrontAgent
Create distinctive, production-grade frontend interfaces with a clear visual direction while respecting project design specification constraints, existing design systems, and minimal-diff…
Skill Lifecycle
ceilf6/FrontAgent
Create, evaluate, improve, and benchmark content skills using the local Skill Lab workflow.
Requirement Interviewer
ceilf6/FrontAgent
Gather missing product, UX, technical, and delivery constraints before planning or coding.
Related
Works with
Categories
Questions about Frontend Reviewer
What does Frontend Reviewer do?
Review frontend code, UI changes, generated implementations, and pull requests with severity-based findings and checklist-driven analysis. Frontend Reviewer is an agent skill from ceilf6/FrontAgent. Review frontend code, UI changes, generated implementations, and pull requests with severity-based findings and checklist-driven analysis.
When should I use Frontend Reviewer?
Frontend Reviewer fits situations like: auditing React/TypeScript/CSS code; validating AI-generated frontend output; performing acceptance review before merge; checking whether a frontend change is safe to ship.
How do I install Frontend Reviewer in Claude Code?
Run `npx skills add ceilf6/FrontAgent --skill frontend-reviewer -a claude-code`. Or copy the skill folder (skills/frontend-reviewer in ceilf6/FrontAgent) into .claude/skills/frontend-reviewer in your project. Claude Code loads it when a task matches its description.
How do I install Frontend Reviewer in Codex?
Run `npx skills add ceilf6/FrontAgent --skill frontend-reviewer -a codex`. Or copy the skill folder (skills/frontend-reviewer in ceilf6/FrontAgent) into .agents/skills/frontend-reviewer in your project. Codex loads it when a task matches its description.
Can I use Frontend Reviewer in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ceilf6/FrontAgent --skill frontend-reviewer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-reviewer, .gemini/skills/frontend-reviewer, .github/skills/frontend-reviewer and .opencode/skills/frontend-reviewer in your project.
What does Frontend Reviewer need to run?
SKILL.md names no scripts, command-line tools or credentials: Frontend Reviewer is instructions for the agent only.
Does Frontend Reviewer access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Frontend Reviewer safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Frontend Reviewer use?
Frontend Reviewer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frontend Reviewer use?
About 491 tokens (SKILL.md is roughly 2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 890 tokens, read only when the agent opens those files.
What are the alternatives to Frontend Reviewer?
Skills that share tags, products or a category with Frontend Reviewer: Fix Frontend Review Comments (JetBrains/kotlin-web-site, 1.6k stars), React Code Review (giuseppe-trisciuoglio/developer-kit, 357 stars), Admin Template Project Initializer (southliu/south-admin-react, 580 stars) and Code Review (nteract/semiotic, 2.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend Reviewer?
ceilf6 (a GitHub user) maintains it in ceilf6/FrontAgent, which has 120 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on September 30, 2026.
Source: ceilf6/FrontAgent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.