frontend-code-review

Identify frontend code quality gaps and accessibility issues in React, Vue, and Angular projects.

14|11|Updated Dec 1, 2025
One-click install
npx skills add https://github.com/DauQuangThanh/hanoi-rainbow --skill frontend-code-review-dauquangthanh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-code-review
Source: https://github.com/DauQuangThanh/hanoi-rainbow/tree/main/skills/frontend-code-review
Command: npx skills add https://github.com/DauQuangThanh/hanoi-rainbow --skill frontend-code-review-dauquangthanh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides a structured, repeatable process to identify frontend code quality gaps, performance bottlenecks, accessibility issues, security risks, and testing gaps across React, Vue, or Angular projects.

Core Features & Use Cases

  • Systematic evaluation of component structure, JS/TS quality, state management, and accessibility patterns.
  • Generates actionable remediation guidance and a consolidated review report for PRs or pre-release validations.
  • Use Case: A team reviews a new dashboard feature to uncover broken accessibility, performance regressions, and maintainability concerns before merge.

Quick Start

Inspect a codebase by applying the defined checklist to the main components and share a prioritized improvement plan to the team.

Frequently Asked Questions about frontend-code-review

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

FAQPage Schema
How do I check frontend code quality and accessibility in a React project?

To check frontend code quality and accessibility in a React project, apply a structured review checklist that evaluates component structure, state management, and WCAG patterns to surface severity-rated issues and concrete remediation steps.

What is the best way to review Vue components for performance and security gaps?

Reviewing Vue components for performance and security gaps is best handled by enforcing a systematic evaluation checklist during pre-release checks, which identifies maintainability concerns and outputs a prioritized improvement plan.

Does this frontend code review process work with Angular applications?

Yes, the frontend code review process works with Angular applications by applying a repeatable checklist to identify testing gaps, accessibility issues, and security risks across component structures.

How do I generate actionable remediation guidance for a frontend pull request?

To generate actionable remediation guidance for a frontend pull request, apply the review checklist to the changed components, which calculates severity ratings and produces a consolidated report with concrete fixes.

When do I need a structured checklist for frontend code reviews?

You need a structured checklist for frontend code reviews when validating pre-release features or PR merges to ensure consistent detection of performance bottlenecks, accessibility failures, and state management anti-patterns.

Can I evaluate TypeScript quality and state management during pre-release checks?

Yes, you can evaluate TypeScript quality and state management during pre-release checks by applying the review checklist to surface maintainability concerns and generate a consolidated report for the team.