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.

referencesdata-query-contracts.md

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

Data, Query, And Contract Review

Data and queries owns generated-client, Query options, mutation/cache, imperative access, SSR, authentication, and tenant rules. State ownership owns URL state and persistence. Read only the reference needed by the diff; reading a shared reference does not activate its implementation skill.

Generated Contracts And Query Conventions

Review explicit team conventions as contracts, including direct generated options, skipToken for missing required input, and shared cache policy. A lint rule may enforce part of a convention; neither a green lint result nor a suppression proves the full contract is satisfied.

  • Establish whether the changed call belongs to a new or migrated surface and whether the generated operation is ready. Check deprecated markers, schema shape, and the real UI consumer before prescribing a migration.
  • Distinguish a pass-through wrapper from a feature hook with actual orchestration. Check whether an independent execution condition or Promise composition justifies the documented query/mutation exception.
  • Trace generated input and output types through their boundaries. Identify the exact DTO mirror, field widening, placeholder input, or lost intentional empty value when reporting a violation.
  • Check whether a local mutation callback owns feature feedback or replaces shared invalidation, retry, or cache defaults. Match optimistic changes to the current list/detail owner.

Imperative Access And SSR

  • Check freshness, projection, retries, and the caller's execution condition separately against Data and queries. Trace Promise ownership to distinguish an awaited hard gate from soft prefetching with an explicit failure owner.
  • For Server Components, identify who renders the data and who may revalidate it. Check dehydration, the same-key client consumer, error handling, and the intended Suspense/server-rendered-content contract when the diff changes streaming.
  • For auth, setup, roles, branding, or availability, trace authoritative data and the loading/fallback path. A static redirect or placeholder value cannot stand in for a request-dependent decision.

Tenant, URL, And Persistence Boundaries

  • Trace the current workspace-switch flow and cache lifetime before reporting missing identity in a query key. Verify backend meaning before treating workspace_id and tenant_id as interchangeable.
  • For URL and storage changes, identify whether the value is shareable navigation state, live app state, a one-shot signal, or a low-frequency preference. Apply State ownership to that category and verify its write/reset owner.

Report the violated rule and applicable scope or the concrete failing path. Do not invent runtime impact when the finding is a team-convention violation.

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