frontend-code-review

Review frontend code changes against checklist-based quality rules.

2.2k|448|Updated Dec 9, 2024
One-click install
npx skills add https://github.com/YFGaia/dify-plus --skill frontend-code-review-yfgaia
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-code-review
Source: https://github.com/YFGaia/dify-plus/tree/main/.agents/skills/frontend-code-review
Command: npx skills add https://github.com/YFGaia/dify-plus --skill frontend-code-review-yfgaia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill triggers automated frontend code reviews when a user requests analysis of frontend files (such as .tsx, .ts, or .js), applying a consistent, checklist-driven approach to identify issues early in the development cycle.

Core Features & Use Cases

  • Review pending changes (staged/working-tree) for checklist violations before submission to maintain code quality.
  • Review specific frontend files by name (e.g., components or modules) using the canonical rules from living references.
  • Provide urgent findings with detailed snippets and recommended fixes to guide developers and reviewers.

Quick Start

Review the current staged frontend changes or specify particular frontend files to review, and run the checklist-driven review.

Frequently Asked Questions about frontend-code-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate frontend code reviews for TypeScript and React files?

You can automate frontend code reviews by running a checklist-driven analysis on pending changes or specified .tsx, .ts, and .js files to flag violations with urgency metadata and structured guidance.

What is the best way to review staged TypeScript changes before submission?

Reviewing staged TypeScript changes is best handled by applying canonical rules from living references to pending working-tree modifications, identifying checklist violations early to maintain code quality before submission.

Can I review specific React component files instead of all pending changes?

Yes, you can review specific frontend files by name, such as individual React components or modules, operating in a targeted file review mode rather than scanning all pending changes.

Does the frontend code review check for performance and business logic issues?

Yes, the frontend code review checks for performance and business logic issues by following living rules defined in dedicated references to flag violations alongside standard code quality checks.

How do I fix urgent code quality violations found in my JavaScript code?

To fix urgent JavaScript code quality violations, review the detailed snippets and recommended fixes provided in the structured guidance output to correct the flagged issues.

When should I use a checklist-based code review for frontend development?

You should use a checklist-based code review for frontend development when you need to identify issues early in the development cycle and maintain consistent code quality across .tsx, .ts, and .js files.