Agent skill
pr-ready
Prepare code for a PR by checking for cleanliness, removing debug statements, ensuring DRY principles, checking React component structure, and identifying prop drilling issues.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/pr-ready
SKILL.md
Prepare the code for a pull request by performing a comprehensive cleanup and quality check.
Scope
If $ARGUMENTS is provided, focus on that file or directory. Otherwise, use git diff --name-only $(git merge-base HEAD main)...HEAD to get the list of changed files on the current branch.
Step 1: Identify Files to Review
- If a specific path was provided, use that
- Otherwise, get all changed files on the current branch compared to main
- Filter to only include source files (
.ts,.tsx,.js,.jsx)
Step 2: Debug Statement Check
Search for and report any debug statements that should be removed:
console.logstatements (except those in legitimate logging utilities)console.debug,console.info,console.warn,console.error(evaluate if intentional)debuggerstatements- Commented-out
console.*statements TODOorFIXMEcomments that should be addressed before PR
For each finding, report:
- File path and line number
- The offending code
- Recommendation (remove, keep, or convert to proper logging)
Step 3: DRY (Don't Repeat Yourself) Analysis
Look for code duplication:
- Repeated logic patterns: Similar code blocks appearing in multiple places
- Copy-pasted functions: Functions with minor variations that could be parameterized
- Repeated JSX structures: Similar UI patterns that could be extracted into components
- Duplicate type definitions: Types or interfaces defined multiple times
- Repeated utility code: String manipulation, date formatting, etc. that could be centralized
For each duplication found:
- List all locations where the pattern appears
- Suggest a refactoring approach (extract to utility, create shared component, etc.)
- Estimate the code reduction
Step 4: React Component Structure Review
For each React component, check:
Component Size
- Components should be under 150 lines
- If larger, identify logical boundaries for splitting
Single Responsibility
- Each component should have one clear purpose
- Flag components that do too many things
Component Splitting Opportunities
- Large render methods that could be broken into smaller components
- Repeated JSX patterns within a component
- Complex conditional rendering that could be extracted
Hooks Organization
- Business logic should be in custom hooks, not inline
- Related state should be grouped into custom hooks
- Effects should be organized and commented if complex
Step 5: Prop Drilling Detection
Identify prop drilling issues where props are passed through multiple component layers:
- Direct prop drilling: Props passed through 3+ component levels without being used
- Context candidates: Data that's needed by many components and should use React Context
- State lifting issues: State that's lifted too high and causes unnecessary re-renders
For each prop drilling issue:
- Show the prop's journey through components
- Recommend a solution:
- Use React Context
- Use composition (children pattern)
- Co-locate state closer to where it's used
- Use a state management solution
Step 6: Additional Quality Checks
- Unused imports: Imports that aren't being used
- Unused variables: Variables declared but never referenced
- Dead code: Functions or components that are never called
- Commented-out code: Old code that should be deleted, not commented
- Inconsistent naming: Variables or functions that don't follow project conventions
- Missing TypeScript types: Any
anytypes or missing type annotations
Output Format
## PR Readiness Report
### Files Analyzed
- [list of files]
### Critical Issues (Must Fix Before PR)
#### Debug Statements
| File | Line | Code | Action |
|------|------|------|--------|
| ... | ... | ... | ... |
#### Dead Code & Unused Imports
| File | Line | Issue |
|------|------|-------|
| ... | ... | ... |
### Code Quality Issues
#### DRY Violations
1. **[Pattern Name]**
- Found in: `file1.tsx:10`, `file2.tsx:25`, `file3.tsx:40`
- Suggestion: [refactoring approach]
#### Component Structure Issues
1. **[Component Name]** (`path/to/component.tsx`)
- Issue: [description]
- Recommendation: [how to fix]
#### Prop Drilling Issues
1. **[Prop Name]**
- Path: `ParentComponent` → `MiddleComponent` → `ChildComponent`
- Recommendation: [solution]
### Summary
- Total issues found: X
- Critical (must fix): Y
- Warnings: Z
- Suggestions: W
### Recommended Actions
1. [First action to take]
2. [Second action to take]
...
Step 7: Offer to Fix
After presenting the report, ask the user if they want you to:
- Fix all critical issues automatically
- Fix specific issues (let them choose)
- Just report without making changes
If they want fixes applied:
- Remove debug statements
- Remove unused imports and dead code
- Extract duplicated code into utilities or components
- Split large components
- Add React Context where prop drilling is detected
Didn't find tool you were looking for?