Improves ESLint/Next/TypeScript integration (#929)

* Improves ESLint/Next/TypeScript integration

* Adds linting to pipeline

* Updates CLAUDE.md to run linting

Author: nicklemmon

.eslint.config.mjs

@@ -1,4 +1,4 @@
-name: Build and test
+name: QA
 
 on: [push, pull_request]
 
@@ -16,3 +16,12 @@ jobs:
           build: npm run build
           start: npm start
           wait-on: 'http://localhost:3000'
+  lint:
+    runs-on: ubuntu-24.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install dependencies
+        run: npm ci && npm i --os=linux --cpu=x64 sharp
+      - name: Run ESLint
+        run: npm run lint

.github/workflows/build-and-test.yml .github/workflows/qa.yml.github/workflows/build-and-test.yml renamed to .github/workflows/qa.yml

@@ -100,6 +100,18 @@ Uses Shiki (migrated from Prism) with night-owl theme. Configured in `src/pages/
 - Test files: `404-page.cy.js`, `about-page.cy.js`, `index-page.cy.js`, `navigation.cy.js`
 - Uses `@testing-library/cypress` and `cypress-real-events`
 
+## Code Quality
+
+**IMPORTANT: Always run linting after implementing changes**
+
+After making any code changes (adding features, fixing bugs, refactoring), you MUST run:
+
+```bash
+npm run lint
+```
+
+If linting errors are found, fix them before considering the task complete. This ensures code quality and consistency across the codebase.
+
 ## Key Constraints
 
 - Must use `--webpack` flag with Next.js commands (required for mdx-bundler)

CLAUDE.md

@@ -0,0 +1,104 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+import cypressPlugin from 'eslint-plugin-cypress'
+import prettierConfig from 'eslint-config-prettier'
+
+const eslintConfig = [
+  // 1. Base ESLint recommended rules
+  js.configs.recommended,
+
+  // 2. TypeScript ESLint recommended rules (without type-checking for performance)
+  ...tseslint.configs.recommended,
+
+  // 3. React Hooks configuration for all JS/TS files
+  {
+    files: ['**/*.{ts,tsx,js,jsx}'],
+    plugins: {
+      'react-hooks': reactHooksPlugin,
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+    },
+  },
+
+  // 4. TypeScript-specific overrides
+  {
+    files: ['**/*.{ts,tsx}'],
+    rules: {
+      // Allow unused vars with underscore prefix (common pattern)
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
+      // Allow explicit any when necessary
+      '@typescript-eslint/no-explicit-any': 'warn',
+      // Allow require statements in config files
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+
+  // 5. Cypress test files
+  {
+    files: ['cypress/**/*.{js,ts}'],
+    plugins: {
+      cypress: cypressPlugin,
+    },
+    languageOptions: {
+      globals: {
+        ...cypressPlugin.environments.globals.globals,
+      },
+    },
+    rules: {
+      ...cypressPlugin.configs.recommended.rules,
+      // Cypress commands create false positives
+      'no-undef': 'off',
+      // Allow require() in Cypress files (CommonJS)
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+
+  // 6. Node.js scripts (build scripts, config files)
+  {
+    files: ['scripts/**/*.{js,mjs}', '*.config.{js,ts,mjs}'],
+    languageOptions: {
+      globals: {
+        process: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+        console: 'readonly',
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+      'no-console': 'off',
+    },
+  },
+
+  // 7. Prettier integration (must be last to override formatting rules)
+  prettierConfig,
+
+  // 8. Ignore patterns
+  {
+    ignores: [
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'public/**',
+      'coverage/**',
+      '.cache/**',
+      'dist/**',
+      'build/**',
+      '*.min.js',
+      'next-env.d.ts',
+    ],
+  },
+]
+
+export default eslintConfig