Frontend Code Review
langgenius/dify
Reviews frontend changes under `web/` or `packages/dify-ui/` for concrete defects and broken project contracts, using routed rule packs and a severity scale for findings.
Code review criteria — the five review axes, core principles, severity format, and verdict for reviewing code changes.
$ npx skills add penpot/penpot --skill code-review-criteria -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install penpot/penpot code-review-criteria --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/penpot/penpot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/code-review-criteria .claude/skills/code-review-criteria && 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 "code-review-criteria" agent skill from https://github.com/penpot/penpot/tree/develop/.agents/skills/code-review-criteria into .claude/skills/code-review-criteria/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-review-criteria", 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/penpot/penpot/tree/develop/.agents/skills/code-review-criteriaType 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 penpot/penpot --skill code-review-criteria -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install penpot/penpot code-review-criteria --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/penpot/penpot.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/code-review-criteria .agents/skills/code-review-criteria && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "code-review-criteria" agent skill from https://github.com/penpot/penpot/tree/develop/.agents/skills/code-review-criteria into .agents/skills/code-review-criteria/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-review-criteria", 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 penpot/penpot --skill code-review-criteria -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install penpot/penpot code-review-criteria --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/penpot/penpot.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/code-review-criteria .cursor/skills/code-review-criteria && 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 "code-review-criteria" agent skill from https://github.com/penpot/penpot/tree/develop/.agents/skills/code-review-criteria into .cursor/skills/code-review-criteria/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-review-criteria", 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/penpot/penpot.git --path .agents/skills/code-review-criteria--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 penpot/penpot --skill code-review-criteria -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install penpot/penpot code-review-criteria --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/penpot/penpot.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/code-review-criteria .gemini/skills/code-review-criteria && 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 "code-review-criteria" agent skill from https://github.com/penpot/penpot/tree/develop/.agents/skills/code-review-criteria into .gemini/skills/code-review-criteria/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-review-criteria", 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 penpot/penpot code-review-criteriaInstalls 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 penpot/penpot --skill code-review-criteria -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/penpot/penpot.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/code-review-criteria .github/skills/code-review-criteria && 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 "code-review-criteria" agent skill from https://github.com/penpot/penpot/tree/develop/.agents/skills/code-review-criteria into .github/skills/code-review-criteria/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-review-criteria", 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 penpot/penpot --skill code-review-criteria -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install penpot/penpot code-review-criteria --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/penpot/penpot.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/code-review-criteria .opencode/skills/code-review-criteria && 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 "code-review-criteria" agent skill from https://github.com/penpot/penpot/tree/develop/.agents/skills/code-review-criteria into .opencode/skills/code-review-criteria/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-review-criteria", 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.
code-review-criteriaCode review criteria — the five review axes, core principles, severity format, and verdict for reviewing code changes.
Code Review Criteria is an agent skill from penpot/penpot. Code review criteria — the five review axes, core principles, severity format, and verdict for reviewing code changes. Loaded by the reviewer subagent of the review-code flow. Not a user-facing flow — to review code, use the review-code flow.
Its SKILL.md is about 3.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development, covering Code review and Accessibility. The repository describes itself as: Penpot: The open-source design platform for Product teams that need scalable collaboration. The licence is MPL-2.0.
5 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit bcb7a83. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
npmFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Code Review Criteria loads about 3.6k tokens when it runs. Until then it costs about 66 tokens; SKILL.md has 1,959 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.
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.
The full file from penpot/penpot at commit bcb7a83, republished under its MPL-2.0 licence (© penpot). 1,959 words, ~3,567 tokens.
.claude/skills/code-review-criteria/SKILL.md (or your agent's skills folder).Multi-dimensional code review with quality gates. Every change gets reviewed before merge — no exceptions. Review covers five axes: correctness, readability, architecture, security, and performance.
The approval standard: Approve a change when it definitely improves overall code health, even if it isn't perfect. Perfect code doesn't exist — the goal is continuous improvement. Don't block a change because it isn't exactly how you would have written it. If it improves the codebase and follows the project's conventions, approve it.
review-code flow loads this skill to perform
the review of a code change.review-code flow — never load this
skill directly for that. This is the criteria reference, not the flow.These principles underpin every axis. When in doubt, default to them.
Every review evaluates code across these dimensions.
Does the code do what it claims to do?
Can another engineer (or agent) understand this code without the author explaining it?
temp, data, result without context)// removed comments?Does the change fit the system's design?
any/unknown/optional/casts and silent fallbacks.For detailed security guidance, see security-and-hardening.
| Prefix | Meaning | Author Action |
|---|---|---|
| Critical: | Blocks merge | Security vulnerability, data loss, broken functionality |
| High: | Required change | Must address before merge |
| Medium: | Should fix | Strongly recommended, not a blocker |
| Low: | Minor, optional | Author may ignore — formatting, style preferences |
| Suggestion: | Worth considering | Not required, but improves the code |
Unique finding IDs. Assign every finding a stable identifier: F1, F2, F3, … numbered in order of severity (Critical first, then High, Medium, Low, Suggestion). Use the ID everywhere the finding is mentioned — in section headers, in the verdict, in follow-up discussion. Never renumber within a review. Example: **F3 (High)** — app/validate.cljs:42 — duplicate branch logic….
For each finding, describe the circumstances under which it could fail: specific inputs, load conditions, timing, or user actions that trigger the problem. "This crashes when input is null" is actionable; "this might crash" is not.
Lead with what matters: correctness and security first, then structural issues, then everything else. A few high-conviction comments beat a long list.
Structure every review using this format:
Briefly explain what the code does and give an overall assessment.
List problems that could cause security incidents, data loss, crashes, incorrect behavior, or major performance degradation. Each finding gets its unique ID (F1, F2, …). For each: state the severity, identify the file/function/code section, explain why it's a problem, describe failure circumstances, and provide a concrete improvement with corrected code when useful.
List medium- and low-priority issues, including maintainability and design concerns. Continue the ID sequence started above (F3, F4, …).
Provide focused code changes or revised snippets. Preserve existing behavior unless a behavior change is explicitly justified.
Identify missing tests and describe specific test cases, including edge cases and failure scenarios.
Mention implementation choices that are clear, safe, efficient, or well designed. This is not fluff — it reinforces good patterns and tells the author what to keep doing.
Choose one:
List the finding IDs the verdict depends on (e.g. "Request changes: F1, F4").
Small, focused changes are easier to review, faster to merge, and safer to deploy.
~100 lines changed → Good. Reviewable in one sitting.
~300 lines changed → Acceptable if it's a single logical change.
~1000 lines changed → Too large. Split it.Watch file size, not just diff size. Around 1000 total lines in a single file is a common inspection signal. When a change materially grows an already-large file, decompose first.
Splitting strategies:
| Strategy | How | When |
|---|---|---|
| Stack | Submit a small change, start the next one based on it | Sequential dependencies |
| By file group | Separate changes for groups needing different reviewers | Cross-cutting concerns |
| Horizontal | Create shared code/stubs first, then consumers | Layered architecture |
| Vertical | Break into smaller full-stack slices of the feature | Feature work |
Separate refactoring from feature work. A change that refactors and adds new behavior is two changes — submit them separately.
Before adding any dependency:
npm audit)Rule: Prefer standard library and existing utilities over new dependencies. Every dependency is a liability.
Upgrading dependencies:
package.json. Commit it and never hand-edit it.For supply-chain risk triage, follow the security-and-hardening skill.
| Rationalization | Reality |
|---|---|
| "It works, that's good enough" | Working code that's unreadable, insecure, or architecturally wrong creates debt that compounds. |
| "I wrote it, so I know it's correct" | Authors are blind to their own assumptions. Every change benefits from another set of eyes. |
| "We'll clean it up later" | Later never comes. The review is the quality gate — use it. |
| "AI-generated code is probably fine" | AI code needs more scrutiny, not less. It's confident and plausible, even when wrong. |
| "The tests pass, so it's good" | Tests are necessary but not sufficient. They don't catch architecture, security, or readability problems. |
| "The refactor makes it cleaner" | Relocating complexity isn't reducing it. If the reader still holds the same number of concepts, the structure didn't improve. |
| "It's only a small addition to this file" | Small diffs still push files past healthy size and bolt branches onto unrelated flows. |
| "It's just a version bump" | A bump is a behavior change you didn't write. Read the changelog. |
| "I'll upgrade everything in one PR" | A bulk bump hides which package broke the build. One per change. |
| "It's duplicated but it's only two places" | Two becomes three becomes five. Extract now, before the copies diverge. |
| "The abstraction is future-proof" | YAGNI. Delete speculative generality — generalize on the third occurrence, not the first. |
| "It's clever but efficient" | Cleverness is a readability tax. If it needs a comment to understand, simplify it. |
Before emitting the verdict, verify the change as it stands. This is the reviewer's own due diligence — it covers the state of the code at review time, not the later resolution of findings (fixing findings is the author's job; confirming them is a new review):
security-and-hardening© penpot, MPL-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .agents/skills/code-review-criteria of penpot/penpot.
Open the folder on GitHubat commit bcb7a83
Code Review Criteria 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 |
|---|---|---|---|---|---|---|
| Code Review Criteria this skillpenpot/penpot | 61k | — | ~3.6k | Automated safety check: Pass | MPL-2.0 | |
| Frontend Code Reviewlanggenius/dify | 158k | — | ~938 | Automated safety check: Pass | Custom licence | |
| Core Components Code Reviewcore-ds/core-components | 137 | — | ~5.4k | Automated safety check: Pass | MIT | |
| Codebase Review SwarmZaxbyHub/opencode-swarm | 493 | — | ~2.8k | Automated safety check: Pass | MIT | |
| Code Review And QualityHangYu8123/mini-harness | 199 | — | ~1.8k | Automated safety check: Pass | None | |
| Code ReviewOrange-OpenSource/Orange-Boosted-Bootstrap | 222 | — | ~846 | Automated safety check: Pass | MIT |
langgenius/dify
Reviews frontend changes under `web/` or `packages/dify-ui/` for concrete defects and broken project contracts, using routed rule packs and a severity scale for findings.
core-ds/core-components
Review a Pull Request or diff in the @alfalab/core-components UI library — correctness bugs, public API/breaking changes, accessibility, keyboard/focus/pointer interaction, component states…
ZaxbyHub/opencode-swarm
Runs an evidence-gated, quote-grounded audit of a codebase for security, QA, accessibility, performance and more, and writes a verified report without changing source files.
HangYu8123/mini-harness
Multi-axis, review-only code review of a diff across six axes — request achievement, correctness, readability/simplicity, architecture, security, and performance — with severity-labelled findings.
Orange-OpenSource/Orange-Boosted-Bootstrap
OUDS Web compliance code review. An agent skill from Orange-OpenSource/Orange-Boosted-Bootstrap.
handsontable/handsontable
Reviews Handsontable monorepo changes across architecture, code quality, performance and accessibility, and tests, with a confidence rating on every finding.
penpot/penpot
Hardens code against vulnerabilities. An agent skill from penpot/penpot.
penpot/penpot
PR flow — open a new PR for the current task branch (validates base branch, commits, issue and push state) or update an existing PR's title or description to match Penpot conventions.
penpot/penpot
A cat clone with syntax highlighting, line numbers, and Git integration - a modern replacement for cat.
penpot/penpot
Run local CI-style checks with ./scripts/ci (lint, tests, format) per monorepo module.
penpot/penpot
Write or rewrite text in ASD-STE100 Simplified Technical English.
penpot/penpot
Stage, review, and commit files following Penpot commit conventions.
Categories
Code review criteria — the five review axes, core principles, severity format, and verdict for reviewing code changes. Code Review Criteria is an agent skill from penpot/penpot. Code review criteria — the five review axes, core principles, severity format, and verdict for reviewing code changes.
Code Review Criteria fits situations like: tasks that involve Code review; tasks that involve Accessibility.
Run `npx skills add penpot/penpot --skill code-review-criteria -a claude-code`. Or copy the skill folder (.agents/skills/code-review-criteria in penpot/penpot) into .claude/skills/code-review-criteria in your project. Claude Code loads it when a task matches its description.
Run `npx skills add penpot/penpot --skill code-review-criteria -a codex`. Or copy the skill folder (.agents/skills/code-review-criteria in penpot/penpot) into .agents/skills/code-review-criteria in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add penpot/penpot --skill code-review-criteria -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/code-review-criteria, .gemini/skills/code-review-criteria, .github/skills/code-review-criteria and .opencode/skills/code-review-criteria in your project.
Going by SKILL.md and its folder, Code Review Criteria needs the command-line tools its instructions call (npm).
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
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.
Code Review Criteria is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 3.6k tokens (SKILL.md is roughly 14k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Code Review Criteria: Frontend Code Review (langgenius/dify, 158k stars), Core Components Code Review (core-ds/core-components, 137 stars), Codebase Review Swarm (ZaxbyHub/opencode-swarm, 493 stars) and Code Review And Quality (HangYu8123/mini-harness, 199 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
penpot (a GitHub organization) maintains it in penpot/penpot, which has 60,833 GitHub stars. The repository holds 24 skills in this directory. The repository was last updated on October 9, 2026.
Source: penpot/penpot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.