Run Lint Checks

Run Lint Checks

Automatically run all linting and quality checks for the SolidJS + Vite project to ensure design system compliance, type safety, and code quality.

When to Use

• Before completing any task - Always run lint checks before marking tasks as complete
• After making code changes - Run checks after modifying TypeScript, TSX, or CSS files
• Before committing code - Ensure all quality gates pass before committing
• When user requests - Run checks when explicitly requested by the user
• During code review - Verify code quality and design system compliance

Instructions

Mandatory Pre-Completion Checklist

CRITICAL: Before marking any development task as complete, you MUST:

1. Run all lint checks using npm run lint:all
2. Fix any violations found
3. Verify TypeScript type checking passes
4. Ensure all design system compliance checks pass

Running Lint Checks

Execute the comprehensive lint check command:

npm run lint:all

This command runs all checks in sequence:

• TypeScript type checking (npm run type-check)
• Modus icons validation (npm run lint:icons)
• Semantic HTML compliance (npm run lint:semantic)
• Color compliance (npm run lint:colors)
• Inline styles validation (npm run lint:styles)
• Border violations (npm run lint:borders)
• Opacity utilities (npm run lint:opacity)
• Icon name validation (npm run lint:icon-names)

Individual Lint Commands

If you need to run checks individually:

# ESLint (SolidJS/TypeScript)
npm run lint

# TypeScript type checking
npm run type-check

# Modus icons library validation
npm run lint:icons

# Semantic HTML compliance
npm run lint:semantic

# Design system color compliance
npm run lint:colors

# Inline styles validation
npm run lint:styles

# Border pattern violations
npm run lint:borders

# Opacity utilities validation
npm run lint:opacity

# Icon name validation
npm run lint:icon-names

Handling Violations

When violations are found:

1. Read the error messages carefully - Each lint script provides specific file locations and violation details
2. Fix violations immediately - Don't proceed until all violations are resolved
3. Re-run checks - After fixing, run npm run lint:all again to verify
4. Document fixes - If a fix requires architectural changes, explain the reasoning

Common Violations to Fix

Inline Styles

// ❌ VIOLATION
<div style={{ backgroundColor: 'var(--modus-wc-color-base-page)' }}>
<div style={{ marginRight: '8px' }}>

// ✅ CORRECT
<div class="bg-background mr-2 text-foreground">

Color Usage

// ❌ VIOLATION
<div style={{ backgroundColor: '#ffffff' }}>
<div class="bg-blue-500 text-red-400">

// ✅ CORRECT
<div class="bg-background text-foreground">

Icon Usage

// ❌ VIOLATION
<i class="fa fa-home"></i>
<i class="material-icons">home</i>

// ✅ CORRECT
<i class="modus-icons">home</i>

Semantic HTML

// ❌ VIOLATION
<h1>Title</h1>
<p>Content</p>
<section>Section</section>

// ✅ CORRECT (use div elements only)
<div class="text-4xl font-bold">Title</div>
<div class="text-base">Content</div>
<div class="bg-card">Section</div>

Border Violations

// ❌ VIOLATION
<div class="border border-red-500">Error message</div>

// ✅ CORRECT
<div class="border-destructive">Error message</div>

Opacity Violations

// ❌ VIOLATION
<div class="text-foreground/80">Text with opacity</div>

// ✅ CORRECT
<div class="text-foreground-80">Text with opacity</div>

Quality Gates

All of these must pass before code is considered complete:

• npm run lint - 0 ESLint errors
• npm run type-check - 0 TypeScript errors
• npm run lint:icons - 0 icon violations
• npm run lint:semantic - 0 semantic HTML violations
• npm run lint:colors - 0 color violations
• npm run lint:styles - 0 inline style violations
• npm run lint:borders - 0 border violations
• npm run lint:opacity - 0 opacity violations
• npm run lint:icon-names - 0 invalid icon names

SolidJS-Specific Patterns

Component Patterns

• Use wrapper components from src/components/ not web components directly
• Use let ref + createEffect for event listeners with proper cleanup
• Let Modus components manage their own state (don't control from SolidJS signals)

Event Handling

// ✅ CORRECT: Event listener pattern
createEffect(() => {
  const component = componentEl;
  if (!component) return;

  const handleEvent = (event: Event) => {
    props.onEvent?.(event as CustomEvent<EventDetailType>);
  };

  if (props.onEvent) {
    component.addEventListener('eventName', handleEvent);
  }

  return () => {
    if (props.onEvent) {
      component.removeEventListener('eventName', handleEvent);
    }
  };
});

Conditional Props

// ✅ CORRECT: Conditional spreading
<modus-wc-component
  {...(color() && { color: color() })}
  {...(variant() && { variant: variant() })}
  size={size()}
/>

Notes

• Lint checks are fast and should be run frequently during development
• Some violations may require architectural changes - discuss these with the user if needed
• The lint:all command stops on first failure - fix issues sequentially
• All lint scripts are located in scripts/ directory
• These checks enforce the Modus Design System compliance requirements