# Review Dify Frontend Changes

Frontend reviews often miss accessibility, data boundary, and component ownership issues. This skill gives Claude and Codex a focused checklist for Dify React and Next.js code reviews.

## Install

```bash
npx skillstore add langgenius/frontend-code-review
```

## Metadata

- Status: approved
- Slug: langgenius-frontend-code-review
- Skillstore revision: r1
- Version status: missing
- Tree hash: e613d549c721a2501cce3ec996587dd65a4a9f0f58b3913abd421f885181f805
- Author: langgenius
- GitHub username: langgenius
- License: MIT
- Repository: https://github.com/langgenius/dify/tree/main/.agents/skills/frontend-code-review/
- Ref: 1ffa7643651792ccb4bd3b15d924d2c97edff755
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: network, external\_commands
- Quality score: 75
- Public page: https://skillstore.pages.dev/skills/langgenius-frontend-code-review
- Manifest: https://skillstore.pages.dev/api/skills/langgenius-frontend-code-review/manifest

## Capabilities

- Reviews pending frontend changes, named files, or pasted diffs under Dify web paths.
- Checks accessibility issues such as labels, focus handling, keyboard access, and popup reachability.
- Applies Dify UI and Base UI rules for primitives, overlays, forms, tokens, and component boundaries.
- Reviews React component ownership, state modeling, effects, props, and feature organization.
- Checks data query contracts, mutations, SSR boundaries, URL state, and local storage usage.
- Reports findings with severity, file location, reasoning, and concrete fix direction.

## Use Cases

- Review a pull request before merge: Check changed React and Next.js files for user-visible regressions, accessibility problems, and test gaps.
- Audit a Dify UI component refactor: Verify that component ownership, primitive usage, focus behavior, and interaction contracts remain correct.
- Validate risky frontend data flows: Review query keys, mutations, SSR boundaries, URL state, and workspace or auth assumptions before release.

## Prompt Templates

### Review my pending frontend changes

```
Use the frontend-code-review skill to review my pending Dify frontend changes. Focus on correctness, accessibility, and clear fixes.
```

### Review a specific component file

```
Use the frontend-code-review skill to review web/path/to/component.tsx. Check component ownership, Dify UI usage, accessibility, and test coverage.
```

### Audit an overlay or form flow

```
Use the frontend-code-review skill to audit this dialog or form flow. Verify labels, focus behavior, keyboard access, disabled states, and popup reachability.
```

### Perform a release-blocking frontend review

```
Use the frontend-code-review skill for a thorough release-blocking review. Prioritize P0 and P1 issues in data contracts, SSR behavior, accessibility, performance, and tests.
```

## Limitations

- It is tailored to Dify frontend conventions and may not fit unrelated React projects.
- It relies on readable local files or provided diffs for accurate line-level findings.
- It does not implement fixes unless the user asks for review plus changes.
- Current external guidance may require a permitted network fetch before final accessibility findings.

## Best Practices

- Provide the exact files, diff, or pull request scope you want reviewed.
- Mention whether the review should be quick, thorough, or release-blocking.
- Run relevant tests or share test constraints so the review can include residual risk.

## Anti Patterns

- Do not use it for backend-only code under api paths.
- Do not ask for broad style preferences without a concrete frontend risk.
- Do not treat pasted snippets as complete when surrounding ownership or accessibility context matters.

## Security Audit

- Audited at: 2026-07-09T03:53:08.152\+00:00
- Summary: All static findings are false positives from Markdown formatting, repository path references, a public guideline URL, and frontend review prose. No evidence found of executable command use, covert network behavior, prompt injection, or malicious intent in the reviewed files.

## Stats

- Views: 212
- Downloads: 115
- Favorites: 1
- Popularity score: 0