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.

referencestesting.md

≈610 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Testing Review Rules

Use web/docs/test.md for tests owned by web/ and packages/dify-ui/docs/testing.md for tests owned by Dify UI. These owners define their test boundaries, environments, and checks; this reference only adds review questions.

Request Missing Tests When Risk Justifies Them

Flag missing coverage when a change alters a reachable contract such as:

  • User interaction, navigation, form submission, validation, or permissions.
  • Query or mutation behavior, URL state, persistence, or one-shot signals.
  • Loading, error, empty, and recovery states that users can encounter.
  • A hidden surface whose close-and-reopen behavior changes whether in-progress state resets or persists.
  • Accessibility-critical labels, keyboard flow, focus, disabled state, or overlay behavior.
  • A regression-prone business rule or bug fix that can be reproduced through a public boundary.

Do not request tests for mechanical changes, pass-through wrappers, implementation details, or incidental visual styling. Low coverage alone is not a finding.

Flag Low-Value or Fragile Tests

Flag tests that:

  • Assert internal state, refs, hook usage, effect dependencies, private DOM structure, or cosmetic classes.
  • Exist only to render a component, exercise a prop, or cover generic invalid inputs without a product scenario.
  • Mock away the behavior under review or use mocks that do not match the public contract.
  • Add production data-testid attributes where semantic markup would work.
  • Use fake timers without timer behavior, leave async work unawaited, or leak shared state.
  • Duplicate a contract already protected at a more useful owner boundary.

Review the Test Boundary

  • Prefer semantic queries and accessible names.
  • Prefer real feature components when integration semantics matter.
  • Check mocks against the owning package's policy; allowed mocks must preserve the public contract and leave the behavior under review real.
  • Apply the owning package's admission policy before requesting new automation. Real-browser verification can be a one-off review; a simulator limitation alone does not justify a permanent test.
  • Check that assertions prove the claimed outcome and add evidence beyond existing tests; a browser runtime does not make weak assertions stronger.

Treat test quality, determinism, and regression value as the review criteria. Do not use test count or coverage percentage as a proxy for quality.

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 19 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.