skills.rest
gewoonseba
gewoonsebaCOMMUNITY
Explore all skills by this author →
Website𝕏@sebastoelenGitHub

frontend-review

Review React/TypeScript frontend code for quality and project conventions.

9|Updated Dec 21, 2025
Search Tags:#typescript#react#monorepo#code-review#ui-patterns#frontend-review
One-click install
npx skills add https://github.com/gewoonseba/dotfiles --skill frontend-review-gewoonseba
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-review
Source: https://github.com/gewoonseba/dotfiles/tree/main/claude/.claude/skills/frontend-review
Command: npx skills add https://github.com/gewoonseba/dotfiles --skill frontend-review-gewoonseba

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review frontend React/TypeScript code for the Jolteon monorepo. Use this skill whenever the user asks to review, audit, check, or critique frontend code — whether it's a PR diff, a specific file, a feature branch, or a set of components. Also trigger when the user mentions "review my component", "check this code", "code review", "PR review", "is this good React code", "audit the frontend", or wants feedback on React/TypeScript code quality — even if they don't explicitly say "review". If the user pastes or references frontend .tsx/.ts code and asks for feedback, use this skill.

Core Features & Use Cases

Your review should be constructive, specific, and actionable. Flag real issues, highlight good patterns, and suggest concrete improvements. Avoid nitpicking formatting (Prettier handles that) or linting issues (ESLint catches those).

  • Flag unnecessary memoization in React 19 with the React Compiler; useMemo/useCallback/memo should be avoided unless a clear reason exists
  • Prefer existing reusable components from components/ui/ and shadcn/ui patterns to avoid reinventing UI primitives
  • Provide actionable feedback on component design, type correctness, accessibility, performance, and code quality
  • Ensure reviews align with the project's frontend architecture guides and TailwindCSS v4 styling

Quick Start

Paste the frontend file or PR diff and ask me to review it for React/TypeScript quality.

Frequently Asked Questions about frontend-review

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

FAQPage Schema
How do I review React and TypeScript code for quality and pattern conformance?▼

A frontend code review flags unnecessary memoization like useMemo and useCallback in React 19 with the React Compiler, advising against them unless a clear performance reason exists, while highlighting good component design patterns.

What is the best way to audit a frontend PR diff for reusable component usage?▼

To check React code quality, provide actionable feedback on component design, type correctness, accessibility, performance, and i18n considerations, avoiding formatting nitpicks handled by Prettier or linting issues caught by ESLint.

Does this code review process work with a monorepo using TailwindCSS v4 and shadcn/ui?▼

A frontend code review can process specific files, feature branches, or component sets by analyzing the pasted TypeScript or React code and returning constructive, specific, and actionable feedback on quality and conformance.

When should I avoid using memo in React 19 components during a code review?▼

You should avoid using memo, useMemo, and useCallback in React 19 components during a code review unless a clear performance reason exists, as the React Compiler handles these optimizations automatically.

Related Skills

Explore More Software Engineering Skills→
nuclianuclia
56

bug-finder

Scan code snippets, diffs, or files for runtime bugs and correctness defects.

Official
Advanced
charly3pinscharly3pins
4

testing-anti-patterns

Detect test and mock anti-patterns in TypeScript/JavaScript projects.

Community
Basic
pascallammerspascallammers
1

standards-enforcement

Configure ESLint, Prettier, and Husky to enforce coding standards.

Community
Intermediate
umbracoumbraco
5.2k

umb-review

Analyze pull requests for code quality, architectural compliance, and breaking changes.

Official
Advanced