development-workflow-react

Development Workflow & Quality Assurance for React + Vite

🚀 MANDATORY: Always Run Linting Commands During Development

CRITICAL: Before making any code changes, always run these linting commands to ensure design system compliance:

# 🎨 Check for inline styles that should use Tailwind classes
npm run lint:styles

# 🎨 Check for non-Modus colors (hex, RGB, Tailwind colors)
npm run lint:colors

# 🎨 Check for non-Modus icons (Font Awesome, Material Icons, etc.)
npm run lint:icons

# 🎨 Check for semantic HTML elements (h1, section, header, etc.)
npm run lint:semantic

# 🎨 Check for border violations (Tailwind color classes in borders)
npm run lint:borders

# 🔍 Run all linting checks at once
npm run lint:all

📋 Pre-Development Checklist

Before starting any new feature or component:

1. ✅ Run Design System Lints:

   npm run lint:styles    # Check inline styles
   npm run lint:colors    # Check color usage
   npm run lint:icons     # Check icon usage
   npm run lint:semantic  # Check semantic HTML elements
   npm run lint:borders   # Check border violations
   

2. ✅ Verify Theme Compatibility:

   • Test with all 6 Modus themes (classic/modern, light/dark, connect themes)
   • Ensure components work in both light and dark modes

3. ✅ Check Component Architecture:

   • Use single configurable components (not multiple specific ones)
   • Follow Modus Web Components patterns
   • Use proper event handling with refs

🔄 Development Workflow

Every time you make changes:

1. Make your changes to components/pages
2. Run linting commands to catch violations early:

   npm run lint:all
   

3. Fix any violations before continuing
4. Test with Chrome DevTools to validate visual changes
5. Commit only when all lints pass

🚨 Common Violations to Watch For

Inline Styles (lint:styles):

// ❌ VIOLATION: Inline styles
style={{ backgroundColor: "var(--modus-wc-color-base-page)" }}
style={{ marginRight: "8px" }}
style={{ color: "var(--modus-wc-color-base-content)" }}

// ✅ CORRECT: Tailwind classes
className="bg-background mr-2 text-foreground"