Notre avis
Effectue une série de vérifications automatisées sur les fichiers modifiés avant de créer une pull request, couvrant TypeScript, React, la sécurité, les performances et l'accessibilité.
Points forts
- Liste de contrôle exhaustive adaptée aux projets Next.js/TypeScript
- Détecte des problèmes courants (types any, dépendances vulnérables, conflits git)
- Production d'un rapport formaté avec références fichier:ligne
- Automatisation de vérifications manuelles souvent oubliées
Limites
- N'exécute pas les suites de tests (vitest/playwright)
- Analyse statique uniquement, sans exécution dynamique
- Nécessite que le dépôt soit à jour avec la branche principale
Avant chaque push vers une pull request, pour détecter les problèmes courants dans les modifications en cours.
Lorsque vous avez besoin d'une analyse de sécurité complète ou d'exécution de tests ; utilisez des outils dédiés comme /audit ou les suites de tests.
Analyse de sécurité
SûrThe skill instructs running typical dev commands (git diff, make, pnpm) for code quality checks. No destructive, exfiltrating, or obfuscated actions. It does not handle secrets or perform network operations beyond a package audit. All commands are safe in a development environment.
Aucun point d'attention détecté
Exemples
Run preflight checks on my current branch against main.Compare with main and run preflight checklist: TypeScript strict, React patterns, route structure, data fetching, validation, env vars, imports, dead code, security, dependencies, git hygiene, performance, styling, dates, accessibility, and code style.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
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.