# Frontend Refactoring & UI Standardization Prompt Act as a world-class Senior Frontend Architect, UI Engineer, and Design System expert. Your objective is to refactor and standardize the entire frontend application to production-grade quality by following industry best practices, scalable architecture, and clean code principles. ## Primary Goal Transform the existing application into a clean, maintainable, reusable, responsive, and highly consistent frontend without changing any business logic or existing functionality. --- # 1. Frontend Architecture Implement a scalable frontend architecture by following feature-based organization. - Organize code into reusable modules. - Separate business logic from UI. - Keep components focused on a single responsibility. - Avoid duplicated logic throughout the application. - Create a clear folder structure. - Use shared utilities wherever possible. - Follow feature-first architecture instead of dumping everything into common folders. --- # 2. Code Standards Enforce strict coding standards throughout the project. - No component should exceed **500 lines of code**. - Prefer keeping components between **150–300 lines** whenever possible. - Split large pages into smaller reusable components. - Extract repeated JSX into reusable components. - Extract repeated logic into custom hooks. - Move API logic into service files. - Move constants into dedicated constant files. - Move validation into separate files. - Move helper functions into utility files. --- # 3. DRY Principles Strictly follow the DRY (Don't Repeat Yourself) principle. - Remove duplicated UI. - Remove duplicated styles. - Remove duplicated business logic. - Remove duplicated API calls. - Reuse existing components instead of recreating them. - Centralize repeated logic. --- # 4. Reusable Component Library Create reusable components for all common UI patterns. Examples include: - Button - Input - Textarea - Select - Multi Select - Search Input - Date Picker - Combobox - Modal - Drawer - Dialog - Confirmation Dialog - Table - Pagination - Badge - Card - Empty State - Loading State - Skeleton - Avatar - Tooltip - Popover - Dropdown - Tabs - Accordion - Alert - Toast - Breadcrumb - Status Badge - Section Header - Form Field Wrapper - Page Header - Filter Panel - Search Bar - Action Buttons - Data Cards Every page should utilize these common components instead of creating new ones. --- # 5. Typography System Create a consistent typography system across the application. Current typography appears oversized. Refine it to create a more professional enterprise UI. Standardize: - Font Family - Font Size - Font Weight - Line Height - Letter Spacing Suggested scale: - Page Title: 24px - Section Title: 20px - Card Title: 18px - Table Header: 13px - Body Text: 14px - Secondary Text: 13px - Labels: 13px - Input Text: 14px - Button Text: 14px - Caption: 12px Maintain consistent typography across all screens. --- # 6. Spacing System Implement a consistent spacing system. Standardize: - Padding - Margin - Gap - Section spacing - Card spacing - Form spacing Avoid random spacing values throughout the application. --- # 7. Component Sizing Reduce oversized UI elements to create a cleaner, more compact enterprise application. Update: - Popup sizes - Modal widths - Dialog heights - Table row heights - Table header heights - Form fields - Buttons - Dropdowns - Cards - Navigation - Sidebar spacing The interface should feel lightweight, balanced, and visually polished. --- # 8. Tables Refactor all tables to follow consistent standards. Ensure: - Compact row height - Consistent header styling - Uniform padding - Better column spacing - Proper alignment - Responsive behavior - Sticky headers where appropriate - Reusable table component - Pagination component - Empty state - Loading state - Sort indicators - Filter integration --- # 9. Modal & Popup Standards Standardize all modals. Requirements: - Consistent width - Consistent padding - Consistent header - Consistent footer - Standard button placement - Responsive behavior - Smooth animations - Proper scroll handling - Keyboard accessibility - Reusable modal component Avoid oversized dialogs. --- # 10. Form Standards All forms should follow a single design system. Maintain consistency for: - Label placement - Required indicators - Validation messages - Error states - Success states - Disabled states - Placeholder styles - Input heights - Border radius - Focus styles --- # 11. Color System Centralize all colors. Do not hardcode colors. Use semantic color tokens such as: - Primary - Secondary - Success - Warning - Error - Info - Background - Surface - Border - Text Primary - Text Secondary --- # 12. Responsive Standards Ensure the application is fully responsive. Optimize for: - Mobile - Tablet - Laptop - Desktop - Large screens No layout should break across screen sizes. --- # 13. Performance Improve frontend performance. - Lazy load pages. - Lazy load heavy components. - Memoize expensive computations. - Avoid unnecessary re-renders. - Optimize bundle size. - Remove unused code. - Optimize images and icons. --- # 14. Accessibility Follow accessibility best practices. - Keyboard navigation - Proper ARIA attributes - Focus management - Color contrast - Semantic HTML - Screen reader support --- # 15. Folder Structure Maintain a clean folder structure. - components/ - features/ - hooks/ - layouts/ - pages/ - services/ - utils/ - constants/ - contexts/ - types/ - assets/ - styles/ Every folder should have a clear responsibility. --- # 16. Naming Conventions Use consistent naming conventions. - PascalCase for components - camelCase for variables and functions - UPPER_SNAKE_CASE for constants - Feature-based file organization Avoid ambiguous names. --- # 17. Styling Standards Use a consistent styling approach. - Prefer Tailwind utility classes. - Extract repeated class combinations into reusable components or utilities. - Avoid inline styles unless absolutely necessary. - Maintain consistent border radius, shadows, spacing, and transitions. --- # 18. Final Deliverables Refactor the entire application to ensure: - Clean architecture - Maintainable codebase - Reusable components - Consistent typography - Compact and polished UI - Smaller, balanced popups and tables - Unified spacing system - Enterprise-grade design system - Fully responsive layouts - Improved performance - Better accessibility - Strict adherence to SOLID, DRY, KISS, and Clean Code principles Do not change any business logic or application behavior. The objective is to improve code quality, maintainability, scalability, and visual consistency while preserving all existing functionality.