frontend-code-review_skill

Overview

This skill performs focused frontend code reviews for .tsx, .ts, and .js files. It supports both pending-change reviews (staged/working-tree) and file-targeted reviews and flags checklist violations with urgency metadata. The output follows the required review templates to make remediation and tracking straightforward.

How this skill works

I open the specified file(s) or the staged changes and scan for checklist items across Code Quality, Performance, and Business Logic. For each violation I capture a representative snippet, annotate urgency, and group results by Urgent first, then by category. The review is formatted exactly using the Template A/B structures so it can be consumed by reviewers or automated pipelines.

When to use it

• Before committing frontend changes to catch violations early.
• When you want a focused review of a particular component or module file.
• As a pre-merge gate to enforce performance and business-logic rules.
• When onboarding contributors to ensure consistent code patterns.
• To audit staged changes in CI or local pre-commit hooks.

Best practices

• Run the pending-change review frequently during feature development to avoid large fixups.
• Provide specific file paths or staged diff context for targeted reviews to improve accuracy.
• Address Urgent flags first; they are ordered to minimize user-facing regressions.
• Include a short description of intended behavior when requesting business-logic checks.
• Use suggested fix text as a base for automated PR patches if you want fixes applied programmatically.

Example use cases

• Spot-check a single React component (.tsx) for prop memoization and expensive renders.
• Run a pre-commit review on staged .ts/.js files to catch lint-level and performance regressions.
• Review newly introduced business logic that touches billing or permissions flows.
• Audit styling and class name usage in components to prevent layout regressions.
• Assess React Flow hook usage and flag improper side effects or missing dependencies.