FR

frontend-code-review

Conducts detailed code reviews for frontend files to ensure quality and compliance with UI guidelines.

Install

mkdir -p .claude/skills/frontend-code-review && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/559" && unzip -o skill.zip -d .claude/skills/frontend-code-review && rm skill.zip

Installs to .claude/skills/frontend-code-review

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Review Dify frontend code for correctness, accessibility, component design, dify-ui usage, data/query boundaries, performance, and tests. Trigger for `.tsx`, `.ts`, `.js`, UI, React, Next.js, pending-change, or focused frontend review requests.
244 charsno explicit “when” trigger
Advanced

Key capabilities

  • Review frontend code for accessibility and semantic HTML
  • Audit component architecture and state management
  • Validate data query contracts and API integration
  • Check performance against Vercel-based guidelines
  • Identify security and authorization leaks in UI code

How it works

The skill applies a set of rule packs covering accessibility, component architecture, and performance to the provided code. It identifies issues by comparing the code against established Dify-specific invariants and industry standards.

Inputs & outputs

You give it
Frontend source files or git diff
You get back
Structured markdown report with findings categorized by severity

When to use frontend-code-review

  • Reviewing component code
  • Auditing frontend accessibility
  • Checking performance standards
  • Validating UI implementation

About this skill

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

  1. Establish the review scope from the requested files or current diff.
  2. Read the changed lines, their behavior owner, and the nearest scoped AGENTS.md.
  3. Trace public consumers, generated contracts, primitive APIs, or runtime configuration only when they decide correctness.
  4. 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:

Read packages/dify-ui/README.md, packages/dify-ui/AGENTS.md, web/docs/overlay.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.

When not to use it

  • Reviewing backend-only code under api/

Prerequisites

Access to web/AGENTS.mdAccess to packages/dify-ui/README.md

Limitations

  • Does not automatically implement fixes
  • Requires specific local documentation context for full accuracy

How it compares

It automates the application of specific project-wide coding standards and design system rules rather than relying on generic linting.

Compared to similar skills

frontend-code-review side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
frontend-code-review (this skill)112moNo flagsAdvanced
frontend-developer274moNo flagsIntermediate
frontend-patterns112moReviewIntermediate
next-best-practices03moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

Search skills

Search the agent skills registry