frontend-code-review

Flag frontend code issues in .tsx, .ts, and .js files using a living checklist.

Updated Jan 5, 2026
One-click install
npx skills add https://github.com/kopfrechner/kopfarbeit --skill frontend-code-review-kopfrechner
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-code-review
Source: https://github.com/kopfrechner/kopfarbeit/tree/main/.gemini/skills/frontend-code-review
Command: npx skills add https://github.com/kopfrechner/kopfarbeit --skill frontend-code-review-kopfrechner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Reviewers need a structured, checklist-driven approach to identify frontend code issues (e.g., in .tsx, .ts, and .js files) to improve quality and maintainability.

Core Features & Use Cases

  • Pending-change reviews: Inspect staged/working-tree changes and flag checklist violations before submission.
  • File-targeted reviews: Assess specific files by name and report findings based on the canonical checklist across Code Quality, Performance, and Business Logic.
  • Use Case: A PR with multiple frontend components can be scanned to surface class-name issues, performance hotspots, and potential logic concerns before merging.

Quick Start

Review the target frontend files using the checklist to surface issues and guidance.

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 React code for quality and performance issues?

Review frontend React code by applying a structured checklist to targeted .tsx, .ts, and .js files. It flags violations and categorizes findings under Code Quality, Performance, and Business Logic to prioritize fixes before merging.

Can I scan staged Git changes for TypeScript code violations before submitting a PR?

Yes, you can scan staged or unstaged changes for TypeScript code violations. The review operates on pending changes to flag checklist violations, helping you identify class-name issues and performance hotspots before PR submission.

What is the best way to check specific JavaScript files for business logic concerns?

The best way to check specific JavaScript files for business logic concerns is through file-targeted reviews. You assess specific files by name and report findings based on a canonical checklist across Code Quality, Performance, and Business Logic categories.

Does the code review checklist categorize findings by urgency for prioritization?

Yes, the code review checklist categorizes findings by urgency. It reports violations with urgency metadata alongside categories like Code Quality, Performance, and Business Logic, allowing you to effectively prioritize frontend code fixes.

What types of frontend issues can I catch when reviewing .tsx files?

When reviewing .tsx files, you can catch class-name issues, performance hotspots, and potential business logic concerns. The checklist-driven review surfaces these issues across Code Quality, Performance, and Business Logic categories with urgency metadata.

Are there limitations to reviewing pending changes versus file-targeted reviews in a codebase?

Both pending-change and file-targeted reviews apply the same canonical checklist to .tsx, .ts, and .js files. Pending-change reviews focus on staged or unstaged modifications, while file-targeted reviews assess specific files by name across the entire codebase.