All skills
langgenius avatar

/frontend-code-review

@dde1d50
by langgeniuslanggenius/dify158k stars
24,861

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.

Use this Skill: https://skilld.dev/gh/langgenius/dify/frontend-code-review

This session only. Nothing lands on disk.

SKILL.md

≈75 tokens always: the name and description. ≈856 when used: this file. ≈6.5k more on demand in 8 files.

Frontend Code Review

Review the requested scope for concrete defects and violations of explicit project contracts. This skill owns review decisions; its references route to canonical rules without activating another skill's implementation workflow.

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 findings tied to an observable failure, violated contract, security boundary, or demonstrated maintenance risk. Explicit team conventions are contracts: establish their scope and exceptions, and do not invent user impact to justify a convention finding.

Rule Routing

Read only the packs matched by the diff:

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, or a material violation of an explicit project contract.
  • 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 observed failure or applicable project rule, and a concrete fix direction. Explain the rule's applicability for convention findings; describe downstream consequences only when supported by evidence. When no findings remain, say so briefly and state any material verification gap. Do not add praise sections, speculative risks, or an unsolicited offer to implement fixes.

Source: SKILL.md on GitHub

2 warnings9d5 checks · Risk SAFE
  • Gen Agent Trust Hub9d

    This skill provides a structured framework for conducting frontend code reviews, specifically focusing on accessibility, component architecture, data query contracts, and performance. It references official guidelines from a well-known organization (Vercel) and shows no signs of malicious intent, credential exfiltration, or unauthorized command execution.

  • Socket9d

    No alerts

  • Snyk9d

    Risk: MEDIUM · 1 issue

  • Runlayer7mo

    4 files scanned · No issues

  • ZeroLeaks5mo

    1 finding · Score: 69/100

Signed by skilld at dde1d50. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 16 hours ago.

Activeupdated 4 weeks ago

README badge

README badge for langgenius/dify/frontend-code-review

Reviews Dify frontend code in `web/` and `packages/dify-ui/` for correctness, accessibility, component design, dify-ui primitive usage, data/query contracts, performance, and tests. Targets React, Next.js, and TypeScript frontend files, with support for pending-change, file-focused, and diff-based reviews against local contracts and Web Interface Guidelines.

Generated from the current SKILL.md.

What code does this skill review?
Frontend code under `web/`, `packages/dify-ui/`, and frontend-adjacent TypeScript files. It does not review backend code under `api/` — use `backend-code-review` for that.
What review modes does this skill support?
Pending-change review (staged and working-tree diffs), file-focused review (explicitly named files or paths), and diff/snippet review (pasted diffs with best-effort references).
Does this skill check accessibility?
Yes. It applies accessibility rules from Web Interface Guidelines, Dify UI primitives, and MDN, covering semantic HTML, focus, keyboard navigation, disabled states, and long-content behavior.
Will this skill review my tests?
Yes, it includes frontend test review rules. For deeper testing guidance or test implementation, see the `frontend-testing` skill.
Does this skill require local context?
Yes. It reads local contracts like `web/AGENTS.md`, `packages/dify-ui/AGENTS.md`, overlay docs, and component guidelines before finalizing findings. It also fetches the latest Web Interface Guidelines from Vercel Labs.

Generated from the current SKILL.md. These answers refresh after source changes.