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

Ask your Agent

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

This session only. Nothing lands on disk.

referencesdify-invariants.md

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

Dify Invariants

Use these stable Dify-specific runtime rules in addition to the generic review packs.

This file is not a place for active feature notes. Do not add rules for one branch, one PR, or a short-lived product decision such as a specific agent-v2, plugin, model-provider, or onboarding task. Keep a rule here only when all of these are true:

  • It is a stable Dify runtime invariant.
  • Generic React, TypeScript, accessibility, dify-ui, query, or performance rules would not catch it.
  • The failure mode is concrete enough to produce a file-line review finding.
  • The rule is likely to remain valid across normal feature work.

Workflow Nodes And RAG Pipe

Flag:

  • Node components under web/app/components/workflow/nodes/[nodeName]/node.tsx importing workflow store hooks that are unavailable in RAG Pipe template rendering.
  • Node UI relying on provider context that is not mounted in every rendering surface.
  • Store reads in render where React Flow useNodes / useEdges provide the actual node/edge source.

Known failure mode: workflow node components can also render while creating a RAG Pipe from a template. In that context there may be no workflowStore provider, causing a blank screen.

Prefer React Flow hooks for node/edge UI consumption. Use store APIs only where the provider is guaranteed and the code path is workflow-only.

Source: SKILL.md on GitHub

Third-party checks

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

Provenance

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 20 hours ago.

Activeupdated 4 weeks ago

Topics

README badge

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

What it does

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.

Frequently asked

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.