Our review
Runs a series of automated checks on changed files before creating a pull request, covering TypeScript, React, security, performance, and code conventions.
Strengths
- Covers a broad range of checks (TypeScript, React, security, performance, accessibility, etc.)
- Operates only on changed files via git diff, making it fast
- Produces a structured report with file:line references for easy fixes
- Includes Next.js and Prisma specific checks
Limitations
- Does not run test suites (vitest/playwright), assuming they will be run before push
- Requires specific tools (make, pnpm) and may fail if environment is not set up
- Rules are generic and may not apply to all projects (e.g., semicolons usage)
Before creating a pull request to save time on minor review feedback and catch common issues early.
For trivial changes (e.g., typo fix) or if the project already has a comprehensive linting/CI tool covering these checks.
Security analysis
SafeThe skill runs standard development checks (git diff, type checking, pnpm audit) and provides a code review checklist. No destructive or exfiltration commands are used.
No concerns found
Examples
Run the preflight check on changed files vs main and report any issues in a grouped markdown report.Before I push this branch, do a preflight review of all changes since main using the rules in SKILL.md.Run a preflight check on my current changes and highlight only critical issues (security, TypeScript strict, dead code).name: preflight description: Pre-PR check for common issues - run before pushing to catch problems early
Preflight
Run this before creating a PR to catch common issues in changed files.
Instructions
- Run
git diff main --name-onlyto get list of changed files - For each changed file, run the checks below
- Report issues with
file:linereferences - Group by category for readability
Checks
TypeScript Strict
- [ ] No
anytypes - find proper type or useunknown - [ ] No
@ts-ignoreor@ts-expect-errorwithout explanation - [ ] Local interfaces use
PropsnotComponentNameProps - [ ] Type check passes (use
make typesif available, elsepnpm tsc --noEmit)
# Check if 'types' target is available in make output
make 2>/dev/null | grep -q 'types' && make types || pnpm tsc --noEmit
React Patterns
- [ ]
'use client'only where actually needed (hooks, browser APIs, event handlers) - [ ] Browser-only libs use
dynamic(() => import(...), { ssr: false }) - [ ] No
console.logleft in code (use proper logging or remove)
Route Structure
- [ ] Routes have
loading.tsxwith skeleton - [ ] Routes have
error.tsxwith reset button - [ ] Page components are server components unless they need client features
Data Fetching
- [ ] Prisma queries use
selectto specify fields (not barefindMany()) - [ ] No N+1 patterns (queries inside loops)
- [ ] tRPC routers return flat structures
Validation
- [ ] Zod schemas in
validations/not inline in components
Environment Variables
- [ ] No
process.env.*outsideconstants/directory - [ ] New env vars added to
.env.example - [ ]
NEXT_PUBLIC_prefix only for client-safe values - [ ] Server-only secrets not accessed in client components
Imports
- [ ] Use
@/path alias (no../../../climbs) - [ ] Barrel exports updated when adding new files
Dead Code
- [ ] No unused imports
- [ ] No unused variables or parameters
- [ ] No unused functions or components
- [ ] No commented-out code blocks (delete or restore)
- [ ] No unreachable code after return/throw
Security
- [ ] No hardcoded secrets or API keys
- [ ] No
dangerouslySetInnerHTMLwithout sanitization - [ ] No raw SQL queries (use parameterized/Prisma)
- [ ] No sensitive data in console.log or error messages
- [ ] User input validated before use
Dependency Vulnerabilities
Quick audit check (not full analysis - use /audit for that):
pnpm audit 2>/dev/null | head -20
- [ ] No critical/high vulnerabilities in direct dependencies
- Transitive/dev-only vulnerabilities: note but don't block (run
/auditfor full analysis)
Git Hygiene
- [ ] No merge conflict markers (
<<<<<<<,=======,>>>>>>>) - [ ] No
.onlyor.skipleft in test files - [ ] No
debuggerstatements - [ ] No
.env.localor other local config committed - [ ] No large binary files that shouldn't be in git
Performance
- [ ] Large objects/arrays use
useMemoif recreated each render - [ ] Images have explicit
widthandheight(prevents layout shift) - [ ] No synchronous heavy operations in render path
- [ ] Lists over 100 items paginated or virtualized
- [ ] No
useEffectwithout dependency array
Styling
- [ ] Theme-aware colors (
text-muted-foreground) not hardcoded (text-gray-500) - [ ] Images use
<Image>fromnext/image
Dates
- [ ] Use
formatInTimeZonefromdate-fns-tz, notformatfromdate-fns - [ ] Display dates in
facilityTimezone, store in UTC
Accessibility
- [ ] Images have
altattributes - [ ] Interactive elements have proper
aria-*attributes - [ ] Form inputs have associated labels
Code Style
- [ ] No semicolons
- [ ] Files end with single newline
- [ ] Empty lines have no whitespace
- [ ] No trailing whitespace
Output Format
## Preflight Report
> Note: Not running test suites (vitest/playwright) - assuming you've run them or will before pushing. CI is the backstop.
### TypeScript (2 issues)
- app/users/page.tsx:15 - `any` type used, consider `User[]`
- components/modal.tsx:8 - uses `UserModalProps` instead of `Props`
### Route Structure (1 issue)
- app/bookings/ - missing loading.tsx
### Imports (1 issue)
- lib/utils.ts:3 - relative import `../../components`, use `@/components`
### Passed
- React Patterns
- Data Fetching
- Validation
- Styling
- Dates
- Accessibility
- Code Style
Severity
Report issues but don't block. Developer decides what to fix. Some checks are style preferences, others are bugs waiting to happen.
Must fix: Security issues, merge conflict markers, hardcoded secrets, .only/.skip in tests
Should fix: any types, missing error boundaries, N+1 queries, timezone bugs, unused code, performance issues
Nice to fix: Naming conventions, import style, semicolons
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.