This is a comprehensive, reusable prompt for analyzing and improving React components in the J StaR Films platform. Use this prompt whenever you need to examine a component for compliance with coding guidelines, styling standards, and best practices.
- Copy this entire prompt
- Replace
[COMPONENT_PATH]with the actual component file path - Replace
[COMPONENT_NAME]with the component name - Paste into your conversation with the AI assistant
# Component Analysis & Improvement Request
Please examine the following component and ensure it aligns with our project guidelines:
**Component to Analyze:** [COMPONENT_PATH]
**Component Name:** [COMPONENT_NAME]
## Required Analysis Steps
### 1. 📋 Initial Examination
- Read the component file completely
- Analyze the code structure and organization
- Identify the component's purpose and functionality
- Check for any immediate issues or violations
### 2. 📏 Coding Guidelines Compliance Check
Examine against `docs/coding_guidelines.md`:
- [ ] Component size (200-line rule compliance)
- [ ] Single Responsibility Principle adherence
- [ ] Proper TypeScript usage and type safety
- [ ] Component naming conventions (PascalCase)
- [ ] Function naming conventions (camelCase)
- [ ] Proper use of React hooks and effects
- [ ] Documentation (TSDoc/JSDoc comments)
- [ ] Import organization and efficiency
- [ ] Props interface definition and usage
- [ ] Event handler naming (handle* prefix)
- [ ] Formatting compliance (Prettier standards)
### 3. 🎨 Styling Guidelines Compliance Check
Examine against `docs/Styling-in-Next-and-Tailwind-v4.md`:
- [ ] Tailwind CSS v4 usage and @theme integration
- [ ] Custom color token usage (primary, accent)
- [ ] Responsive design implementation
- [ ] Dark mode support (dark: variants)
- [ ] Performance considerations (backdrop-filter, etc.)
- [ ] Animation and transition usage
- [ ] CSS custom properties and variables
- [ ] Mobile-first approach validation
### 4. 📱 Mobile-First Responsive Design Check
Examine against `docs/features/MobileFirstResponsiveDesign.md`:
- [ ] Mobile-first breakpoint usage (sm:, md:, lg:, xl:)
- [ ] Responsive grid systems implementation
- [ ] Touch-friendly interaction design
- [ ] Responsive typography scaling
- [ ] Container and layout responsiveness
- [ ] Navigation and UI adaptation
- [ ] Performance on mobile devices
### 5. 🔍 Code Quality Assessment
- [ ] Component reusability evaluation
- [ ] Performance optimization opportunities
- [ ] Accessibility compliance (WCAG guidelines)
- [ ] Bundle size impact assessment
- [ ] Error handling and edge cases
- [ ] Testing considerations
- [ ] Future maintenance considerations
### 6. 📊 Component Metrics
- [ ] Total lines of code
- [ ] Number of props/interfaces
- [ ] External dependencies count
- [ ] Performance impact assessment
- [ ] Accessibility score
- [ ] Mobile responsiveness score
## Required Actions
### Phase 1: Analysis Report
Provide a comprehensive analysis report covering:
1. **Compliance Status** - Which guidelines are met/violated
2. **Issue Identification** - Specific problems found
3. **Severity Assessment** - Critical, major, minor issues
4. **Impact Analysis** - How issues affect performance/UX/maintainability
### Phase 2: Recommendations
For each identified issue, provide:
1. **Specific Fix** - Exact code changes needed
2. **Rationale** - Why the fix is necessary
3. **Implementation Priority** - High/Medium/Low
4. **Breaking Change Assessment** - Will this affect other components?
### Phase 3: Implementation Plan
Create a structured improvement plan:
1. **Immediate Fixes** - Critical issues requiring immediate attention
2. **Short-term Improvements** - Major issues to address soon
3. **Long-term Enhancements** - Minor improvements and optimizations
4. **Breaking Change Management** - How to handle API changes
### Phase 4: Minor Improvements Implementation
If the component is generally compliant but has minor issues:
1. **Extract reusable components** (if applicable)
2. **Add proper documentation** (TSDoc comments)
3. **Improve type safety** (better TypeScript usage)
4. **Optimize performance** (minor optimizations)
5. **Enhance accessibility** (ARIA labels, semantic HTML)
### Phase 5: Documentation Creation
Create comprehensive documentation at `docs/features/[ComponentName].md` including:
1. **Component Overview** - Purpose, goals, and functionality
2. **Architecture** - Structure, data flow, and dependencies
3. **API Reference** - Props, interfaces, and usage examples
4. **Styling Guide** - Design system integration and customization
5. **Performance** - Optimization details and metrics
6. **Accessibility** - Compliance and screen reader support
7. **Integration** - How it works with other components
8. **Usage Examples** - Code samples for different scenarios
9. **Customization** - How to modify content and appearance
10. **Testing** - Strategies and best practices
11. **Maintenance** - Update procedures and troubleshooting
12. **Future Plans** - Enhancement roadmap and extensibility
## Quality Assurance Checklist
### Pre-Implementation
- [ ] All external dependencies are properly imported
- [ ] Component follows established file structure patterns
- [ ] No console.log statements in production code
- [ ] All images have proper alt attributes
- [ ] Component is keyboard accessible
- [ ] Mobile responsiveness verified
### Post-Implementation
- [ ] Component renders without errors
- [ ] All props are properly typed
- [ ] Responsive design works across breakpoints
- [ ] Dark mode support functional
- [ ] Performance impact assessed
- [ ] Documentation updated and accurate
- [ ] No breaking changes introduced
## Success Criteria
### Code Quality
- ✅ Passes all linting rules
- ✅ Follows TypeScript best practices
- ✅ Implements proper error boundaries
- ✅ Uses semantic HTML elements
- ✅ Maintains consistent code style
### Performance
- ✅ Bundle size impact < 5KB increase
- ✅ First paint < 1.5 seconds
- ✅ No layout shift issues
- ✅ Optimized images and assets
- ✅ Efficient re-rendering
### User Experience
- ✅ Fully responsive across all devices
- ✅ Accessible to screen readers
- ✅ Keyboard navigation support
- ✅ Touch-friendly on mobile
- ✅ Consistent with design system
### Maintainability
- ✅ Comprehensive documentation
- ✅ Clear component structure
- ✅ Proper separation of concerns
- ✅ Easy to test and modify
- ✅ Follows established patterns
## Emergency Procedures
### If Component Breaks
1. **Immediate Rollback** - Revert to last working version
2. **Error Analysis** - Check console for specific errors
3. **Dependency Check** - Verify all imports are correct
4. **Type Check** - Run TypeScript compiler for issues
5. **Testing** - Verify component works in isolation
### If Performance Issues
1. **Bundle Analysis** - Check for unnecessary imports
2. **Image Optimization** - Verify Next.js Image usage
3. **Re-rendering** - Check for unnecessary re-renders
4. **Lazy Loading** - Implement for heavy components
5. **Code Splitting** - Consider dynamic imports
## Final Deliverables
After completing the analysis and improvements:
1. **✅ Updated Component** - Improved and compliant code
2. **✅ Documentation** - Comprehensive guide at `docs/features/[ComponentName].md`
3. **✅ Test Results** - Verification of functionality
4. **✅ Performance Report** - Before/after metrics
5. **✅ Integration Status** - Compatibility with existing codebase
---
## Quick Reference
### File Paths
- **Component:** `src/features/[FeatureName]/components/[ComponentName].tsx`
- **Documentation:** `docs/features/[ComponentName].md`
- **Guidelines:** `docs/coding_guidelines.md`
- **Styling:** `docs/Styling-in-Next-and-Tailwind-v4.md`
- **Responsive:** `docs/features/MobileFirstResponsiveDesign.md`
### Common Commands
```bash
# Check TypeScript errors
npm run type-check
# Run linting
npm run lint
# Build for production
npm run build
# Start development server
npm run dev
- 🔴 Critical - Breaking functionality, security issues
- 🟡 Major - Performance issues, accessibility violations
- 🟢 Minor - Code style, documentation improvements
Use this prompt for consistent, thorough component analysis and improvement across the entire J StaR Films platform.
## How to Use This Prompt
1. **Copy the entire prompt above**
2. **Replace the placeholders:**
- `[COMPONENT_PATH]` → e.g., `src/features/HomePage/components/ServicesSection.tsx`
- `[COMPONENT_NAME]` → e.g., `ServicesSection`
3. **Paste into your conversation**
4. **The AI will run the complete analysis procedure**
## What This Prompt Covers
### ✅ Complete Analysis Workflow
- **Coding Guidelines** compliance check
- **Styling Standards** verification
- **Mobile-First Design** assessment
- **Performance & Accessibility** evaluation
### ✅ Structured Improvement Process
- **Issue identification** with severity levels
- **Implementation planning** with priorities
- **Quality assurance** checklists
- **Documentation requirements**
### ✅ Quality Assurance
- **Pre and post-implementation** checks
- **Success criteria** for each quality dimension
- **Emergency procedures** for issues
- **Performance monitoring** guidelines
### ✅ Deliverable Standards
- **Updated component** with improvements
- **Comprehensive documentation**
- **Testing verification**
- **Integration confirmation**
This prompt ensures consistent, thorough analysis and improvement of every component in your codebase, maintaining high quality standards across the entire J StaR Films platform.