frontend-sentinel

Reviews React and Next.js codebases for rendering bugs, boundary violations, and performance regressions.

2|Updated Feb 15, 2026
One-click install
npx skills add https://github.com/SkinnnyJay/simpill-utils --skill frontend-sentinel-skinnnyjay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-sentinel
Source: https://github.com/SkinnnyJay/simpill-utils/tree/main/.claude/skills/frontend-sentinel
Command: npx skills add https://github.com/SkinnnyJay/simpill-utils --skill frontend-sentinel-skinnnyjay

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend codebases accumulate subtle React and Next.js defects such as hydration mismatches, stale closures, effect misuse, and server/client boundary violations that junior reviews and generic AI output routinely miss. ## Core Features & Use Cases - Multi-Scope Scanning: Supports FILE_SCAN, FOLDER_SCAN, REPO_SCAN, and DIFF_SCAN modes for single components, directories, full codebases, or PR reviews. - Categorized Findings: Classifies every issue across 17 bug categories including REACT_RENDER_BUG, HYDRATION_MISMATCH, SERVER_CLIENT_BOUNDARY, and AI_SLOP, each with severity, confidence, user impact, and scale risk ratings. - Next.js Enforcement: Flags incorrect use client placement, caching directive misuse, server action leaks, and rendering mode errors. - Use Case: Point it at a Next.js App Router pull request to receive a health score, a findings table, deep dives on the top five issues, and opinionated refactor guidance before merging. ## Quick Start Ask the assistant to run a DIFF_SCAN on your current pull request and report all React and Next.js findings with severity ratings.

Frequently Asked Questions about frontend-sentinel

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

FAQPage Schema
How do I review a Next.js pull request for React bugs?▼

Use the DIFF_SCAN mode to perform a PR-aware review of changed files. It categorizes findings across 17 bug types such as hydration mismatch and stale closures, each rated by severity, confidence, user impact, and scale risk.

What frontend issues does a React code review scan detect?▼

The scan detects render cycle bugs, useEffect antipatterns, broken memoization, state ownership leaks, server/client boundary violations, cache invalidation bugs, bundle bloat, accessibility gaps, and AI-generated code smells.

Does it support both Next.js App Router and Pages Router?▼

Yes, the pre-scan inference step identifies the Next.js version and router type before analysis. It then applies router-specific rules such as use client placement, caching directives, and server action boundaries for App Router projects.

Can I scan a single component instead of the whole repository?▼

Yes, FILE_SCAN analyzes one component or file, while FOLDER_SCAN covers a directory and REPO_SCAN covers the full frontend codebase. For large repositories it proposes a phased scan plan starting with routing, data, state, and rendering.

What are the limitations of automated frontend code review?▼

Findings include a confidence rating because static analysis cannot measure actual runtime behavior such as real render counts or memory retention. Performance claims like memoization benefit still require measurement in real browsers to confirm.