feat: add frontend code review skills

[iamjoel]

Summary

The skill review Dify-specific rules.

Review changed codes before submit:

Review the target file:

Autofix:

Checklist

• This change requires a documentation update, included: Dify Document
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
• I've updated the documentation accordingly.
• I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

[gemini-code-assist]

Summary of Changes

Hello @iamjoel, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a new automated frontend code review skill to enhance code quality and consistency. The skill is capable of reviewing both staged changes and specific files, providing detailed feedback based on a comprehensive set of rules for code quality, performance, and business logic. It aims to streamline the review process by offering structured suggestions and identifying urgent issues, ultimately helping developers adhere to established coding standards.

Highlights

• New Frontend Code Review Skill: A new skill named frontend-code-review has been added, designed to automate the review of frontend files such as .tsx, .ts, and .js.
• Dual Review Modes: The skill supports two primary review modes: reviewing pending changes before commit and performing targeted reviews on specific files requested by the user.
• Comprehensive Rule Catalog: The review process is guided by a checklist sourced from dedicated markdown files covering Code Quality, Performance, and Business Logic, ensuring a standardized and thorough review.
• Structured Output Templates: The skill provides a structured output format for review findings, categorizing issues by urgency (urgent issues vs. suggestions) and including file paths, line numbers, code snippets, and suggested fixes.
• New Review Rules Defined: Specific rules have been introduced, including guidelines for workflowStore usage in React Flow Node components, best practices for conditional class names and Tailwind CSS, proper classname ordering for overrides, efficient React Flow data usage, and complex prop memoization.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new 'frontend-code-review' skill, defining a set of rules and templates for automated code reviews of frontend files. The changes are well-structured, breaking down rules into categories like code quality, performance, and business logic.

My review focuses on improving the consistency and clarity of these new rule definition files. I've suggested a few changes to fix formatting inconsistencies in the templates and rule definitions, improve an example to better align with the rule's description, and remove developer-facing maintenance notes from the rule descriptions themselves. These changes will help ensure the AI skill can parse and apply the rules more reliably.

[Copilot]

Pull request overview

This PR introduces a new frontend code review skill system for Claude, enabling automated review of frontend code changes according to Dify-specific guidelines. The skill provides structured reviews across three categories: code quality, performance, and business logic.

Key Changes:

• Adds a skill definition file that enables two review modes: pending-change review and file-targeted review
• Defines rules for code quality (Tailwind-first styling, conditional class names, className ordering)
• Defines performance rules (React Flow data usage, prop memoization)
• Documents business logic constraints (workflowStore usage in Node components)

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
.claude/skills/frontend-code-review/SKILL.md	Main skill definition that describes intent, review process, and output templates
.claude/skills/frontend-code-review/references/code-quality.md	Documents three code quality rules for class name handling and Tailwind usage
.claude/skills/frontend-code-review/references/performance.md	Documents two performance-related rules for React Flow and memoization
.claude/skills/frontend-code-review/references/business-logic.md	Documents constraint on workflowStore usage in Node components

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[lyzno1]

I suggest removing this section. Modifications to custom skills will automatically use skill-creator to conform to the specifications, and this section doesn't help with code review.

[lyzno1]

We can maintain front-end best practices through a checklist, with the detailed rationale and guidance for each item documented separately under the references/ directory.

The intended workflow is:
reviewers first scan the checklist, and only when a code change touches a specific checklist item do they jump to the corresponding reference document. This makes future rule additions and maintenance much more scalable.

In addition, it’s important to clearly distinguish between three different scenarios:

1. Whether the change introduces a regression
2. Code style or general quality improvements
3. Our project-specific custom rules

For the first two cases, tools like Codex Review and Gemini Code Assist already perform very well. Therefore, our focus should be on making custom rules easier to maintain, evolve, and reason about.