# Review Pr > Pre-submission PR checklist for gluestack-ui contributions - Skill: `gluestack/review-pr` (Agent Skill) - Install (CLI): `npx skillmds@latest add gluestack/review-pr` - Raw SKILL.md: https://api.skillmd.com/api/skills/gluestack/review-pr/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: gluestack (https://skillmd.com/u/gluestack) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/gluestack/review-pr --- # Review PR - Pre-Submission Checklist Comprehensive pre-submission checklist to ensure your contribution meets gluestack-ui quality standards before creating a pull request. ## How to Use This skill will guide you through a complete review of your changes to ensure: - Code quality and consistency - Documentation completeness - Testing coverage - No breaking changes - Follows contribution guidelines ## Workflow ### PHASE 1: Identify Changes **Step 1.1: Check Git Status** ```bash git status ``` Review: - What files were modified? - Are any generated files included? (should NOT be committed) - Are source files in correct locations? **Step 1.2: Review Diff** ```bash git diff ``` Analyze: - Are changes focused and relevant? - Any accidental changes? - Debug code left in? **CHECKPOINT: Ensure only source files are modified, no generated files in apps/** ### PHASE 2: Code Quality Review Run through this comprehensive checklist with the user: ```markdown ## Code Quality Checklist ### General Code Quality - [ ] No `console.log()` statements - [ ] No commented-out code - [ ] No TODO comments (or documented in issues) - [ ] No debugging code - [ ] No unused imports - [ ] No unused variables - [ ] Meaningful variable/function names - [ ] Code is DRY (no duplication) - [ ] Proper error handling - [ ] No hardcoded values (use constants) ### TypeScript - [ ] All types explicitly defined - [ ] No `any` types (use proper types) - [ ] Interfaces/types exported - [ ] Generic types used correctly - [ ] Type guards where needed - [ ] Proper type inference - [ ] No TypeScript errors (`yarn tsc --noEmit`) ### Code Style - [ ] Consistent formatting (use Prettier) - [ ] Proper indentation - [ ] Consistent naming conventions - [ ] Import order organized - [ ] Proper file organization ``` **CHECKPOINT: Confirm code quality standards met** ### PHASE 3: Component Structure Review For component changes: ```markdown ## Component Structure Checklist ### Component Architecture - [ ] Follows compound component pattern (if multi-part) - [ ] Uses `React.forwardRef` correctly - [ ] Proper TypeScript generic types - [ ] Props interface defined and exported - [ ] Default props defined (or use default parameters) - [ ] Display name set (`Component.displayName = '...'`) ### Sub-components (if compound) - [ ] All sub-components implemented - [ ] Context provider/consumer (if needed) - [ ] `withStyleContext` used for parent component - [ ] `useStyleContext` used in children - [ ] All sub-components exported ### Props - [ ] Destructured properly - [ ] Spread props to underlying component (`{...props}`) - [ ] `className` prop supported - [ ] `ref` forwarded correctly - [ ] Event handlers have correct signature - [ ] Boolean props prefixed with `is`/`has`/`should` ### Exports - [ ] All components exported from index.tsx - [ ] Named exports (not default) - [ ] Types exported - [ ] Exported from src/components/ui/index.tsx - [ ] No missing exports ``` **CHECKPOINT: Confirm component structure follows patterns** ### PHASE 4: Styling Review ```markdown ## Styling Checklist ### NativeWind/Tailwind - [ ] Only uses className prop (not style prop for Tailwind) - [ ] Styles defined in styles.tsx - [ ] Uses `tva()` for variants - [ ] Base styles defined - [ ] All variants defined - [ ] Default variants specified - [ ] Parent variants (if sub-component) ### Responsive Design - [ ] Mobile-first approach - [ ] Breakpoints used correctly - [ ] Works on small screens - [ ] Works on large screens - [ ] No horizontal overflow ### Dark Mode - [ ] Dark mode styles defined (if applicable) - [ ] Uses theme colors (not hardcoded) - [ ] Contrasts accessible in both modes ### Consistency - [ ] Spacing matches design system - [ ] Colors from theme - [ ] Font sizes consistent - [ ] Border radius consistent ``` **CHECKPOINT: Confirm styling follows guidelines** ### PHASE 5: Accessibility Review ```markdown ## Accessibility Checklist ### ARIA - [ ] Appropriate ARIA roles - [ ] `aria-label` where needed - [ ] `aria-labelledby` for associations - [ ] `aria-describedby` for descriptions - [ ] `aria-expanded` for expandable elements - [ ] `aria-disabled` for disabled elements - [ ] `aria-checked` for checkboxes/radios - [ ] `aria-selected` for selectable items - [ ] `aria-hidden` for decorative elements - [ ] `aria-live` for dynamic updates ### Keyboard Navigation - [ ] Tab order is logical - [ ] Enter activates buttons/links - [ ] Space activates buttons - [ ] Escape closes modals/overlays - [ ] Arrow keys navigate (where applicable) - [ ] Focus visible (outline/ring) - [ ] Focus management correct - [ ] No keyboard traps ### Screen Readers - [ ] Component announces correctly - [ ] Labels are descriptive - [ ] State changes announced - [ ] Error messages announced - [ ] Tested with VoiceOver/TalkBack ### Semantic Markup (Web) - [ ] Uses semantic HTML - [ ] Proper heading hierarchy - [ ] Lists use