Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
npxskills add langgenius/dify--skill frontend-code-reviewLoading…
Use this skill when the user asks to review, audit, analyze, or sanity-check frontend code under web/, packages/dify-ui/, or frontend-adjacent TypeScript files.
Supported modes:
Do not use this skill for backend-only code under api/; use backend-code-review instead.
Before reviewing, read the relevant local contracts:
web/AGENTS.md for Dify frontend workflow, overlays, design tokens, state, and tests.packages/dify-ui/README.md and packages/dify-ui/AGENTS.md when code uses or changes .@langgenius/dify-ui/*web/docs/overlay.md when reviewing dialogs, drawers, popovers, tooltips, menus, selects, comboboxes, or other floating UI.web/docs/test.md and the frontend-testing skill when reviewing tests or testability.karpathy-guidelines for scope control and focused, verifiable changes.how-to-write-component when reviewing React component structure, ownership, effects, query/mutation contracts, or memoization.For any UI, UX, or accessibility review, fetch the latest Web Interface Guidelines before finalizing findings. Treat them as a required baseline, not the complete source of accessibility truth:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
If the review depends on a current framework, SDK, browser API, or accessibility behavior and local code does not settle it, check the current official docs first. For browser compatibility, deprecation, or behavior-sensitive frontend APIs, verify MDN or the relevant standard.
Apply every relevant rule pack:
git diff --stat, git diff, and staged diff if relevant. For file-focused reviews, stay within the named files unless a referenced owner/contract must be read.Lead with findings, ordered by severity. Use this structure:
## Findings
- [P1] Short issue title
File: `path/to/file.tsx:123`
Why it matters and how to reproduce or reason about it.
Suggested fix: concrete fix direction.
## Open Questions
- Question or assumption, if any.
## Summary
Brief secondary context. Mention tests not run or residual risk.
Rules:
No issues found. and mention any test gaps or residual risk.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).