frontend-code-review

Name: frontend-code-review
Availability: InStock
Author: taichuy

Analyze Next.js frontend code in the 7Flows web directory for quality and architecture.

239|19|Updated Mar 9, 2026

Search Tags:#quality assurance #code review #web development #frontend #next.js #7flows

Ready to run

npx skills add https://github.com/taichuy/7flows --skill frontend-code-review-taichuy

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-code-review
Source: https://github.com/taichuy/7flows/tree/main/.agents/skills/frontend-code-review
Command: npx skills add https://github.com/taichuy/7flows --skill frontend-code-review-taichuy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the need for systematic quality, architectural, and interaction risk assessment of the frontend code within the web/ directory of the 7Flows project.

Core Features & Use Cases

Code Quality Analysis: Evaluates code against established standards and project-specific conventions.
Architectural Review: Assesses adherence to the project's intended architecture and design principles.
Interaction Risk Assessment: Identifies potential usability issues and confusing user flows.
Use Case: When a new feature is developed for the workflow editor, this Skill can be used to review the code for potential performance bottlenecks, adherence to UI guidelines, and correct integration with the xyflow canvas.

Quick Start

Use the frontend-code-review skill to analyze the code changes in the web/components/WorkflowCanvas directory.

Frequently Asked Questions about frontend-code-review

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

FAQPage Schema

How do I review frontend code quality in a Next.js project?▼

Reviewing frontend code involves assessing Next.js pages and components against project-specific rules and general best practices to evaluate architecture and interaction risks. This ensures new features meet established UI guidelines and performance standards.

What is the best way to assess interaction risks in web components?▼

Assessing interaction risks in web components involves analyzing user flows to identify potential usability issues and confusing interactions. This architectural review checks adherence to design principles and correct integration with elements like the xyflow canvas.

Can I use an automated code review for a workflow editor built with xyflow?▼

Yes, automated code review is applicable for a workflow editor built with xyflow. It evaluates code changes within the web directory to identify performance bottlenecks and verify correct integration with the xyflow canvas against project design documents.

Does frontend code review require access to product and technical design documents?▼

Yes, accurate frontend code review requires adherence to project-specific product and technical design documents. These documents provide the context needed to evaluate whether the Next.js code architecture aligns with intended design principles.

How to check Next.js pages for architectural adherence and performance bottlenecks?▼

Check Next.js pages for architectural adherence by analyzing code within your web directory against established standards. This review identifies performance bottlenecks and verifies component interactions align with project-specific conventions and design principles.

When should I run a code quality analysis on my web components?▼

Run a code quality analysis on your web components immediately after developing a new feature for your workflow editor. This evaluates the code for performance bottlenecks and ensures correct integration with the xyflow canvas.