frontend-code-review

Identify frontend code quality issues in .tsx, .ts, and .js files.

286|38|Updated Jan 26, 2026
One-click install
npx skills add https://github.com/PageAI-Pro/ralph-loop --skill frontend-code-review-pageai-pro
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-code-review
Source: https://github.com/PageAI-Pro/ralph-loop/tree/main/.agent/skills/frontend-code-review
Command: npx skills add https://github.com/PageAI-Pro/ralph-loop --skill frontend-code-review-pageai-pro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reviewers spend time sifting through frontend code to identify style violations, potential bugs, and performance concerns. This skill automates the detection of frontend code issues in files like .tsx, .ts, and .js, ensuring consistent quality across projects.

Core Features & Use Cases

  • Pending-change reviews: analyze staged/working-tree changes to highlight checklist violations before commits.
  • File-targeted reviews: analyze specific files requested by the user and report relevant findings.
  • Consistent rules: apply an evergreen checklist drawn from references/code-quality.md and references/performance.md.

Quick Start

Ask the agent to review your latest frontend changes for style, correctness, and checklist violations.

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 React code reviews for TypeScript files?

Automate React code reviews by analyzing .tsx, .ts, and .js files to detect quality issues. The review focuses on React components, styling, hooks, class names, and memoization to surface urgent and general findings with clear remediation guidance.

What's the best way to check frontend code quality before committing changes?

Check frontend code quality before commits by reviewing staged or working-tree changes. The review highlights checklist violations derived from code-quality and performance references, ensuring consistent style and correctness across pending changes.

Does automated frontend code review catch React performance issues like memoization?

Yes, automated frontend code review catches React performance issues by evaluating memoization and hooks usage. It applies an evergreen checklist drawn from performance references to identify potential bottlenecks and provides remediation steps.

Can I run a code review on specific .tsx files instead of all pending changes?

Yes, you can run a file-targeted review on specific .tsx, .ts, or .js files requested by the user. This targeted analysis reports relevant findings for those individual files without needing to stage all project changes.

What frontend code issues are checked during a TypeScript review?

Frontend code issues checked during a TypeScript review include class name violations, styling problems, hooks usage, and memoization gaps. The review applies a living checklist from code-quality and performance references to ensure comprehensive coverage.