Add import organization rules for JavaScript/TypeScript

- Create markdown rules for import grouping and spacing
- Define clear import order guidelines for React/TS projects
- Provide comprehensive examples of import organization
- Ensure compliance with eslint import/order rules

Author: pstackebrandt

.cursor/rules/console-commands-for-powershell.mdc

@@ -1,18 +1,17 @@
 ---
 description: PowerShell 7 Command Generation (Not Bash)
-globs: ["*.ps1", "*.psm1", "*.psd1", "*.md", "*.txt"]
+globs: "*.ps1", "*.psm1", "*.psd1", "*.md", "*.txt"
 alwaysApply: true
 ---
+Generate PowerShell 7 commands for Windows 11, not Bash syntax:
 
-When generating console commands, use PowerShell 7 syntax for Windows 11, NOT bash syntax. Remember these key differences:
+- PowerShell cmdlets: Get-ChildItem (not ls), Set-Location (not cd)
+- Paths use backslashes (C:\Users\)
+- Flags use single hyphen (-Force)
+- Variables: $variable, string interpolation: "$()"
+- Environment variables: $env:VARIABLE
+- Piping: | (with proper object handling)
+- Command separation: ; (not &&)
+- Redirection: >, >>, 2>
 
-- Use PowerShell cmdlets like Get-ChildItem (not ls), Set-Location (not cd), etc.
-- Use backslashes for paths (C:\Users\) not forward slashes 
-- Command flags use hyphen prefix (-Force) not double-hyphen (--force)
-- Variables use $ prefix ($variable) and string interpolation uses "$()"
-- Environment variables use $env:VARIABLE format
-- Piping uses | operator but cmdlets expect specific object input
-- Command concatenation uses ; or separate lines, not && 
-- Redirection uses >, >>, 2> (not 2>&1)
-
-Always prefer PowerShell-native approaches over legacy cmd.exe commands.
+Prefer PowerShell-native approaches over cmd.exe commands.

.cursor/rules/import-groups-spacing.mdc

@@ -0,0 +1,44 @@
+---
+description: Empty Lines Between Import Groups
+globs: "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"
+alwaysApply: true
+---
+When organizing imports in JavaScript/TypeScript files, maintain at least one empty line between different import groups to follow the eslint import/order rule.
+
+Import groups are typically arranged in this order:
+1. Built-in Node.js modules
+2. External npm packages/modules
+3. Internal project imports (components, utils, etc.)
+4. Stylesheet imports (CSS, SCSS, etc.)
+5. Asset imports (images, fonts, etc.)
+
+Example of proper import grouping:
+
+```javascript
+// Built-in modules
+import path from 'path';
+import fs from 'fs';
+
+// External packages
+import React, { useState } from 'react';
+import classnames from 'classnames';
+
+// Internal project imports
+import Button from '../components/Button';
+import { formatDate } from '../utils/date';
+
+// Stylesheets
+import '../styles/components/app.scss';
+
+// Assets
+import logo from '../assets/logo.svg';
+```
+
+This pattern:
+- Improves code readability
+- Makes import sections visually distinct
+- Complies with eslint import/order rule
+- Helps maintain consistent code organization
+
+Benefits: Improves readability, makes code organization consistent, and satisfies linting requirements.
+

.cursor/rules/import-order-rules.mdc

@@ -0,0 +1,53 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+---
+description: Import Order Requirements for React Components
+globs: "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"
+alwaysApply: true
+---
+# Import Ordering Rules
+
+For proper linting compliance, imports must follow this specific ordering pattern:
+
+## Order by Import Group
+1. External/npm modules (React, react-router-dom, etc.)
+2. Blank line
+3. Internal project modules (components, utilities)
+4. Stylesheets (CSS, SCSS)
+5. Component imports in alphabetical order
+6. Image/asset imports according to specific pattern
+
+## Image/Asset Import Order
+For image imports with different sizes and formats:
+
+1. Group by size first (large, medium, small)
+2. For each size group, order by format (.jpg first, then .webp)
+
+### Example
+```javascript
+// External packages
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+// Internal components/utilities
+import PageTitle from './page-title';
+import '../styles/components/welcome.scss';
+import ImageWithContent from '../components/ImageWithContent';
+import LinkWithDescription from '../components/LinkWithDescription';
+
+// Images - ordered by size first, then format
+import portraitImageLarge from '../images/portrait-large.jpg';
+import portraitImageLargeWebp from '../images/portrait-large.webp';
+import portraitImageMedium from '../images/portrait-medium.jpg';
+import portraitImageMediumWebp from '../images/portrait-medium.webp';
+import portraitImageSmall from '../images/portrait-small.jpg';
+import portraitImageSmallWebp from '../images/portrait-small.webp';
+```
+
+This pattern satisfies ESLint import/order rules and maintains consistent code organization.
+```
+
+</rewritten_file>