@empline/preflight 1.0.20

package/dist/checks/ui/skeleton-size-consistency.js

@@ -0,0 +1,1239 @@
+#!/usr/bin/env tsx
+"use strict";
+/**
+ * Skeleton Size Consistency Preflight Check (Enhanced)
+ *
+ * Comprehensive validation that skeleton components match their corresponding
+ * real components to prevent Cumulative Layout Shift (CLS) during loading.
+ *
+ * BLOCKING: No (warning only - helps catch CLS issues before they ship)
+ *
+ * Run: pnpm preflight:skeleton-size
+ *
+ * Checks:
+ * 1. KNOWN MAPPINGS - Validates skeleton heights against expected component heights
+ * 2. STRUCTURAL MAPPINGS - Validates skeleton elements match component structure
+ *    - Detects missing placeholders for component elements
+ *    - Detects stale placeholders for removed elements
+ *    - Compares action button counts between skeleton and component
+ * 3. AUTO-DISCOVERY - Finds skeleton/component pairs by naming convention
+ * 4. RESPONSIVE ANALYSIS - Compares mobile vs desktop height definitions
+ * 5. STRUCTURE MATCHING - Validates loading.tsx structure matches page structure
+ * 6. ELEMENT COUNT - Checks skeleton element counts match actual components
+ * 7. GRID PATTERNS - Validates grid column counts match between skeleton and page
+ * 8. DOCUMENTATION - Ensures skeletons document what they mirror
+ * 9. SPACING TOKENS - Validates consistent spacing between skeleton and component
+ * 10. DESIGN TOKEN CONSISTENCY - Validates CSS variables match between pairs
+ * 11. BORDER/SHADOW CONSISTENCY - Validates visual styling matches
+ * 12. ARIA/ACCESSIBILITY - Validates skeleton has proper aria-labels
+ * 13. ICON PLACEHOLDER VALIDATION - Validates icon placeholders match actual icons
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tags = exports.description = exports.blocking = exports.category = exports.name = exports.id = void 0;
+exports.checkSkeletonSizeConsistency = checkSkeletonSizeConsistency;
+const fs = __importStar(require("fs"));
+const glob_1 = require("glob");
+const path = __importStar(require("path"));
+const console_chars_1 = require("../../utils/console-chars");
+const glob_patterns_1 = require("../../shared/glob-patterns");
+// Check metadata
+exports.id = "ui/skeleton-size-consistency";
+exports.name = "Skeleton Size Consistency";
+exports.category = "ui";
+exports.blocking = false;
+exports.description = "Skeleton Size Consistency Preflight Check (Enhanced)";
+exports.tags = ["ui"];
+// CONSTANTS
+const TAILWIND_SPACING = {
+    "0": 0,
+    px: 1,
+    "0.5": 2,
+    "1": 4,
+    "1.5": 6,
+    "2": 8,
+    "2.5": 10,
+    "3": 12,
+    "3.5": 14,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "7": 28,
+    "8": 32,
+    "9": 36,
+    "10": 40,
+    "11": 44,
+    "12": 48,
+    "14": 56,
+    "16": 64,
+    "20": 80,
+    "24": 96,
+    "28": 112,
+    "32": 128,
+    "36": 144,
+    "40": 160,
+    "44": 176,
+    "48": 192,
+    "52": 208,
+    "56": 224,
+    "60": 240,
+    "64": 256,
+    "72": 288,
+    "80": 320,
+    "96": 384,
+};
+const BREAKPOINTS = ["base", "sm", "md", "lg", "xl", "2xl"];
+// Known skeleton-to-component mappings with expected heights
+const KNOWN_MAPPINGS = [
+    {
+        skeleton: "components/shared/HeaderSkeleton.tsx",
+        component: "components/UnifiedHeader.tsx",
+        name: "NavigationHeader",
+        expectedHeight: { min: 100, max: 130 },
+    },
+];
+const STRUCTURAL_MAPPINGS = [
+    {
+        skeleton: "components/shared/HeaderSkeleton.tsx",
+        component: "components/UnifiedHeader.tsx",
+        name: "HeaderSkeleton",
+        expectedElements: [
+            {
+                // SellButton should have a skeleton placeholder on desktop
+                skeletonPattern: /SellButton|width={80}.*hidden sm:block.*rounded-lg/s,
+                componentPattern: /<SellButton|showSellButton/,
+                description: "SellButton placeholder (desktop)",
+                breakpoint: "sm",
+                severity: "warning",
+            },
+            {
+                // Theme toggle should have skeleton on desktop
+                skeletonPattern: /Theme toggle|hidden sm:block.*circular/s,
+                componentPattern: /toggleTheme|<HeaderIconButton.*Moon|Sun/s,
+                description: "Theme toggle placeholder (desktop)",
+                breakpoint: "sm",
+                severity: "warning",
+            },
+            {
+                // Mobile search should have skeleton on mobile
+                skeletonPattern: /Mobile search|block md:hidden.*circular/s,
+                componentPattern: /<MobileSearch|showMobileSearchButton/,
+                description: "Mobile search placeholder",
+                breakpoint: "base",
+                severity: "warning",
+            },
+            {
+                // Core action buttons: notifications, wishlist, cart, user
+                skeletonPattern: /NotificationsBell|circular.*width={40}.*height={40}/s,
+                componentPattern: /<NotificationsBell/,
+                description: "NotificationsBell placeholder",
+                breakpoint: "base",
+                severity: "warning",
+            },
+            {
+                skeletonPattern: /WishlistDrawer|circular.*width={40}.*height={40}/s,
+                componentPattern: /<WishlistDrawer/,
+                description: "WishlistDrawer placeholder",
+                breakpoint: "base",
+                severity: "warning",
+            },
+            {
+                skeletonPattern: /CartDrawer|circular.*width={40}.*height={40}/s,
+                componentPattern: /<CartDrawer/,
+                description: "CartDrawer placeholder",
+                breakpoint: "base",
+                severity: "warning",
+            },
+            {
+                skeletonPattern: /UserMenu|circular.*width={40}.*height={40}/s,
+                componentPattern: /<UserMenu/,
+                description: "UserMenu placeholder",
+                breakpoint: "base",
+                severity: "warning",
+            },
+            {
+                // Desktop search bar
+                skeletonPattern: /hidden md:block.*Search|SearchBar/s,
+                componentPattern: /<SearchBar|<DesktopSearchWrapper/,
+                description: "Desktop search bar placeholder",
+                breakpoint: "md",
+                severity: "warning",
+            },
+            {
+                // Navigation/MegaMenu
+                skeletonPattern: /<nav|MegaMenu/,
+                componentPattern: /<MegaMenu|showNavigation/,
+                description: "Navigation/MegaMenu placeholder",
+                breakpoint: "base",
+                severity: "warning",
+            },
+        ],
+    },
+    {
+        skeleton: "components/shared/HeaderSkeleton.tsx",
+        component: "components/shared/UnifiedBreadcrumbs.tsx",
+        name: "BreadcrumbSkeleton",
+        expectedElements: [
+            {
+                // ChevronRight separator (not "/" slash)
+                skeletonPattern: /ChevronRight|m9 18 6-6-6-6|path.*d="m9 18/,
+                componentPattern: /<ChevronRight/,
+                description: "ChevronRight separator icon",
+                breakpoint: "base",
+                severity: "warning",
+            },
+            {
+                // Home icon placeholder for first breadcrumb item
+                skeletonPattern: /Home icon|width={16}.*height={16}.*rounded/s,
+                componentPattern: /<Home|showHomeIcon/,
+                description: "Home icon placeholder",
+                breakpoint: "base",
+                severity: "warning",
+            },
+            {
+                // Background should be bg-secondary (not bg-primary)
+                skeletonPattern: /bg-secondary|--bg-secondary/,
+                componentPattern: /bg-secondary|--bg-secondary/,
+                description: "Background color (bg-secondary)",
+                breakpoint: "base",
+                severity: "warning",
+            },
+            {
+                // Proper nav element with aria-label
+                skeletonPattern: /<nav.*aria-label/s,
+                componentPattern: /<nav.*aria-label/s,
+                description: "Accessible nav element",
+                breakpoint: "base",
+                severity: "warning",
+            },
+        ],
+    },
+];
+// Layout components that include UnifiedHeader by default
+const LAYOUTS_WITH_HEADER = [
+    "DashboardPageLayout",
+    "StandardPageLayout",
+    "ContentLayout",
+    "SellerPageLayout",
+    "AccountPageLayout",
+    "AdminPageLayout",
+    "CategoryBrowseLoadingSkeleton",
+    "MarketplaceGridLoadingSkeleton",
+];
+// EXTRACTION FUNCTIONS
+function extractHeights(content, containerOnly = true) {
+    const heights = [];
+    const lines = content.split("\n");
+    lines.forEach((line, index) => {
+        if (line.trim().startsWith("//") || line.trim().startsWith("*"))
+            return;
+        // Skip lines that are skeleton element props (height={...} on UnifiedSkeleton)
+        if (containerOnly && (line.includes("UnifiedSkeleton") || line.includes("<Skeleton"))) {
+            return;
+        }
+        // Skip lines with height as a prop (height={32}, height: 32, etc.)
+        if (containerOnly && /height[=:]\s*[{"]?\d+[}"]?/.test(line) && !line.includes("minHeight")) {
+            // Only skip if it looks like a component prop, not a style object for a container
+            if (line.includes("variant=") || line.includes("width=")) {
+                return;
+            }
+        }
+        // Extract Tailwind height classes with breakpoint prefixes
+        // Only match min-h-* for containers (h-* is usually for specific elements)
+        for (const bp of BREAKPOINTS) {
+            const prefix = bp === "base" ? "" : `${bp}:`;
+            // Match min-h-{number} or min-h-[{number}px] patterns
+            // Note: \b doesn't work well with [ so we use a simpler pattern
+            const regex = new RegExp(bp === "base" ? `(?<![a-z]:)min-h-(\\d+|\\[\\d+px\\])` : `${bp}:min-h-(\\d+|\\[\\d+px\\])`, "g");
+            let match;
+            while ((match = regex.exec(line)) !== null) {
+                const twValue = match[1].replace(/[\[\]px]/g, "");
+                const pixels = TAILWIND_SPACING[twValue] ?? parseInt(twValue);
+                if (pixels && pixels >= 20) {
+                    heights.push({
+                        value: pixels,
+                        source: bp === "base" ? `min-h-${twValue}` : `${bp}:min-h-${twValue}`,
+                        line: index + 1,
+                        breakpoint: bp,
+                    });
+                }
+            }
+        }
+        // Extract inline minHeight styles (for container divs, not skeleton props)
+        // Only if it's in a style object context
+        if (line.includes("minHeight") && line.includes("style")) {
+            const inlineHeightMatch = line.match(/minHeight:\s*["']?(\d+)(?:px)?["']?/);
+            if (inlineHeightMatch) {
+                const pixels = parseInt(inlineHeightMatch[1]);
+                if (pixels >= 20) {
+                    heights.push({
+                        value: pixels,
+                        source: `minHeight: ${pixels}px`,
+                        line: index + 1,
+                        breakpoint: "base",
+                    });
+                }
+            }
+        }
+    });
+    return heights;
+}
+function extractGrids(content) {
+    const grids = [];
+    const lines = content.split("\n");
+    lines.forEach((line, index) => {
+        for (const bp of BREAKPOINTS) {
+            const prefix = bp === "base" ? "" : `${bp}:`;
+            const regex = new RegExp(`${prefix.replace(":", "\\:")}grid-cols-(\\d+)`, "g");
+            let match;
+            while ((match = regex.exec(line)) !== null) {
+                grids.push({
+                    columns: parseInt(match[1]),
+                    breakpoint: bp,
+                    line: index + 1,
+                });
+            }
+        }
+    });
+    return grids;
+}
+function countSkeletonElements(content) {
+    const skeletonMatches = content.match(/<UnifiedSkeleton|<Skeleton/g);
+    return skeletonMatches?.length ?? 0;
+}
+function extractMirrorsComment(content) {
+    const mirrorsMatch = content.match(/(?:mirrors?|matches?|same as|dimensions of)\s+([A-Z][a-zA-Z]+)/i);
+    return mirrorsMatch?.[1];
+}
+function hasDocumentation(content) {
+    return /Heights:|Matches|mirrors|dimensions of|same as|Total:.*px/i.test(content);
+}
+function calculateTotalHeightByBreakpoint(heights) {
+    const totals = {};
+    for (const bp of BREAKPOINTS) {
+        const bpHeights = heights.filter((h) => h.breakpoint === bp);
+        if (bpHeights.length > 0) {
+            totals[bp] = bpHeights.reduce((sum, h) => sum + h.value, 0);
+        }
+    }
+    // Inherit from smaller breakpoints if not defined
+    let lastValue = totals["base"] ?? 0;
+    for (const bp of BREAKPOINTS) {
+        if (totals[bp] === undefined && lastValue > 0) {
+            totals[bp] = lastValue;
+        }
+        else if (totals[bp] !== undefined) {
+            lastValue = totals[bp];
+        }
+    }
+    return totals;
+}
+// ANALYSIS FUNCTIONS
+function analyzeSkeletonFile(filePath) {
+    const content = fs.readFileSync(filePath, "utf8");
+    const heights = extractHeights(content, true); // containerOnly = true
+    const grids = extractGrids(content);
+    return {
+        file: filePath,
+        heights,
+        grids,
+        skeletonCount: countSkeletonElements(content),
+        hasDocumentation: hasDocumentation(content),
+        mirrorsComponent: extractMirrorsComment(content),
+        totalHeightByBreakpoint: calculateTotalHeightByBreakpoint(heights),
+    };
+}
+function analyzeComponentFile(filePath) {
+    const content = fs.readFileSync(filePath, "utf8");
+    const heights = extractHeights(content, true); // containerOnly = true
+    const grids = extractGrids(content);
+    // Extract common element patterns
+    const elementPatterns = [];
+    if (content.includes("map("))
+        elementPatterns.push("mapped-list");
+    if (content.includes("grid"))
+        elementPatterns.push("grid-layout");
+    if (content.includes("flex"))
+        elementPatterns.push("flex-layout");
+    return {
+        file: filePath,
+        heights,
+        grids,
+        elementPatterns,
+        totalHeightByBreakpoint: calculateTotalHeightByBreakpoint(heights),
+    };
+}
+// VALIDATION FUNCTIONS
+async function validateKnownMappings() {
+    const issues = [];
+    for (const mapping of KNOWN_MAPPINGS) {
+        if (!fs.existsSync(mapping.skeleton))
+            continue;
+        const skeleton = analyzeSkeletonFile(mapping.skeleton);
+        const baseHeight = skeleton.totalHeightByBreakpoint["base"] ?? 0;
+        if (baseHeight < mapping.expectedHeight.min) {
+            issues.push({
+                file: mapping.skeleton,
+                line: skeleton.heights[0]?.line ?? 1,
+                severity: "error",
+                category: "HEIGHT_MISMATCH",
+                message: `${mapping.name} skeleton is too small (${baseHeight}px)`,
+                suggestion: `Increase container heights to ${mapping.expectedHeight.min}-${mapping.expectedHeight.max}px to match ${mapping.name}`,
+                details: {
+                    actual: baseHeight,
+                    expectedMin: mapping.expectedHeight.min,
+                    expectedMax: mapping.expectedHeight.max,
+                },
+            });
+        }
+        else if (baseHeight > mapping.expectedHeight.max * 1.5) {
+            issues.push({
+                file: mapping.skeleton,
+                line: skeleton.heights[0]?.line ?? 1,
+                severity: "warning",
+                category: "HEIGHT_MISMATCH",
+                message: `${mapping.name} skeleton may be too large (${baseHeight}px)`,
+                suggestion: `Verify heights match ${mapping.name}. Oversized skeletons cause content to jump up.`,
+                details: {
+                    actual: baseHeight,
+                    expectedMin: mapping.expectedHeight.min,
+                    expectedMax: mapping.expectedHeight.max,
+                },
+            });
+        }
+    }
+    return issues;
+}
+/**
+ * Validates that skeleton structure matches the actual component structure.
+ * This catches drift where the skeleton shows different elements than what actually renders.
+ */
+async function validateStructuralMappings() {
+    const issues = [];
+    for (const mapping of STRUCTURAL_MAPPINGS) {
+        if (!fs.existsSync(mapping.skeleton) || !fs.existsSync(mapping.component)) {
+            continue;
+        }
+        const skeletonContent = fs.readFileSync(mapping.skeleton, "utf8");
+        const componentContent = fs.readFileSync(mapping.component, "utf8");
+        for (const element of mapping.expectedElements) {
+            const componentHasElement = element.componentPattern.test(componentContent);
+            const skeletonHasElement = element.skeletonPattern.test(skeletonContent);
+            // Component has element but skeleton doesn't - skeleton is missing placeholder
+            if (componentHasElement && !skeletonHasElement) {
+                issues.push({
+                    file: mapping.skeleton,
+                    line: 1,
+                    severity: element.severity,
+                    category: "STRUCTURE_DRIFT",
+                    message: `${mapping.name} missing placeholder for: ${element.description}`,
+                    suggestion: `Add skeleton placeholder for ${element.description} to match ${path.basename(mapping.component)}`,
+                    details: {
+                        element: element.description,
+                        breakpoint: element.breakpoint ?? "base",
+                    },
+                });
+            }
+            // Skeleton has element but component doesn't - skeleton has stale placeholder
+            if (skeletonHasElement && !componentHasElement) {
+                issues.push({
+                    file: mapping.skeleton,
+                    line: 1,
+                    severity: "info",
+                    category: "STRUCTURE_DRIFT",
+                    message: `${mapping.name} has placeholder for removed element: ${element.description}`,
+                    suggestion: `Remove skeleton placeholder for ${element.description} - no longer in ${path.basename(mapping.component)}`,
+                    details: {
+                        element: element.description,
+                        breakpoint: element.breakpoint ?? "base",
+                    },
+                });
+            }
+        }
+        // Count skeleton elements vs component interactive elements
+        // Only run this check for header-related mappings (not breadcrumbs, etc.)
+        const isHeaderMapping = mapping.name.toLowerCase().includes("header") &&
+            !mapping.name.toLowerCase().includes("breadcrumb");
+        if (isHeaderMapping) {
+            const skeletonCircularCount = (skeletonContent.match(/variant="circular"/g) || []).length;
+            const componentButtonCount = (componentContent.match(/<HeaderIconButton|<UserMenu|<NotificationsBell|<WishlistDrawer|<CartDrawer|<SellButton/g) || []).length;
+            // Allow some variance (skeleton might show fewer on mobile)
+            if (Math.abs(skeletonCircularCount - componentButtonCount) > 3) {
+                issues.push({
+                    file: mapping.skeleton,
+                    line: 1,
+                    severity: "warning",
+                    category: "ELEMENT_COUNT_DRIFT",
+                    message: `${mapping.name} has ${skeletonCircularCount} circular skeletons but component has ~${componentButtonCount} action buttons`,
+                    suggestion: "Review skeleton to ensure action button placeholders match actual component",
+                    details: {
+                        skeletonCount: skeletonCircularCount,
+                        componentCount: componentButtonCount,
+                    },
+                });
+            }
+        }
+    }
+    return issues;
+}
+async function validateAutoDiscoveredPairs() {
+    const issues = [];
+    // Find skeleton files and try to match them to components
+    const skeletonFiles = await (0, glob_1.glob)("components/**/*[Ss]keleton*.tsx", {
+        ignore: [...glob_patterns_1.STANDARD_EXCLUDES],
+    });
+    for (const skeletonFile of skeletonFiles) {
+        const skeleton = analyzeSkeletonFile(skeletonFile);
+        // Try to find matching component by name
+        const baseName = path
+            .basename(skeletonFile)
+            .replace(/Skeleton/gi, "")
+            .replace(/Loading/gi, "")
+            .replace(".tsx", "");
+        if (!baseName || baseName.length < 3)
+            continue;
+        // Look for component with similar name
+        const possibleComponents = await (0, glob_1.glob)(`components/**/${baseName}*.tsx`, {
+            ignore: [...glob_patterns_1.STANDARD_EXCLUDES],
+        });
+        const componentFile = possibleComponents.find((f) => !f.includes("Skeleton") && !f.includes("Loading"));
+        if (componentFile && fs.existsSync(componentFile)) {
+            const component = analyzeComponentFile(componentFile);
+            // Compare grid columns
+            for (const bp of BREAKPOINTS) {
+                const skeletonGrid = skeleton.grids.find((g) => g.breakpoint === bp);
+                const componentGrid = component.grids.find((g) => g.breakpoint === bp);
+                if (skeletonGrid && componentGrid && skeletonGrid.columns !== componentGrid.columns) {
+                    issues.push({
+                        file: skeletonFile,
+                        line: skeletonGrid.line,
+                        severity: "warning",
+                        category: "GRID_MISMATCH",
+                        message: `Grid columns mismatch at ${bp} breakpoint`,
+                        suggestion: `Skeleton has ${skeletonGrid.columns} columns but component has ${componentGrid.columns}`,
+                        details: {
+                            breakpoint: bp,
+                            skeletonCols: skeletonGrid.columns,
+                            componentCols: componentGrid.columns,
+                        },
+                    });
+                }
+            }
+        }
+    }
+    return issues;
+}
+async function validateLoadingFiles() {
+    const issues = [];
+    const loadingFiles = await (0, glob_1.glob)("app/**/loading.tsx", { ignore: [...glob_patterns_1.STANDARD_EXCLUDES] });
+    for (const loadingFile of loadingFiles) {
+        const loadingContent = fs.readFileSync(loadingFile, "utf8");
+        const dir = path.dirname(loadingFile);
+        const pageFile = path.join(dir, "page.tsx");
+        // Check HeaderSkeleton usage
+        if (loadingContent.includes("HeaderSkeleton")) {
+            const hasHeaderProvider = await checkHeaderProvider(dir);
+            if (!hasHeaderProvider) {
+                issues.push({
+                    file: loadingFile,
+                    line: 1,
+                    severity: "warning",
+                    category: "STRUCTURE_MISMATCH",
+                    message: "HeaderSkeleton used but no header found in page hierarchy",
+                    suggestion: "Remove HeaderSkeleton or add header to layout/page",
+                });
+            }
+        }
+        // Check BreadcrumbSkeleton usage
+        if (loadingContent.includes("BreadcrumbSkeleton")) {
+            const hasBreadcrumbs = await checkBreadcrumbProvider(dir);
+            if (!hasBreadcrumbs) {
+                issues.push({
+                    file: loadingFile,
+                    line: 1,
+                    severity: "info",
+                    category: "STRUCTURE_MISMATCH",
+                    message: "BreadcrumbSkeleton used but no breadcrumbs found in page hierarchy",
+                    suggestion: "Verify page renders UnifiedBreadcrumbs or remove BreadcrumbSkeleton",
+                });
+            }
+        }
+        // Compare loading.tsx structure with page.tsx
+        if (fs.existsSync(pageFile)) {
+            const pageContent = fs.readFileSync(pageFile, "utf8");
+            // Check grid consistency
+            const loadingGrids = extractGrids(loadingContent);
+            const pageGrids = extractGrids(pageContent);
+            // Find the client component if page delegates to one
+            const clientMatch = pageContent.match(/import\s*{\s*(\w+Client)\s*}/);
+            if (clientMatch) {
+                const clientName = clientMatch[1];
+                const clientFiles = await (0, glob_1.glob)(`${dir}/${clientName}.tsx`, {
+                    ignore: [...glob_patterns_1.STANDARD_EXCLUDES],
+                });
+                if (clientFiles.length > 0) {
+                    const clientContent = fs.readFileSync(clientFiles[0], "utf8");
+                    const clientGrids = extractGrids(clientContent);
+                    pageGrids.push(...clientGrids);
+                }
+            }
+            // Compare base grid columns
+            const loadingBaseCols = loadingGrids.find((g) => g.breakpoint === "base")?.columns;
+            const pageBaseCols = pageGrids.find((g) => g.breakpoint === "base")?.columns;
+            if (loadingBaseCols && pageBaseCols && loadingBaseCols !== pageBaseCols) {
+                issues.push({
+                    file: loadingFile,
+                    line: loadingGrids[0]?.line ?? 1,
+                    severity: "warning",
+                    category: "GRID_MISMATCH",
+                    message: `Loading skeleton grid (${loadingBaseCols} cols) doesn't match page grid (${pageBaseCols} cols)`,
+                    suggestion: "Align grid-cols-X classes between loading.tsx and page component",
+                });
+            }
+            // Check for mapped list count mismatches
+            const loadingArrayLength = loadingContent.match(/\[([^\]]+)\]\.map/g)?.map((m) => {
+                const nums = m.match(/\d+/g);
+                return nums ? nums.length : 0;
+            }) ?? [];
+            // Warn if skeleton shows significantly different item count
+            const maxSkeletonItems = Math.max(...loadingArrayLength, 0);
+            if (maxSkeletonItems > 0 && maxSkeletonItems < 3) {
+                issues.push({
+                    file: loadingFile,
+                    line: 1,
+                    severity: "info",
+                    category: "ITEM_COUNT",
+                    message: `Skeleton shows only ${maxSkeletonItems} placeholder items`,
+                    suggestion: "Consider showing 3-6 skeleton items for better perceived loading",
+                });
+            }
+            // Check for Footer consistency
+            const loadingHasFooter = loadingContent.includes("Footer") || loadingContent.includes("footer");
+            const pageHasFooter = pageContent.includes("<Footer") || pageContent.includes("Footer />");
+            if (pageHasFooter && !loadingHasFooter) {
+                issues.push({
+                    file: loadingFile,
+                    line: 1,
+                    severity: "info",
+                    category: "STRUCTURE_MISMATCH",
+                    message: "Page has Footer but loading skeleton does not",
+                    suggestion: "Consider adding Footer to loading.tsx for consistent page height",
+                });
+            }
+        }
+    }
+    return issues;
+}
+async function checkHeaderProvider(dir) {
+    let currentDir = dir;
+    while (currentDir.includes("app")) {
+        for (const file of ["layout.tsx", "page.tsx"]) {
+            const filePath = path.join(currentDir, file);
+            if (fs.existsSync(filePath)) {
+                const content = fs.readFileSync(filePath, "utf8");
+                if (content.includes("UnifiedHeader") ||
+                    content.includes("AppHeader") ||
+                    LAYOUTS_WITH_HEADER.some((l) => content.includes(l))) {
+                    return true;
+                }
+            }
+        }
+        const parentDir = path.dirname(currentDir);
+        if (parentDir === currentDir)
+            break;
+        currentDir = parentDir;
+    }
+    return false;
+}
+async function checkBreadcrumbProvider(dir) {
+    let currentDir = dir;
+    // Layout components that include breadcrumbs by default
+    const LAYOUTS_WITH_BREADCRUMBS = [
+        "DashboardPageLayout",
+        "StandardPageLayout",
+        "ContentLayout",
+        "SellerPageLayout",
+        "AccountPageLayout",
+        "AdminPageLayout",
+    ];
+    // Helper to check if content uses breadcrumb-providing layouts
+    const contentHasBreadcrumbs = (content) => {
+        return (content.includes("UnifiedBreadcrumbs") ||
+            content.includes("Breadcrumb") ||
+            LAYOUTS_WITH_BREADCRUMBS.some((l) => content.includes(l)));
+    };
+    // Helper to check client component files referenced in a page
+    const checkClientComponents = async (pageContent, pageDir) => {
+        // Match imports from relative paths like:
+        // import { DashboardPageClient } from "./DashboardPageClient"
+        // import SomeClient from "./SomeClient"
+        const importMatches = [...pageContent.matchAll(/from\s+["']\.\/([^"']+)["']/g)];
+        for (const match of importMatches) {
+            const importPath = match[1];
+            // Check if this looks like a client component (contains Client or Page)
+            if (importPath.includes("Client") || importPath.includes("Page")) {
+                // Normalize path separators for cross-platform compatibility
+                const normalizedDir = pageDir.replace(/\\/g, "/");
+                const clientFilePath = `${normalizedDir}/${importPath}.tsx`;
+                if (fs.existsSync(clientFilePath)) {
+                    const clientContent = fs.readFileSync(clientFilePath, "utf8");
+                    if (contentHasBreadcrumbs(clientContent)) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    };
+    while (currentDir.includes("app")) {
+        for (const file of ["layout.tsx", "page.tsx"]) {
+            const filePath = path.join(currentDir, file);
+            if (fs.existsSync(filePath)) {
+                const content = fs.readFileSync(filePath, "utf8");
+                if (contentHasBreadcrumbs(content)) {
+                    return true;
+                }
+                // Also check client components imported by this page
+                if (file === "page.tsx" && (await checkClientComponents(content, currentDir))) {
+                    return true;
+                }
+            }
+        }
+        const parentDir = path.dirname(currentDir);
+        if (parentDir === currentDir)
+            break;
+        currentDir = parentDir;
+    }
+    // Also check ALL child pages in the original directory tree
+    // This catches cases where loading.tsx is at /store but pages are at /store/dashboard, etc.
+    try {
+        // Normalize dir to use forward slashes for glob
+        const normalizedDir = dir.replace(/\\/g, "/");
+        const childPages = await (0, glob_1.glob)(`${normalizedDir}/**/page.tsx`, {
+            ignore: [...glob_patterns_1.STANDARD_EXCLUDES],
+        });
+        for (const childPage of childPages) {
+            const content = fs.readFileSync(childPage, "utf8");
+            if (contentHasBreadcrumbs(content)) {
+                return true;
+            }
+            // Check client components imported by child pages
+            const childDir = path.dirname(childPage);
+            if (await checkClientComponents(content, childDir)) {
+                return true;
+            }
+        }
+    }
+    catch {
+        // Ignore glob errors
+    }
+    return false;
+}
+async function validateSkeletonDocumentation() {
+    const issues = [];
+    const skeletonFiles = await (0, glob_1.glob)("components/**/*[Ss]keleton*.tsx", {
+        ignore: [...glob_patterns_1.STANDARD_EXCLUDES],
+    });
+    const sharedSkeletons = await (0, glob_1.glob)("components/shared/skeletons/**/*.tsx", {
+        ignore: [...glob_patterns_1.STANDARD_EXCLUDES],
+    });
+    const allSkeletons = [...new Set([...skeletonFiles, ...sharedSkeletons])];
+    for (const file of allSkeletons) {
+        const skeleton = analyzeSkeletonFile(file);
+        // Check documentation
+        if (skeleton.heights.length > 0 && !skeleton.hasDocumentation) {
+            issues.push({
+                file,
+                line: 1,
+                severity: "info",
+                category: "DOCUMENTATION",
+                message: "Skeleton lacks height documentation",
+                suggestion: "Add JSDoc comment with Heights: section documenting expected dimensions",
+            });
+        }
+        // Check for responsive consistency
+        const breakpointsUsed = new Set(skeleton.heights.map((h) => h.breakpoint));
+        if (breakpointsUsed.size > 1) {
+            const baseHeight = skeleton.totalHeightByBreakpoint["base"];
+            const mdHeight = skeleton.totalHeightByBreakpoint["md"];
+            if (baseHeight && mdHeight && Math.abs(baseHeight - mdHeight) > 50) {
+                // This is expected for responsive designs, just info
+                issues.push({
+                    file,
+                    line: 1,
+                    severity: "info",
+                    category: "RESPONSIVE",
+                    message: `Large height difference between mobile (${baseHeight}px) and desktop (${mdHeight}px)`,
+                    suggestion: "Verify this matches the actual component responsive behavior",
+                });
+            }
+        }
+    }
+    return issues;
+}
+async function validateSpacingConsistency() {
+    const issues = [];
+    const loadingFiles = await (0, glob_1.glob)("app/**/loading.tsx", { ignore: [...glob_patterns_1.STANDARD_EXCLUDES] });
+    for (const loadingFile of loadingFiles) {
+        const content = fs.readFileSync(loadingFile, "utf8");
+        const dir = path.dirname(loadingFile);
+        const pageFile = path.join(dir, "page.tsx");
+        if (!fs.existsSync(pageFile))
+            continue;
+        const pageContent = fs.readFileSync(pageFile, "utf8");
+        // Extract OUTER container spacing (first few lines typically define the main wrapper)
+        const loadingLines = content.split("\n").slice(0, 30);
+        const pageLines = pageContent.split("\n").slice(0, 50);
+        // Look for main container padding patterns
+        const loadingOuterPadding = loadingLines
+            .join("\n")
+            .match(/className="[^"]*\b(px?-\d+)[^"]*"/)?.[1];
+        const pageOuterPadding = pageLines.join("\n").match(/className="[^"]*\b(px?-\d+)[^"]*"/)?.[1];
+        // Only compare if both have outer padding defined
+        if (loadingOuterPadding && pageOuterPadding && loadingOuterPadding !== pageOuterPadding) {
+            // Check if they're significantly different
+            const loadingVal = TAILWIND_SPACING[loadingOuterPadding.replace(/p[xy]?-/, "")] ?? 0;
+            const pageVal = TAILWIND_SPACING[pageOuterPadding.replace(/p[xy]?-/, "")] ?? 0;
+            // Only warn if difference is >= 8px (2 spacing units)
+            if (Math.abs(loadingVal - pageVal) >= 8) {
+                issues.push({
+                    file: loadingFile,
+                    line: 1,
+                    severity: "warning",
+                    category: "SPACING_MISMATCH",
+                    message: `Outer container padding mismatch: skeleton uses ${loadingOuterPadding}, page uses ${pageOuterPadding}`,
+                    suggestion: "Align outer container padding classes to prevent layout shift",
+                });
+            }
+        }
+        // Check max-width consistency
+        const loadingMaxW = content.match(/max-w-(\w+)/)?.[1];
+        const pageMaxW = pageContent.match(/max-w-(\w+)/)?.[1];
+        if (loadingMaxW && pageMaxW && loadingMaxW !== pageMaxW) {
+            issues.push({
+                file: loadingFile,
+                line: 1,
+                severity: "warning",
+                category: "LAYOUT_MISMATCH",
+                message: `Max-width mismatch: skeleton uses max-w-${loadingMaxW}, page uses max-w-${pageMaxW}`,
+                suggestion: "Align max-width classes to prevent content width shift",
+            });
+        }
+    }
+    return issues;
+}
+// NEW VALIDATIONS - Design Token & Visual Consistency
+/**
+ * Validates that skeleton components use consistent CSS variables/design tokens
+ * as their corresponding real components.
+ */
+async function validateDesignTokenConsistency() {
+    const issues = [];
+    // Find skeleton files that have a clear component pair
+    const skeletonFiles = await (0, glob_1.glob)("components/**/*[Ss]keleton*.tsx", {
+        ignore: [...glob_patterns_1.STANDARD_EXCLUDES],
+    });
+    for (const skeletonFile of skeletonFiles) {
+        const skeletonContent = fs.readFileSync(skeletonFile, "utf8");
+        // Extract CSS variables used in skeleton
+        const skeletonVars = extractCssVariables(skeletonContent);
+        // Try to find matching component
+        const baseName = path
+            .basename(skeletonFile)
+            .replace(/Skeleton/gi, "")
+            .replace(/Loading/gi, "")
+            .replace(".tsx", "");
+        if (!baseName || baseName.length < 3)
+            continue;
+        const possibleComponents = await (0, glob_1.glob)(`components/**/${baseName}*.tsx`, {
+            ignore: [...glob_patterns_1.STANDARD_EXCLUDES],
+        });
+        const componentFile = possibleComponents.find((f) => !f.includes("Skeleton") && !f.includes("Loading"));
+        if (componentFile && fs.existsSync(componentFile)) {
+            const componentContent = fs.readFileSync(componentFile, "utf8");
+            const componentVars = extractCssVariables(componentContent);
+            // Check for background color mismatches on OUTER containers only
+            // Look at the first few lines to find the main container background
+            const skeletonFirstLines = skeletonContent.split("\n").slice(0, 30).join("\n");
+            const componentFirstLines = componentContent.split("\n").slice(0, 50).join("\n");
+            const skeletonOuterBg = skeletonFirstLines.match(/bg-\[var\(--bg-(primary|secondary)\)\]|bg-(primary|secondary)/)?.[0];
+            const componentOuterBg = componentFirstLines.match(/bg-\[var\(--bg-(primary|secondary)\)\]|bg-(primary|secondary)/)?.[0];
+            if (skeletonOuterBg && componentOuterBg && skeletonOuterBg !== componentOuterBg) {
+                // Only warn if outer container backgrounds are clearly different
+                const skeletonIsPrimary = skeletonOuterBg.includes("primary");
+                const componentIsPrimary = componentOuterBg.includes("primary");
+                if (skeletonIsPrimary !== componentIsPrimary) {
+                    issues.push({
+                        file: skeletonFile,
+                        line: 1,
+                        severity: "warning",
+                        category: "TOKEN_MISMATCH",
+                        message: `Outer container background mismatch: skeleton uses ${skeletonOuterBg}, component uses ${componentOuterBg}`,
+                        suggestion: "Align outer container background CSS variables to prevent color flash on load",
+                    });
+                }
+            }
+            // Check for border style mismatches - only if skeleton has NO borders at all
+            const skeletonBorder = skeletonContent.match(/border-\[var|border-color|borderBottom|border:\s*["']?1px/gi);
+            const componentBorder = componentContent.match(/border-\[var|border-color|borderBottom|border:\s*["']?1px/gi);
+            // Only flag if component has significant borders (3+) and skeleton has none
+            if (componentBorder &&
+                componentBorder.length >= 3 &&
+                (!skeletonBorder || skeletonBorder.length === 0)) {
+                issues.push({
+                    file: skeletonFile,
+                    line: 1,
+                    severity: "info",
+                    category: "STYLE_MISMATCH",
+                    message: "Component has borders but skeleton does not",
+                    suggestion: "Add matching border styles to skeleton for visual consistency",
+                });
+            }
+        }
+    }
+    return issues;
+}
+/**
+ * Validates that skeleton components have proper accessibility attributes.
+ */
+async function validateSkeletonAccessibility() {
+    const issues = [];
+    const skeletonFiles = await (0, glob_1.glob)("components/**/*[Ss]keleton*.tsx", {
+        ignore: [...glob_patterns_1.STANDARD_EXCLUDES],
+    });
+    const loadingFiles = await (0, glob_1.glob)("app/**/loading.tsx", { ignore: [...glob_patterns_1.STANDARD_EXCLUDES] });
+    const allFiles = [...new Set([...skeletonFiles, ...loadingFiles])];
+    for (const file of allFiles) {
+        const content = fs.readFileSync(file, "utf8");
+        // Check for aria-label on main container
+        const hasAriaLabel = /aria-label=/.test(content);
+        const hasAriaLabelledBy = /aria-labelledby=/.test(content);
+        const hasRole = /role=["']status["']|role=["']progressbar["']/.test(content);
+        // Only check exported skeleton components (not internal helpers)
+        const isExportedSkeleton = /export\s+(function|const)\s+\w*[Ss]keleton/.test(content);
+        if (isExportedSkeleton && !hasAriaLabel && !hasAriaLabelledBy) {
+            issues.push({
+                file,
+                line: 1,
+                severity: "info",
+                category: "ACCESSIBILITY",
+                message: "Skeleton component lacks aria-label for screen readers",
+                suggestion: 'Add aria-label="Loading..." to main container for accessibility',
+            });
+        }
+        // Check for proper semantic structure in loading files
+        if (file.includes("loading.tsx")) {
+            const hasSection = /<section/.test(content);
+            const hasMain = /<main/.test(content);
+            const hasNav = /<nav/.test(content);
+            // If the corresponding page uses semantic elements, skeleton should too
+            const dir = path.dirname(file);
+            const pageFile = path.join(dir, "page.tsx");
+            if (fs.existsSync(pageFile)) {
+                const pageContent = fs.readFileSync(pageFile, "utf8");
+                const pageHasSection = /<section/.test(pageContent);
+                if (pageHasSection && !hasSection) {
+                    issues.push({
+                        file,
+                        line: 1,
+                        severity: "info",
+                        category: "SEMANTIC_MISMATCH",
+                        message: "Page uses <section> but loading skeleton does not",
+                        suggestion: "Use matching semantic HTML elements for consistent structure",
+                    });
+                }
+            }
+        }
+    }
+    return issues;
+}
+/**
+ * Validates separator/divider consistency between skeleton and component.
+ * Catches issues like "/" vs ChevronRight, "|" vs actual dividers, etc.
+ */
+async function validateSeparatorConsistency() {
+    const issues = [];
+    // Common separator patterns to check
+    const textSeparators = [
+        { pattern: /["']\/["']|>\s*\/\s*</, name: "slash (/)" },
+        { pattern: /["']\|["']|>\s*\|\s*</, name: "pipe (|)" },
+        { pattern: /["']•["']|>\s*•\s*</, name: "bullet (•)" },
+        { pattern: /["']-["']|>\s*-\s*</, name: "dash (-)" },
+    ];
+    const iconSeparators = [
+        { pattern: /<ChevronRight|chevron-right/i, name: "ChevronRight icon" },
+        { pattern: /<ChevronLeft|chevron-left/i, name: "ChevronLeft icon" },
+        { pattern: /<ArrowRight|arrow-right/i, name: "ArrowRight icon" },
+    ];
+    const skeletonFiles = await (0, glob_1.glob)("components/**/*[Ss]keleton*.tsx", {
+        ignore: [...glob_patterns_1.STANDARD_EXCLUDES],
+    });
+    for (const skeletonFile of skeletonFiles) {
+        const skeletonContent = fs.readFileSync(skeletonFile, "utf8");
+        // Find matching component
+        const baseName = path
+            .basename(skeletonFile)
+            .replace(/Skeleton/gi, "")
+            .replace(/Loading/gi, "")
+            .replace(".tsx", "");
+        if (!baseName || baseName.length < 3)
+            continue;
+        const possibleComponents = await (0, glob_1.glob)(`components/**/${baseName}*.tsx`, {
+            ignore: [...glob_patterns_1.STANDARD_EXCLUDES],
+        });
+        const componentFile = possibleComponents.find((f) => !f.includes("Skeleton") && !f.includes("Loading"));
+        if (!componentFile || !fs.existsSync(componentFile))
+            continue;
+        const componentContent = fs.readFileSync(componentFile, "utf8");
+        // Check if skeleton uses text separator but component uses icon
+        for (const textSep of textSeparators) {
+            if (textSep.pattern.test(skeletonContent)) {
+                for (const iconSep of iconSeparators) {
+                    if (iconSep.pattern.test(componentContent)) {
+                        issues.push({
+                            file: skeletonFile,
+                            line: 1,
+                            severity: "warning",
+                            category: "SEPARATOR_MISMATCH",
+                            message: `Skeleton uses ${textSep.name} but component uses ${iconSep.name}`,
+                            suggestion: `Replace text separator with matching icon placeholder or inline SVG`,
+                        });
+                        break;
+                    }
+                }
+            }
+        }
+        // Check if component uses text separator but skeleton uses icon (less common but possible)
+        for (const iconSep of iconSeparators) {
+            if (iconSep.pattern.test(skeletonContent)) {
+                let componentHasMatchingIcon = false;
+                for (const checkIcon of iconSeparators) {
+                    if (checkIcon.pattern.test(componentContent)) {
+                        componentHasMatchingIcon = true;
+                        break;
+                    }
+                }
+                if (!componentHasMatchingIcon) {
+                    // Check if component uses text separator instead
+                    for (const textSep of textSeparators) {
+                        if (textSep.pattern.test(componentContent)) {
+                            issues.push({
+                                file: skeletonFile,
+                                line: 1,
+                                severity: "info",
+                                category: "SEPARATOR_MISMATCH",
+                                message: `Skeleton uses ${iconSep.name} but component uses ${textSep.name}`,
+                                suggestion: "Align separator style with actual component",
+                            });
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return issues;
+}
+/**
+ * Validates that skeleton item counts are reasonable for the component.
+ * Too few items = jarring expansion, too many = jarring contraction.
+ */
+async function validateSkeletonItemCounts() {
+    const issues = [];
+    const loadingFiles = await (0, glob_1.glob)("app/**/loading.tsx", { ignore: [...glob_patterns_1.STANDARD_EXCLUDES] });
+    for (const loadingFile of loadingFiles) {
+        const content = fs.readFileSync(loadingFile, "utf8");
+        // Extract skeleton item counts from array patterns like [1,2,3].map or Array.from({length: N})
+        const arrayMapMatches = content.match(/\[([^\]]+)\]\.map/g) || [];
+        const arrayFromMatches = content.match(/Array\.from\(\s*\{\s*length:\s*(\d+)\s*\}/g) || [];
+        const countPropMatches = content.match(/count\s*[=:]\s*(\d+)/g) || [];
+        // Extract counts
+        const counts = [];
+        for (const match of arrayMapMatches) {
+            const nums = match.match(/\d+/g);
+            if (nums)
+                counts.push(nums.length);
+        }
+        for (const match of arrayFromMatches) {
+            const num = match.match(/length:\s*(\d+)/)?.[1];
+            if (num)
+                counts.push(parseInt(num));
+        }
+        for (const match of countPropMatches) {
+            const num = match.match(/(\d+)/)?.[1];
+            if (num)
+                counts.push(parseInt(num));
+        }
+        // Check for very low counts (likely to cause expansion)
+        for (const count of counts) {
+            if (count === 1) {
+                issues.push({
+                    file: loadingFile,
+                    line: 1,
+                    severity: "info",
+                    category: "ITEM_COUNT",
+                    message: "Skeleton shows only 1 placeholder item",
+                    suggestion: "Consider showing 3-6 items to better represent typical content",
+                });
+            }
+            else if (count === 2) {
+                issues.push({
+                    file: loadingFile,
+                    line: 1,
+                    severity: "info",
+                    category: "ITEM_COUNT",
+                    message: "Skeleton shows only 2 placeholder items",
+                    suggestion: "Consider showing 4-8 items for grid layouts",
+                });
+            }
+            else if (count > 20) {
+                issues.push({
+                    file: loadingFile,
+                    line: 1,
+                    severity: "info",
+                    category: "ITEM_COUNT",
+                    message: `Skeleton shows ${count} placeholder items (may be excessive)`,
+                    suggestion: "Consider showing 8-12 items max to avoid overwhelming skeleton",
+                });
+            }
+        }
+    }
+    return issues;
+}
+/**
+ * Helper to extract CSS variable references from content
+ */
+function extractCssVariables(content) {
+    const vars = [];
+    // Match var(--xxx) patterns
+    const varMatches = content.match(/var\(--[a-z-]+\)/gi) || [];
+    vars.push(...varMatches);
+    // Match Tailwind bg-xxx patterns
+    const bgMatches = content.match(/bg-\[var\(--[a-z-]+\)\]|bg-[a-z]+/gi) || [];
+    vars.push(...bgMatches);
+    return vars;
+}
+// MAIN
+async function checkSkeletonSizeConsistency() {
+    console.log(`\n${console_chars_1.emoji.search} Running Enhanced Skeleton Size Consistency Check...\n`);
+    const allIssues = [];
+    // Run all validations
+    const [knownMappingIssues, structuralIssues, autoDiscoveredIssues, loadingFileIssues, documentationIssues, spacingIssues,] = await Promise.all([
+        validateKnownMappings(),
+        validateStructuralMappings(),
+        validateAutoDiscoveredPairs(),
+        validateLoadingFiles(),
+        validateSkeletonDocumentation(),
+        validateSpacingConsistency(),
+    ]);
+    // Run additional validations (these are newer and can run in parallel)
+    const [designTokenIssues, accessibilityIssues, separatorIssues, itemCountIssues] = await Promise.all([
+        validateDesignTokenConsistency(),
+        validateSkeletonAccessibility(),
+        validateSeparatorConsistency(),
+        validateSkeletonItemCounts(),
+    ]);
+    allIssues.push(...knownMappingIssues, ...structuralIssues, ...autoDiscoveredIssues, ...loadingFileIssues, ...documentationIssues, ...spacingIssues, ...designTokenIssues, ...accessibilityIssues, ...separatorIssues, ...itemCountIssues);
+    // Print results
+    const RED = "\x1b[31m";
+    const YELLOW = "\x1b[33m";
+    const BLUE = "\x1b[34m";
+    const GREEN = "\x1b[32m";
+    const DIM = "\x1b[2m";
+    const RESET = "\x1b[0m";
+    const errors = allIssues.filter((i) => i.severity === "error");
+    const warnings = allIssues.filter((i) => i.severity === "warning");
+    const infos = allIssues.filter((i) => i.severity === "info");
+    if (allIssues.length === 0) {
+        console.log(`${GREEN}${console_chars_1.emoji.success} No skeleton consistency issues found!${RESET}\n`);
+    }
+    else {
+        // Group by category
+        const byCategory = new Map();
+        for (const issue of allIssues) {
+            const list = byCategory.get(issue.category) ?? [];
+            list.push(issue);
+            byCategory.set(issue.category, list);
+        }
+        console.log(`Found ${errors.length} errors, ${warnings.length} warnings, ${infos.length} info\n`);
+        if (errors.length > 0) {
+            console.log(`${RED}${console_chars_1.emoji.error} ERRORS:${RESET}\n`);
+            for (const issue of errors) {
+                printIssue(issue, RED);
+            }
+        }
+        if (warnings.length > 0) {
+            console.log(`${YELLOW}${console_chars_1.emoji.warning} WARNINGS:${RESET}\n`);
+            for (const issue of warnings) {
+                printIssue(issue, YELLOW);
+            }
+        }
+        if (infos.length > 0 && process.argv.includes("--verbose")) {
+            console.log(`${BLUE}${console_chars_1.emoji.info} INFO:${RESET}\n`);
+            for (const issue of infos) {
+                printIssue(issue, DIM);
+            }
+        }
+        else if (infos.length > 0) {
+            console.log(`${DIM}(${infos.length} info items - use --verbose to see)${RESET}\n`);
+        }
+    }
+    return {
+        passed: errors.length === 0,
+        issues: allIssues,
+    };
+}
+function printIssue(issue, color) {
+    const RESET = "\x1b[0m";
+    const DIM = "\x1b[2m";
+    const relPath = path.relative(process.cwd(), issue.file).replace(/\\/g, "/");
+    console.log(`  ${color}[${issue.category}]${RESET} ${relPath}:${issue.line}`);
+    console.log(`    ${issue.message}`);
+    console.log(`    ${DIM}Fix: ${issue.suggestion}${RESET}`);
+    if (issue.details) {
+        const detailStr = Object.entries(issue.details)
+            .map(([k, v]) => `${k}=${v}`)
+            .join(", ");
+        console.log(`    ${DIM}Details: ${detailStr}${RESET}`);
+    }
+    console.log("");
+}
+// Run if executed directly
+if (require.main === module) {
+    checkSkeletonSizeConsistency().then((result) => {
+        process.exit(result.passed ? 0 : 1);
+    });
+}
+//# sourceMappingURL=skeleton-size-consistency.js.map