frontend-code-review

Name: frontend-code-review - Agent Skill
Rating: 5.0 (126934 reviews)
Author: langgenius

126,934

Use only when the user explicitly requests a review or audit of frontend code under `web/` or `packages/dify-ui/`. Supports pending-change, file-focused, and pasted-diff reviews. Do not use for implementation-only requests, diagnosis without review intent, or backend-only code.

Download Folder View on GitHub

CLI Install

Recommended

Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.

Method 1 - skills CLI

npx skills i langgenius/dify/.agents/skills/frontend-code-review

Method 2 - openskills (supports sync & update)

npx openskills install langgenius/dify

Auto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.

Installation Path

Download and extract to one of the following locations:

~/.claude/skills/frontend-code-review/

SKILL.md

Skill Instructions

Back

Run with Cloud Agent

No setup needed. Let our cloud agents run this skill for you.

Select Provider

Select Model

Claude Sonnet 4.5

$0.20/task

Best for coding tasks

No setup required

Frontend Code Review

Review the requested scope for concrete, reproducible regressions. This skill owns the review phase and routes directly to its bundled rule packs. For a combined review-and-fix request, establish findings before applying implementation or testing guidance.

Evidence First

Establish the review scope from the requested files or current diff.
Read the changed lines, their behavior owner, and the nearest scoped AGENTS.md.
Trace public consumers, generated contracts, primitive APIs, or runtime configuration only when they decide correctness.
Report only findings tied to an observable failure, violated contract, security boundary, or demonstrated maintenance risk.

Rule Routing

Read only the packs matched by the diff:

DOM semantics, focus, keyboard, forms, disabled state, or visible interaction: references/accessibility-ui.md
Dify UI imports, Base UI wrappers, overlays, tokens, or primitive contracts: references/dify-ui.md
Component ownership, props, state, Effects, navigation, or module boundaries: references/component-architecture.md
Generated clients, Query, mutations, auth, SSR, URL state, or persistence: references/data-query-contracts.md
Test files or a concrete missing-regression-test finding: references/testing.md
Bundle, waterfall, rendering, or subscription cost supported by evidence: references/performance.md
Stable Dify runtime invariants in the named paths: references/dify-invariants.md
General TypeScript or styling quality not owned above: references/code-quality.md

Read packages/dify-ui/README.md, packages/dify-ui/AGENTS.md, packages/dify-ui/docs/overlays.md, or web/docs/test.md only when the reviewed code falls under that contract. Check current official documentation when local code and bundled references do not settle a framework, browser, or accessibility behavior.

Severity And Output

P0: security or privacy leak, data loss, production crash, or inaccessible critical workflow.
P1: user-visible regression, invalid API or authorization contract, hydration failure, or broken primary interaction.
P2: concrete maintainability, performance, test, or accessibility defect likely to cause incorrect behavior.
P3: minor actionable cleanup; omit unless the user requested a thorough audit.

Lead with findings ordered by severity. Include a tight file and line reference, the failing contract or reproduction path, impact, and a concrete fix direction. If there are no findings, say No issues found. and state any material verification gap. Do not add praise sections, speculative risks, or an unsolicited offer to implement fixes.