igny8/frontend/FRONTEND-AUDIT-PLAN.md

Frontend Standardization Audit Plan

Objective

Systematically audit every page and component to ensure 100% consistency with the design system defined in DESIGN_SYSTEM.md and eliminate all non-standard code patterns.

---

Phase 1: Automated Detection Scripts

1.1 Run These Detection Commands

# Save all results to audit-results/ folder
mkdir -p /data/app/igny8/frontend/audit-results

# 1. Find ALL inline styles (style={{ }})
grep -rn "style={{" src/pages/ src/components/ --include="*.tsx" > audit-results/inline-styles.txt

# 2. Find ALL sx={{ }} (MUI-style inline)
grep -rn "sx={{" src/pages/ src/components/ --include="*.tsx" > audit-results/sx-styles.txt

# 3. Find ALL hardcoded hex colors
grep -rn "#[0-9a-fA-F]\{3,6\}" src/pages/ src/components/ --include="*.tsx" > audit-results/hardcoded-hex.txt

# 4. Find ALL rgb/rgba colors
grep -rn "rgb\|rgba" src/pages/ src/components/ --include="*.tsx" > audit-results/rgb-colors.txt

# 5. Find ALL non-standard gray classes (should use design tokens)
grep -rn "gray-[0-9]\{2,3\}" src/pages/ src/components/ --include="*.tsx" > audit-results/gray-classes.txt

# 6. Find ALL blue/red/green direct Tailwind (should use brand/success/error)
grep -rn "bg-blue-\|text-blue-\|border-blue-\|bg-red-\|text-red-\|bg-green-\|text-green-" src/pages/ src/components/ --include="*.tsx" > audit-results/direct-colors.txt

# 7. Find ALL external UI library imports
grep -rn "from '@mui\|from 'lucide-react\|from '@chakra\|from 'antd" src/pages/ src/components/ --include="*.tsx" > audit-results/external-imports.txt

# 8. Find ALL inline component definitions (const Component = () => inside pages)
grep -rn "const [A-Z][a-zA-Z]* = \(\)" src/pages/ --include="*.tsx" > audit-results/inline-components.txt

# 9. Find files NOT importing from ui/ folder
grep -L "from.*components/ui" src/pages/**/*.tsx > audit-results/missing-ui-imports.txt

# 10. Find duplicate button patterns (custom buttons instead of Button component)
grep -rn "<button\|<Button " src/pages/ --include="*.tsx" > audit-results/button-usage.txt

---

Phase 2: Manual Page-by-Page Audit Checklist

2.1 Page Groups to Audit (in order)

Priority	Group	Folder	Est. Files
1	Account	pages/account/	~6
2	Settings	pages/Settings/	~10
3	Sites	pages/Sites/	~8
4	Writer	pages/Writer/	~5
5	Planner	pages/Planner/	~3
6	Automation	pages/Automation/	~2
7	Optimizer	pages/Optimizer/	~3
8	Billing	pages/Billing/	~4
9	Other	Remaining pages	~10+

2.2 Per-Page Audit Checklist

For EACH .tsx file, check:

A. IMPORTS (Lines 1-30)

• No imports from @mui/material or @mui/icons-material
• No imports from lucide-react (use ../../icons instead)
• No imports from @chakra-ui, antd, or other UI libraries
• Uses Button from components/ui/button/Button
• Uses Modal from components/ui/modal
• Uses Alert from components/ui/alert/Alert
• Uses Badge from components/ui/badge/Badge
• Uses Dropdown from components/ui/dropdown/Dropdown
• Uses Spinner from components/ui/spinner/Spinner
• Uses Tooltip from components/ui/tooltip/Tooltip
• Uses icons from ../../icons or @/icons

B. INLINE STYLES (Search entire file)

