Help us improve
Share bugs, ideas, or general feedback.
From beagle-react
Reviews React/TypeScript frontend changes via git diff for React Router, shadcn/ui, Zustand, Tailwind v4, React Flow, tests; supports parallel subagents.
npx claudepluginhub existential-birds/beagle --plugin beagle-reactHow this skill is triggered — by the user, by Claude, or both
Slash command
/beagle-react:review-frontendThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- `--parallel`: Spawn specialized subagents per technology area
Reviews React components for architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility, and TypeScript. Use before merging PRs, after new features, or for validation.
Reviews frontend files (JSX, TS, JS) for code quality, performance, and business logic violations using a structured checklist. Supports pending-change and file-targeted reviews.
Reviews and verifies code before merge via triage-first checks (up to 16 parallel agents). Pipeline mode verifies vs plans; general mode for PRs/branches/staged changes. Flags findings only.
Share bugs, ideas, or general feedback.
--parallel: Spawn specialized subagents per technology areagit diff --name-only $(git merge-base HEAD main)..HEAD | grep -E '\.(tsx?|css)$'
# Detect React Flow
grep -r "@xyflow/react\|ReactFlow\|useNodesState" --include="*.tsx" -l | head -3
# Detect Zustand
grep -r "from 'zustand'\|create\(\(" --include="*.ts" --include="*.tsx" -l | head -3
# Detect Tailwind v4
grep -r "@theme\|@layer theme" --include="*.css" -l | head -3
# Check for test files
git diff --name-only $(git merge-base HEAD main)..HEAD | grep -E '\.test\.tsx?$'
Load beagle-react:review-verification-protocol skill and keep its checklist in mind throughout the review.
Use the Skill tool to load each applicable skill (e.g., Skill(skill: "beagle-react:react-router-code-review")).
Always load:
beagle-react:react-router-code-reviewbeagle-react:shadcn-code-reviewConditionally load based on detection:
| Condition | Skill |
|---|---|
| @xyflow/react detected | beagle-react:react-flow-code-review |
| Zustand detected | beagle-react:zustand-state |
| Tailwind v4 detected | beagle-react:tailwind-v4 |
| Test files changed | beagle-react:vitest-testing |
Sequential (default):
Parallel (--parallel flag):
Task toolBefore reporting any issue:
You MUST report ALL issues across ALL categories (style, logic, types, tests, security, performance) in a single review pass. Do not hold back issues for later rounds.
Before submitting findings, ask yourself:
If yes to either: include those anticipated downstream issues NOW, in this review, so the author can address everything at once.
Fixes to existing code should be flagged at their real severity regardless of size.
However, requests for net-new code that didn't exist before the diff must be classified as Informational:
These are improvement suggestions for the author to consider in future work, not review blockers.
If this is a re-review after fixes were applied:
## Review Summary
[1-2 sentence overview of findings]
## Issues
### Critical (Blocking)
1. [FILE:LINE] ISSUE_TITLE
- Issue: Description of what's wrong
- Why: Why this matters (bug, a11y, perf, security)
- Fix: Specific recommended fix
### Major (Should Fix)
2. [FILE:LINE] ISSUE_TITLE
- Issue: ...
- Why: ...
- Fix: ...
### Minor (Nice to Have)
N. [FILE:LINE] ISSUE_TITLE
- Issue: ...
- Why: ...
- Fix: ...
### Informational (For Awareness)
N. [FILE:LINE] SUGGESTION_TITLE
- Suggestion: ...
- Rationale: ...
## Good Patterns
- [FILE:LINE] Pattern description (preserve this)
## Verdict
Ready: Yes | No | With fixes 1-N (Critical/Major only; Minor items are acceptable)
Rationale: [1-2 sentences]
After fixes are applied, run:
npm run lint
npm run typecheck
npm run test
All checks must pass before approval.