• No style={{ patterns
• No sx={{ patterns
• No inline className with hardcoded hex (e.g., text-[#xxx])

C. COLOR USAGE (Search entire file)

• No hardcoded hex colors (#XXXXXX)
• No rgb() or rgba() values
• No direct Tailwind colors: blue-500, red-500, green-500
• Uses design tokens: brand-500, success-500, error-500, warning-500
• Gray scale uses: gray-50 through gray-900 (these ARE allowed)

D. COMPONENT PATTERNS

• No inline component definitions (components defined inside the page file)
• No duplicate code that exists in components/ui/
• No custom button implementations (use Button component)
• No custom modal implementations (use Modal component)
• No custom alert/toast implementations (use Alert component)
• No custom dropdown implementations (use Dropdown component)

E. DARK MODE SUPPORT

• All backgrounds have dark mode variant: bg-white dark:bg-gray-900
• All text colors have dark mode: text-gray-900 dark:text-white
• All borders have dark mode: border-gray-200 dark:border-gray-700

F. FORM ELEMENTS

• Input fields use consistent styling pattern
• Select dropdowns use consistent styling pattern
• Checkboxes/radios use consistent styling pattern
• Form labels use consistent styling pattern

---

Phase 3: Component Audit

3.1 Standard Components Inventory

These are the ONLY allowed UI component sources:

Component	Import Path	Usage
Button	components/ui/button/Button	All buttons
Modal	components/ui/modal	All modals/dialogs
Alert	components/ui/alert/Alert	All alerts/notifications
Badge	components/ui/badge/Badge	All badges/chips/tags
Dropdown	components/ui/dropdown/Dropdown	All dropdown menus
Spinner	components/ui/spinner/Spinner	All loading states
Tooltip	components/ui/tooltip/Tooltip	All tooltips
Card	components/ui/card/*	All card containers
Table	components/ui/table/*	All data tables
Tabs	components/ui/tabs/*	All tab interfaces
Progress	components/ui/progress/*	All progress bars

3.2 Non-Standard Components to Find & Replace

Pattern to Find	Replace With
<button className=...>	<Button> from ui/
<Dialog> or <dialog>	<Modal> from ui/
Custom alert divs	<Alert> from ui/
<Chip> or chip patterns	<Badge> from ui/
Custom loading spinners	<Spinner> from ui/
<Menu> patterns	<Dropdown> from ui/

---

Phase 4: Style Token Mapping

4.1 Color Replacements

Wrong Pattern	Correct Pattern
bg-blue-500	bg-brand-500
text-blue-600	text-brand-600
border-blue-200	border-brand-200
bg-green-500	bg-success-500
text-green-600	text-success-600
bg-red-500	bg-error-500
text-red-600	text-error-600
bg-yellow-500	bg-warning-500
text-yellow-600	text-warning-600
#3B82F6	Use text-brand-500 or CSS var
#10B981	Use text-success-500 or CSS var
#EF4444	Use text-error-500 or CSS var

4.2 Allowed Gray Scale (DO NOT REPLACE)

gray-25, gray-50, gray-100, gray-200, gray-300, gray-400, 
gray-500, gray-600, gray-700, gray-800, gray-900, gray-950

---

Phase 5: Execution Tracking

5.1 Audit Progress Tracker

Page/Component	Audited	Issues Found	Fixed	Verified
pages/account/Profile.tsx	☐	-	☐	☐
pages/account/Team.tsx	☐	-	☐	☐
pages/account/Security.tsx	☐	-	☐	☐
pages/account/Preferences.tsx	☐	-	☐	☐
pages/account/Notifications.tsx	☐	-	☐	☐
pages/account/ApiKeys.tsx	☐	-	☐	☐
pages/Settings/General.tsx	☐	-	☐	☐
pages/Settings/Integrations.tsx	☐	-	☐	☐
pages/Settings/Notifications.tsx	☐	-	☐	☐
pages/Settings/Publishing.tsx	☐	-	☐	☐
pages/Settings/ContentDefaults.tsx	☐	-	☐	☐
pages/Settings/AIModels.tsx	☐	-	☐	☐
pages/Settings/ImageGeneration.tsx	☐	-	☐	☐
pages/Settings/SEO.tsx	☐	-	☐	☐
pages/Settings/Categories.tsx	☐	-	☐	☐
pages/Settings/Tags.tsx	☐	-	☐	☐
pages/Sites/SitesList.tsx	☐	-	☐	☐
pages/Sites/SiteDetail.tsx	☐	-	☐	☐
pages/Sites/SiteSettings.tsx	☐	-	☐	☐
pages/Sites/SiteDashboard.tsx	☐	-	☐	☐
pages/Sites/CreateSite.tsx	☐	-	☐	☐
pages/Sites/ContentCategories.tsx	☐	-	☐	☐
pages/Sites/ContentTags.tsx	☐	-	☐	☐
pages/Sites/Authors.tsx	☐	-	☐	☐
pages/Writer/*.tsx	☐	-	☐	☐
pages/Planner/*.tsx	☐	-	☐	☐
pages/Automation/*.tsx	☐	-	☐	☐
pages/Optimizer/*.tsx	☐	-	☐	☐
pages/Billing/*.tsx	☐	-	☐	☐
Add remaining pages...

5.2 Component Folder Audit

Component Folder	Audited	Issues	Fixed
components/ui/button/	☐	-	☐
components/ui/modal/	☐	-	☐
components/ui/alert/	☐	-	☐
components/ui/badge/	☐	-	☐
components/ui/dropdown/	☐	-	☐
components/ui/card/	☐	-	☐
components/ui/table/	☐	-	☐
components/ui/tabs/	☐	-	☐
components/common/	☐	-	☐
components/layout/	☐	-	☐

---

Phase 6: Reference Pages

6.1 Gold Standard Pages (Use as Reference)

These pages are correctly styled and should be used as reference:

• pages/Planner/Dashboard.tsx - Correct card layouts
• pages/Writer/Dashboard.tsx - Correct table patterns
• components/ui/* - All standard components

6.2 Reference Patterns

Correct Button Usage:

import { Button } from '../../components/ui/button/Button';

<Button variant="primary" tone="brand" size="md">
  Save Changes
</Button>

Correct Modal Usage:

import { Modal } from '../../components/ui/modal';

<Modal isOpen={isOpen} onClose={onClose} className="max-w-md p-6">
  {/* content */}
</Modal>

Correct Alert Usage:

import Alert from '../../components/ui/alert/Alert';

<Alert variant="success" title="Saved" message="Changes saved successfully" />

Correct Icon Usage:

import { CheckCircleIcon, ErrorIcon } from '../../icons';

<CheckCircleIcon className="h-5 w-5 text-success-500" />

---

Phase 7: Verification

7.1 Final Verification Checklist

After all fixes are applied, run:

# Should return 0 results for each:
grep -rn "from '@mui" src/pages/ src/components/ --include="*.tsx" | wc -l
grep -rn "from 'lucide-react" src/pages/ --include="*.tsx" | wc -l
grep -rn "style={{" src/pages/ --include="*.tsx" | wc -l
grep -rn "#[0-9a-fA-F]\{6\}" src/pages/ --include="*.tsx" | wc -l
grep -rn "bg-blue-\|bg-red-\|bg-green-" src/pages/ --include="*.tsx" | wc -l

7.2 Visual Verification

• Check each page in browser (light mode)
• Check each page in browser (dark mode)
• Verify all buttons look consistent
• Verify all modals look consistent
• Verify all forms look consistent
• Verify all colors match brand palette

---

Notes

• DO NOT replace gray-* classes - these are part of the design system
• DO replace blue/red/green with brand/error/success
• DO replace all inline styles with Tailwind classes
• DO replace all hardcoded hex with CSS variables or Tailwind classes
• DO extract inline components to separate files
• DO use standard ui/ components instead of custom implementations