enterprise-ui-architect-cli 1.0.0

package/assets/data/anti-patterns.csv

@@ -0,0 +1,55 @@
+id,area,bad_pattern,why_bad,fix
+1,Layout,Using raw MUI Box Container without project-specific PageLayout wrapper,Leads to inconsistent padding max-width background across pages every page reinvents the container,Create PageLayout with slots for header content sidebar footer consume theme tokens for spacing background
+2,Form,Putting a complex multi-section form inside a MUI Dialog,Dialogs have limited width and height creates scrollable cramped experience poor mobile UX breaks focus management,Use Drawer for quick create edit use full page for complex forms keep Dialogs for confirmations
+3,Table,Defining TanStack table columns inline inside page component,Not reusable no types hard to test hard to keep consistent leads to drift,Extract typed column configs to shared files or hooks use ColumnType generics
+4,Styling,Using inline sx props or random hex colors in components,Breaks theme switching impossible to maintain inconsistent look overrides do not work,Use MUI theme tokens via theme.palette theme.spacing theme.shape map semantic colors success error warning to palette
+5,State,Storing server filter sort page state only in local useState,Breaks browser back button not shareable via URL resets on refresh,Sync filter sort page with URL query params use controlled TanStack Table with external state
+6,Component,Creating a separate component for every tiny variation of a MUI Button,Component explosion hard to discover inconsistent prop surfaces,Use variant size color props on a single Button wrapper keep abstractions at medium granularity
+7,Drawer,Opening a MUI Drawer without clearing its internal form state on close,Previous data leaks into next open stale validation errors confusing UX,Reset form via react-hook-form reset in onClose or conditionally unmount open && <DrawerContent />
+8,Dialog,Using MUI Dialog without focus management or return focus,Keyboard users lose context focus lands at body violates accessibility,Use MUI Dialog which handles focus verify focus returns to trigger after close
+9,Table,Rendering raw IDs or unformatted dates in table cells,Hard to read looks unprofessional inconsistent with rest of app,Use formatters date-fns for dates number formatters status chips for states
+10,Form,Submitting forms without visual loading state on the submit button,Users click multiple times race conditions unclear if action was triggered,Set submitting state from RHF disable submit button or show CircularProgress during async submit
+11,Navigation,Hardcoding breadcrumb items per page,Drifts from actual routes duplicate data hard to maintain,Derive breadcrumbs from route config use route metadata for titles
+12,Card,Mixing business logic inside MUI Card presentation components,Breaks reusability couples UI to data fetching harder to test,Keep cards presentational fetch data in page container pass data via props
+13,Responsive,Hiding critical table columns on mobile without an alternative detail view,Users lose access to data on mobile poor UX,Use expandable rows or drawer for mobile detail or horizontal scroll with sticky first column
+14,Accessibility,Using color alone to indicate status via MUI Chip,Colorblind users cannot distinguish states fails WCAG,Add icons or text labels alongside color in StatusChip component
+15,Typography,Using arbitrary font sizes across pages instead of theme typography,Breaks visual rhythm inconsistent hierarchy harder to maintain,Use typography scale from MUI theme typography h1 h2 h3 body1 body2 caption
+16,MUI,Using MUI TablePagination for pagination logic instead of TanStack state,MUI TablePagination has rigid API does not match enterprise rounded tonal pagination style breaks visual consistency,Build custom Pagination wrapper around MUI Pagination with shape rounded variant tonal connected to TanStack table state
+17,MUI,Using MUI native Table without TanStack react-table,No typed columns no sorting no filtering no row selection no faceted filters hard to maintain at scale,Always use TanStack react-table for data logic render with native table or MUI Table components
+18,MUI,Using floating label TextField without shrink true,Label overlaps input value breaks enterprise label-above-input pattern looks unprofessional,Use slotProps inputLabel shrink true transform none on MUI TextField or use CustomTextField wrapper
+19,MUI,Missing CardHeader CardContent CardActions structure on cards,Card content looks unstructured missing visual hierarchy inconsistent padding,Always use CardHeader for title actions CardContent for body CardActions for buttons with Divider separators
+20,MUI,Using sx prop for business-specific colors instead of theme palette,Sx prop overrides are hard to grep and maintain break theme switching,Map business colors to theme palette customColors or use CSS variables from theme
+21,MUI,Using item prop on Grid in MUI v7,Item prop was removed in the v7 Grid formerly Grid2. It throws TypeScript errors.,Remove item prop. In MUI v7 all Grid children are items by default.
+22,MUI,Forgetting declare module for variant tonal,TypeScript will reject variant tonal on Button Chip Pagination without augmentation.,Add module augmentation for each component that supports custom variants.
+23,Next.js,Using MUI v7 without AppRouterCacheProvider,Causes CSS injection-order bugs and hydration mismatches in Next.js App Router.,Wrap app in AppRouterCacheProvider from @mui/material-nextjs/v14-appRouter.
+24,Form,Using rules required true alongside a schema resolver,Redundant and can cause conflicting error messages. RHF resolver already handles required checks.,Remove inline rules when using resolver. Trust the schema.
+25,Theme,Hardcoding palette colors instead of using colorSchemes,Breaks dark mode and CSS variable switching.,Define palettes inside theme.colorSchemes.light and theme.colorSchemes.dark.
+26,Theme,Forgetting CssBaseline in provider tree,Missing baseline resets and CSS variable support.,Render CssBaseline as child of ThemeProvider.
+27,Dialog,Forgetting closeAfterTransition false on confirmation dialogs,Focus-trap timing bugs especially with stacked sequential dialogs.,Set closeAfterTransition false on Dialog for confirmation dialogs.
+28,Form,Missing dirty-form confirmation on route leave,Users lose work accidentally when navigating away from unsaved forms.,Implement beforeunload event + router guard for dirty forms.
+29,Production,No React Error Boundaries at page or layout level,One crash whitescreens entire app.,Wrap routes in ErrorBoundary with fallback UI retry button error ID.
+30,Production,Using CircularProgress spinners instead of Skeleton for content loading,Layout shift CLS poor perceived performance.,Use MUI Skeleton for known-shape content like cards table rows stat values.
+31,Production,Missing request cancellation on unmount,Race conditions setState after unmount.,Use AbortController or TanStack Query cancellation.
+32,Production,No optimistic updates for mutations,UI feels sluggish users re-submit.,Use TanStack Query optimisticUpdate pattern with rollback on error.
+33,Production,Icon-only buttons without aria-label,Screen readers announce button with no context.,Enforce aria-label or visually hidden text on icon-only buttons.
+34,Production,Disabling focus outlines globally,Violates WCAG 2.4.7 keyboard users lose position.,Use focus-visible with 2px offset ring never outline none globally.
+35,Production,Missing aria-live on dynamic stat updates,Dashboard numbers change silently screen readers miss them.,Wrap StatCard in aria-live polite region.
+36,Production,Using div with onClick as button,Not keyboard-focusable or activatable.,Use MUI ButtonBase or IconButton.
+37,Production,Missing aria-expanded on custom collapsible panels,Screen readers do not know state of expandable content.,Add aria-expanded to Accordion ExpandableRow wrappers.
+38,Production,Toast notification stacks without role status,Screen readers miss async feedback.,Add role status or alert to Snackbar.
+39,Production,Missing key stability in mapped lists,Re-mounts destroy focus and state.,Use stable IDs never array index as key.
+40,Production,Client-side state mirroring server state,Stale data sync bugs.,Use server-state library TanStack Query instead of useState.
+41,Data,Hardcoding mock data inside chart or table components,Breaks when backend is ready impossible to swap to real API creates technical debt,Always use MSW json-server or API layer mock data never inline in components
+42,Data,Using useEffect fetch without caching or error handling,Causes excessive re-renders no loading states no retry poor UX,Use TanStack Query or SWR for all data fetching
+43,Data,No loading states for API-driven charts or tables,Users see blank or broken UI while data loads perceived as bug,Use Skeleton for charts spinners for buttons TanStack Query isLoading
+44,Data,Missing error handling for backend API failures,Users see crashes or infinite loaders with no recovery path,Implement error boundaries retry buttons fallback UI cached data display
+45,Data,Using setTimeout fake delays instead of MSW or real API,Unrealistic performance profile no contract validation no shared spec,Use MSW with realistic network delays or connect to real API
+46,Data,Keeping json-server or localStorage as production database,Data loss no multi-user support no security no scalability,Always plan migration path to real backend json-server is dev-only
+47,Data,No refetch strategy for real-time dashboard data,Shows stale data users miss critical updates dashboards feel dead,Use TanStack Query refetchInterval WebSocket SSE or polling
+48,Data,Exposing third-party API keys in frontend code,Security vulnerability keys can be stolen abuse rate limits,Proxy third-party APIs through backend never expose keys in frontend
+49,Data,No circuit breaker for unstable backend APIs,One failing API cascades to entire UI white screen of death,Implement fallback UI cached data graceful degradation retry with backoff
+50,Data,Mixing Zustand and TanStack Query without clear separation,Confusing data flow duplicate state sync bugs hard to debug,Use TanStack Query for server state Zustand for client state only
+51,Charts,Binding chart directly to raw API response without adapter,Tight coupling breaks when API changes chart logic mixed with data fetching,Create chart adapter function map API response to chart data shape
+52,Charts,No empty state for charts with zero data points,Empty chart looks broken or crashes chart library,Show empty state illustration or zero baseline when no data
+53,Charts,Using real-time updates without transition animations,Jarring jumps in chart data poor perceived performance,Use Recharts animation or smooth transitions for live data updates
+54,Charts,Fetching all chart data on every small filter change,Excessive API calls slow performance backend overload,Debounce filter changes use TanStack Query staleTime cache filter state in URL

package/assets/data/api-integration-patterns.csv

@@ -0,0 +1,16 @@
+id,pattern,use_case,frontend_stack,backend_type,implementation_notes,anti_patterns
+1,REST TanStack Query,CRUD operations list detail create update delete,React Next.js Vite,Any REST API,TanStack Query useQuery useMutation cache invalidation optimistic updates,Using useEffect + fetch without caching no error handling no retry logic
+2,REST SWR,Simple read-heavy dashboards real-time polling lightweight caching,React Next.js,Any REST API,SWR useSWR auto-revalidation deduping polling interval,Using raw fetch without caching no revalidation strategy
+3,GraphQL Apollo Client,Complex nested data relationships multiple entities in one query,React Next.js,GraphQL Apollo Server,Apollo Client useQuery useMutation cache normalization type policies,Over-fetching with REST when GraphQL available no fragment colocation
+4,GraphQL TanStack Query,Modern React apps with GraphQL preferring TanStack ecosystem,React Next.js,GraphQL Any,graphql-request + TanStack Query manual cache key management,Using Apollo just for GraphQL when simpler solutions exist
+5,WebSocket Native,Real-time chat notifications live updates low latency,Browser WebSocket,Socket.io WS,Native WebSocket API with reconnect logic heartbeat ping-pong,No reconnect logic no heartbeat memory leaks from unclosed connections
+6,Socket.io Client,Real-time bidirectional events rooms namespaces fallback support,React Vue,Socket.io Server,Socket.io client with auto-reconnect room management event namespacing,Using raw WebSocket when Socket.io features needed no room management
+7,STOMP SockJS,Spring Boot backend enterprise messaging topic subscription,React Angular,Spring Boot STOMP,SockJS + STOMP.js subscribe to topics send to destinations ack/nack,Using raw WebSocket with Spring STOMP no topic subscription no heart-beat
+8,Server-Sent Events,One-way server push live dashboards stock prices notifications,Browser EventSource,Any SSE endpoint,EventSource with reconnect polyfill for Edge custom headers handling,Using WebSocket for one-way data no reconnect for EventSource
+9,gRPC Web,High-performance internal services microservices protobuf contracts,React Angular,Envoy gRPC,gRPC-Web client protobuf code generation streaming support,Using REST for internal microservices when gRPC available
+10,TanStack Query + MSW,Frontend-first development contract-driven API mocking,React Next.js,Any future API,MSW browser + server worker mock REST GraphQL TanStack Query devtools,Hardcoding mock data in components no MSW setup using setTimeout fake delays
+11,json-server,Full fake REST API for rapid prototyping zero backend setup,Any frontend,None json-server,json-server with custom routes middleware db.json seed data,Keeping json-server in production using it for real data no migration path
+12,localStorage Mock,Simple persistence offline-first demo data no backend dependency,Any frontend,None,localStorage sessionStorage with schema validation hydration sync,Treating localStorage as production database no sync strategy data loss risk
+13,Swagger OpenAPI Codegen,Type-safe API clients generated from backend contract,React Angular Any,Any OpenAPI,OpenAPI Generator typescript-axios or typescript-fetch runtime validation,Manual typing of API responses no contract validation drift between frontend backend
+14,TRPC,End-to-end type-safe APIs with tRPC router zero schema duplication,React Next.js,tRPC Router,tRPC client useQuery useMutation with Zod validation batching,Using REST when tRPC available manual type definitions
+15,Zustand + API Layer,Lightweight state management with async data layer minimal boilerplate,React Zustand,Any API,Zustand store with async actions devtools middleware persistence,Mixing Zustand with TanStack Query without clear separation no store normalization

package/assets/data/charts.csv

@@ -0,0 +1,26 @@
+id,chart_type,library,use_case,admin_context,best_for_data,avoid_when
+1,Line Chart,Recharts / ApexCharts,Trend over time,Revenue users traffic growth over months,Time-series data continuous trends,Comparing discrete categories
+2,Area Chart,Recharts / ApexCharts,Volume under trend,Stacked revenue multiple metrics cumulative growth,Showing magnitude + trend together,When exact values matter more than shape
+3,Bar Chart,Recharts / MUI X-Charts,Comparing categories,Top products sales by region team performance,Discrete category comparison,Time-series with many points
+4,Horizontal Bar,Recharts / ApexCharts,Long category labels,Employee names product names country names,Category labels too long for vertical,Simple few categories
+5,Stacked Bar,Recharts / ApexCharts,Part-to-whole comparison,Revenue breakdown by product line team composition,Showing composition across categories,More than 5 segments
+6,Grouped Bar,Recharts / ApexCharts,Side-by-side comparison,This month vs last month actual vs target,Comparing multiple series per category,Too many groups
+7,Pie Chart,Recharts / MUI X-Charts,Simple proportion,Market share budget allocation status distribution,Simple 2-5 category proportions,More than 5 categories precision needed
+8,Donut Chart,Recharts / ApexCharts,Proportion with center metric,Utilization rate completion rate overall score,Showing proportion + center KPI,More than 5 categories
+9,Radar Chart,Recharts / ApexCharts,Multi-dimensional profile,Employee skills assessment system health score,5-8 dimensions profile comparison,More than 8 dimensions
+10,Heatmap,ApexCharts / MUI X-Charts,Density matrix,User activity by hour/day correlation matrix,Finding patterns in dense data,Simple sparse data
+11,Scatter Plot,Recharts / ApexCharts,Correlation analysis,Price vs sales customer age vs spend,Finding relationships clusters outliers,Single variable data
+12,Bubble Chart,Recharts / ApexCharts,3-variable correlation,Deal size vs probability vs revenue impact,Adding size dimension to scatter,Too many bubbles overlap
+13,Candlestick,ApexCharts / MUI X-Charts,Financial OHLC,Stock price crypto forex trading data,Open high low close financial data,Non-financial contexts
+14,Sparkline,Recharts / ApexCharts,Mini trend inline,Table row mini chart card header trend,Quick trend in small space,Detailed analysis needed
+15,Gauge Chart,ApexCharts / MUI X-Charts,Single KPI progress,CPU usage disk space quota utilization,0-100% progress toward goal,Multiple metrics
+16,Funnel Chart,Recharts / ApexCharts,Conversion stages,Sales pipeline recruitment funnel drop-off,Sequential stages with drop-off,Non-sequential data
+17,Sankey,Recharts / MUI X-Charts,Flow distribution,Budget flow user journey energy distribution,Showing flows between nodes,Simple linear data
+18,Treemap,Recharts / MUI X-Charts,Hierarchical proportion,Storage usage budget by department file sizes,Hierarchical part-to-whole,Flat non-hierarchical data
+19,Sunburst,Recharts / ApexCharts,Multi-level hierarchy,Org chart budget multi-level category drill-down,Multi-level ring hierarchy,Single level data
+20,Timeline,Gantt / custom,Project scheduling,Project milestones task dependencies roadmap,Time-based events with dependencies,Simple sequential list
+21,Gantt Chart,dhtmlx-gantt / custom,Project management,Resource allocation task scheduling dependencies,Tasks with start end dependencies,Simple task list
+22,Map,Leaflet / Mapbox,Geographic data,Sales by region logistics routes heatmap,Location-based data analysis,Non-geographic data
+23,Choropleth,Leaflet / Mapbox,Regional density,Regional sales population density coverage,Regional value comparison,Individual point data
+24,Table with Inline Bars,custom,Row-level comparison,Progress per row budget per department completion,Quick comparison within table rows,Detailed chart analysis
+25,Metric Cards,custom,KPI at a glance,Revenue users conversion rate active sessions,Single number with context trend,Detailed breakdown needed

package/assets/data/color-palettes.csv

@@ -0,0 +1,21 @@
+id,palette_name,industry,primary,secondary,accent,success,warning,error,info,background,text_primary,text_secondary,border,notes
+1,Corporate Blue,saas fintech crm,#2563EB,#3B82F6,#8B5CF6,#10B981,#F59E0B,#EF4444,#06B6D4,#F8FAFC,#1E293B,#64748B,#E2E8F0,Classic enterprise blue trustworthy professional
+2,Healthcare Teal,healthcare education,#0D9488,#14B8A6,#8B5CF6,#10B981,#F59E0B,#EF4444,#06B6D4,#F0FDFA,#134E4A,#5F6C72,#CCFBF1,Calming medical teal clean sterile
+3,Fintech Navy,fintech banking,#1E3A5F,#2D5A87,#D4AF37,#059669,#D97706,#DC2626,#0891B2,#F1F5F9,#0F172A,#475569,#CBD5E1,Deep navy gold accents premium banking
+4,E-commerce Orange,ecommerce retail,#EA580C,#F97316,#7C3AED,#16A34A,#EAB308,#DC2626,#0EA5E9,#FFFBEB,#1C1917,#57534E,#FED7AA,Energetic retail conversion-focused
+5,Logistics Blue,logistics supply-chain,#1D4ED8,#3B82F6,#06B6D4,#10B981,#F59E0B,#EF4444,#8B5CF6,#EFF6FF,#1E3A5F,#64748B,#BFDBFE,Map-friendly blues tracking cyan
+6,HR Purple,hr nonprofit,#7C3AED,#8B5CF6,#EC4899,#10B981,#F59E0B,#EF4444,#06B6D4,#FAF5FF,#1E1B4B,#6B7280,#E9D5FF,Warm people-focused purple
+7,Cybersecurity Dark,cybersecurity soc,#0F172A,#1E293B,#06B6D4,#10B981,#F59E0B,#EF4444,#3B82F6,#020617,#F8FAFC,#94A3B8,#1E293B,Dark SOC theme alert visibility
+8,Government Blue,government public,#1E40AF,#2563EB,#64748B,#16A34A,#CA8A04,#DC2626,#0891B2,#FFFFFF,#1E293B,#475569,#E2E8F0,Official trustworthy formal
+9,Energy Green,energy utilities,#15803D,#16A34A,#CA8A04,#16A34A,#EAB308,#DC2626,#0891B2,#F0FDF4,#14532D,#3F6212,#BBF7D0,Eco-friendly utility green
+10,Media Dark,media content,#18181B,#27272A,#EF4444,#10B981,#F59E0B,#EF4444,#3B82F6,#09090B,#FAFAFA,#A1A1AA,#27272A,Dark creative media charcoal
+11,ERP Industrial,erp manufacturing,#374151,#4B5563,#F97316,#16A34A,#EAB308,#DC2626,#6B7280,#F9FAFB,#111827,#6B7280,#E5E7EB,Industrial gray orange safety
+12,Real Estate Premium,real-estate property,#1E3A5F,#2D5A87,#D4AF37,#16A34A,#D97706,#DC2626,#0891B2,#FFFBEB,#0F172A,#475569,#FDE68A,Premium navy gold luxury
+13,Education Academic,education lms,#1D4ED8,#3B82F6,#F59E0B,#16A34A,#EAB308,#DC2626,#0EA5E9,#F8FAFC,#1E293B,#64748B,#DBEAFE,Academic blue trustworthy learning
+14,Soft SaaS,saas b2b,#6366F1,#818CF8,#EC4899,#10B981,#F59E0B,#EF4444,#06B6D4,#F8F7FA,#1E1B4B,#6B7280,#E0E0E0,Soft purple modern SaaS friendly
+15,Minimal Gray,minimalism generic,#334155,#475569,#0EA5E9,#10B981,#F59E0B,#EF4444,#06B6D4,#FFFFFF,#0F172A,#64748B,#E2E8F0,Minimal neutral versatile
+16,Dark Executive,executive board,#0F172A,#1E293B,#38BDF8,#10B981,#F59E0B,#EF4444,#3B82F6,#020617,#F1F5F9,#94A3B8,#1E293B,Dark mode executive premium
+17,Health Soft,healthcare wellness,#0D9488,#14B8A6,#F472B6,#10B981,#F59E0B,#EF4444,#06B6D4,#F0FDFA,#134E4A,#5F6C72,#CCFBF1,Soft teal pink accents calming
+18,Fintech Modern,fintech crypto,#111827,#1F2937,#F59E0B,#10B981,#D97706,#EF4444,#3B82F6,#F9FAFB,#111827,#4B5563,#E5E7EB,Modern fintech dark accents
+19,Nonprofit Warm,nonprofit ngo,#1D4ED8,#3B82F6,#F97316,#16A34A,#EAB308,#DC2626,#0EA5E9,#FFFBEB,#1C1917,#57534E,#FED7AA,Warm blue orange hope
+20,AI Purple,ai-native ml,#4F46E5,#6366F1,#A855F7,#10B981,#F59E0B,#EF4444,#06B6D4,#FAF5FF,#1E1B4B,#6B7280,#E9D5FF,AI purple futuristic

package/assets/data/component-standards.csv

@@ -0,0 +1,17 @@
+id,component,quality_standard,required_props,states,accessibility,responsive_notes,anti_patterns
+1,PageLayout,Consistent padding max-width background from MUI theme tokens supports header slot content slot sidebar slot layout modes skin navbar floating detached blur contentWidth compact wide footer detached,title breadcrumbs children className sidebar navbar footer skin navbarType contentWidth,loading empty,landmark regions main wrapper skip link support,padding reduces on mobile sidebar becomes drawer on mobile navbar becomes static on mobile,Random margins per page inline background colors no max-width missing layout mode support
+2,Card,MUI Card with CardHeader title extra CardContent children loading state bordered variant padding from theme skin aware default shadow bordered outline no shadow,title extra children className loading bordered skin,loading hover active,heading hierarchy aria-label if titled focusable actions,full-width on mobile padding scales down,Inconsistent padding hardcoded shadows inline borders no loading prop missing CardHeader structure
+3,DataTable,TanStack react-table with typed columns rowKey required MUI Pagination shape rounded variant tonal loading state empty custom scroll x horizontal borders only header 56px body 50px first last padding 24px internal 16px checkbox column 51px,columns data pagination loading rowKey rowSelection scroll size,loading empty error selected filtered,aria-label on table sort headers marked row actions keyboard accessible responsive scroll,horizontal scroll on overflow stack columns on mobile via config drawer for mobile detail,Missing rowKey inline column definitions no empty state default pagination without config vertical borders dense cramped rows using MUI TablePagination instead of custom Pagination
+4,FormSection,MUI Card with section title Divider grouped fields consistent spacing between fields responsive Grid spacing 6 section headers with font-section-token,title children layout className,default active error,fieldset legend semantics group labels error summary at top logical heading hierarchy,2-col on desktop 1-col on tablet mobile wrap to single column,No grouping random spacing inline grid styles missing labels missing section headers
+5,StatusChip,MUI Chip with semantic color mapping from tokens consistent border-radius small size default text transforms consistent icon plus text never color alone variant tonal,text status className size icon,default pending success error warning,aria-label for status color not sole indicator readable contrast icon accompanies text,scale text on mobile if needed maintain touch target,Random hex colors inline styles hardcoded sizes inconsistent naming color-only indicators
+6,OptionMenu,MUI Menu with IconButton trigger dropdown placement items as typed config disabled states confirm for destructive leftAlignMenu optional,items placement trigger disabledKeys,open closed disabled,trigger has aria-haspopup items keyboard navigable focus returns after close,full-width touch targets on mobile,Hardcoded menu items inline missing confirm on delete no disabled states
+7,Drawer,MUI Drawer with consistent width from theme header body footer layout close button mask closable config width 300-400px mobile full-width anchor right manual reset on close or conditional unmount,title children footer width onClose open,open closed closing,aria-modal focus trap escape to close return focus to trigger,full-width on mobile <= 768px width 300 xs 400 sm desktop,Multiple drawers stacked no focus management hardcoded widths complex forms inside small drawer
+8,Dialog,MUI Dialog centered consistent maxWidth per type DialogTitle DialogContent DialogActions mask closable keyboard escape maxWidth md for edit forms scroll body closeAfterTransition false for confirmations,title children footer width open onOk onCancel,open closing loading,aria-modal focus trap role dialog labeled by header,full-width on mobile with padding maxWidth md for complex forms,Complex multi-section forms inside dialog no focus trap missing onCancel hardcoded pixel widths small dialog for complex forms
+9,SubmitBar,MUI CardActions or sticky footer primary Button variant contained plus secondary Button variant tonal loading state on primary cancel confirmation if dirty,onSubmit onCancel submitText cancelText loading dirty,idle loading disabled confirm,button labels clear focus order logical loading state announced primary action visually dominant,stack buttons vertically on mobile with full width primary on top,Buttons scattered in page no loading state missing cancel no dirty guard
+10,SearchFilterBar,MUI TextField with InputAdornment icon collapse extra filters apply clear buttons sync with URL optional debounced 500ms global search page-size Select 10 25 50,onSearch onFilter onClear filters collapsed,default searching filtered empty,search input has aria-label clear button labeled focus stays after apply,wrap on mobile filters go to drawer page-size remains visible,crowded filters in header no clear missing search state inline input styles no debounce
+11,CustomTextField,MUI TextField variant filled with styled overrides to look outlined label above input fullWidth default size small focus state 2px border primary-sm shadow start adornment for icon placeholder always provided helper text for errors slotProps inputLabel shrink true transform none,label placeholder fullWidth error helperText startAdornment slotProps,default focused error disabled,label associated with input via htmlFor aria-describedby for helper error text visible required indicators,full-width on mobile maintain 44px touch height,Floating labels without shrink inline border styles missing placeholder no error helper text no start adornment using outlined instead of filled with overrides
+12,StatCard,MUI Card horizontal layout stats left avatar right OR vertical avatar top stats below Chip optional tonal variant border accent optional CardContent padding from theme,stats title avatarIcon avatarColor avatarSize avatarSkin chipText chipColor direction,default loading,semantic heading for stat value readable contrast icon accompanies color,stack vertically on mobile full width maintain padding,Random card sizes inconsistent avatar sizes missing loading state business logic inside card
+13,Button,MUI Button with variant contained primary variant tonal secondary variant outlined neutral loading state via CircularProgress startIcon endIcon active scale transform 0.98 for tactile feedback,variant color children onClick loading disabled startIcon endIcon,idle hover active focus loading,aria-label if icon-only focus visible keyboard accessible touch target >= 44px,full-width on mobile stacked actions,Random colors per button inconsistent sizing missing loading state
+14,Pagination,MUI Pagination with shape rounded variant tonal color primary showFirstButton showLastButton controlled page count from table state connected to TanStack table state,page count onChange color shape variant,default active disabled,aria-label for pagination navigation current page marked,scales to fit mobile wraps if needed,Hardcoded page numbers inline pagination missing table state connection using TablePagination for logic
+15,Skeleton,MUI Skeleton for known-shape content loading instead of CircularProgress spinner,variant width height animation,default wave pulse,aria-hidden true reduce motion support,full-width on mobile maintain aspect ratio,Using CircularProgress for content loading causing layout shift no skeleton for cards tables stat values
+16,ErrorBoundary,React ErrorBoundary at page or layout level with fallback UI retry button error ID,children fallback fallbackProps,default error,aria-live polite for error announcement,wraps full page content on mobile,No error boundaries one crash whitescreens entire app

package/assets/data/data-source-strategies.csv

@@ -0,0 +1,11 @@
+id,scenario,detection_method,frontend_approach,mock_strategy,real_time_approach,chart_integration,notes
+1,Backend exists + API documented,Check for OpenAPI Swagger Postman collection package.json proxy config,Connect to real API immediately TanStack Query or SWR,None use real data,WebSocket STOMP SSE or polling via TanStack Query refetchInterval,Use real API data with Recharts ApexCharts MUI X-Charts bind to query data,Preferred path always use real data when backend available
+2,Backend exists + API not documented,Check network tab for existing endpoints inspect backend routes package.json proxy,Explore existing endpoints first document as you go reverse engineer,MSW with discovered endpoints until backend stabilized,TanStack Query with polling fallback to WebSocket when available,Fetch data via discovered endpoints normalize for charts,Document API contract incrementally share with backend team
+3,Backend in development not ready,Check for backend repo branch status CI/CD pipeline health staging environment,MSW or json-server with agreed contract use TanStack Query,MSW browser + server worker with shared mock contract between frontend backend,TanStack Query with short polling simulate real-time with MSW delay,MSW mock data structured for charts same shape as real API will be,Align mock contract with backend team ensure schema match
+4,No backend frontend-first project,Check for backend repo absence no API docs no proxy config,json-server or localStorage mock with TanStack Query,json-server for REST or localStorage for simple persistence,Simulated polling with setInterval json-server watch mode,json-server db.json with chart data structure easy to swap to real API,Build as if real API exists use json-server as contract prototype
+5,Backend exists but unstable,Check API health endpoint error rates response times,Implement retry logic circuit breaker fallback UI use TanStack Query,MSW fallback mode when backend down graceful degradation,TanStack Query with exponential backoff retry stale-while-revalidate,Show cached data with stale indicator fallback to last known good data,Resilience first never block UI on backend failure
+6,Backend exists but no real-time support,Check for WebSocket SSE gRPC streaming endpoints,Long polling via TanStack Query refetchInterval optimistic updates,MSW with polling simulation for development,TanStack Query refetchInterval 5-30s based on data criticality,Update charts on each poll use transition animations for smooth updates,Evaluate if real-time is truly needed or polling is sufficient
+7,Backend exists + full real-time,Check for WebSocket STOMP Socket.io SSE endpoints,Connect to real-time channel immediately use Zustand or TanStack Query for sync,MSW with Socket.io mock for development only,Native WebSocket Socket.io STOMP SSE based on backend stack,Recharts ApexCharts with live data streams real-time update animations,Best case scenario full real-time dashboard experience
+8,Backend exists + GraphQL,Check for GraphQL endpoint playground schema,Apollo Client or TanStack Query with graphql-request fragment colocation,MSW with GraphQL request handler for development,TanStack Query with polling or GraphQL subscriptions when available,Chart data from single GraphQL query with nested fragments colocated,Use fragments for chart data shapes colocate with chart components
+9,Microservices multiple backends,Check API gateway service mesh BFF pattern multiple OpenAPI specs,API aggregation layer BFF TanStack Query with multiple query sources,MSW with multiple request handlers for each service,Independent polling per service or unified WebSocket gateway,Aggregate data from multiple services into unified chart datasets,Use BFF pattern to simplify frontend avoid N+1 queries from UI
+10,Third-party API integration,Check for external API keys rate limits documentation CORS policy,TanStack Query with external API endpoint proxy through backend if CORS issue,MSW with third-party response shape for development caching strategy,TanStack Query with refetchInterval respect rate limits cache aggressively,Normalize third-party data to internal chart schema adapter pattern,Always proxy third-party APIs through backend never expose keys in frontend

package/assets/data/industries.csv

@@ -0,0 +1,16 @@
+id,industry,display_name,pattern,style_priority,color_mood,typography_mood,key_effects,anti_patterns
+1,saas,SaaS / B2B Platform,Feature-Rich Dashboard + Onboarding,bento-grid minimalism soft-ui,Clean blues + white + accent purple,Inter / Public Sans sans-serif,Micro-interactions smooth transitions 200ms subtle shadows,Skeuomorphism bright neon colors cluttered hero slow animations
+2,fintech,Fintech / Banking,Data-Dense Dashboard + Transaction Table,minimalism dark-mode-optional glassmorphism,Deep navy + emerald green + gold accents,Plus Jakarta Sans / DM Sans modern geometric,Real-time data updates subtle pulse animations card hover elevation,Playful colors rounded corners everywhere emoji icons insufficient contrast
+3,healthcare,Healthcare / Medical,Patient List + Appointment Calendar + Charts,minimalism accessible soft-ui,Soft teal + white + warm gray + alert red,Open Sans / Roboto highly readable,Clear visual hierarchy status badges with icons gentle transitions,Small text poor contrast complex medical jargon without tooltips missing loading states
+4,ecommerce,E-commerce Admin,Order Management + Inventory Grid + Sales Charts,bento-grid data-dense,Orange accent + white + dark sidebar + success green,Inter / Source Sans Pro clean functional,Quick actions contextual menus real-time stock indicators,Bright sales-y colors distracting animations missing empty states for out-of-stock
+5,logistics,Logistics / Supply Chain,Map + Shipment Tracker + Fleet Table,real-time-monitoring glassmorphism,Deep blue + bright cyan + warning amber + map green,Roboto Mono / Inter monospace for tracking IDs,Map integrations timeline views live status indicators,Cluttered maps poor mobile experience missing offline indicators
+6,hr,HR / People Management,Employee Directory + Org Chart + Payroll Table,minimalism soft-ui bento-grid,Warm purple + soft gray + white + status colors,Work Sans / Lato friendly professional,Profile cards org tree visualizations approval workflows,Overly casual fonts missing privacy indicators complex navigation too many clicks
+7,crm,CRM / Sales,Pipeline Board + Contact List + Activity Feed,bento-grid soft-ui,Electric blue + white + warm gray + deal stage colors,Inter / SF Pro clean crisp,Drag-drop pipeline activity timelines win/loss indicators,Missing empty pipeline states poor mobile card layout overwhelming notifications
+8,erp,ERP / Manufacturing,Production Dashboard + Inventory + BOM Table,data-dense executive,Industrial gray + safety orange + machine blue + alert red,IBM Plex Sans / Roboto technical precise,Machine status gauges production line visuals alert banners,Overly decorative fonts cluttered tables missing real-time indicators slow refresh
+9,education,Education / LMS,Course List + Student Progress + Gradebook,minimalism accessible soft-ui,Academic blue + warm white + success green + caution amber,Lora / Open Sans readable elegant,Progress bars achievement badges calendar views,Childish fonts excessive gamification poor accessibility missing progress persistence
+10,government,Government / Public Sector,Case Management + Document List + Reporting,minimalism accessible flat-design,Official blue + white + gray + priority red,Merriweather / Open Sans formal trustworthy,Clear status workflows document version tracking audit trails,Political colors overly modern flashy design missing WCAG compliance complex language
+11,cybersecurity,Cybersecurity / SOC,Alert Feed + Threat Map + Incident Table,dark-mode hud-scifi,Deep black + alert red + cyber cyan + warning amber,Fira Code / Inter monospace for logs technical,Dark theme real-time alerts threat level indicators SOC timeline,Light theme by default poor alert visibility cluttered dashboards missing severity colors
+12,real-estate,Real Estate / Property,Property Grid + Map + Lead Pipeline,bento-grid soft-ui,Premium navy + gold accent + white + status green,Playfair Display / Inter luxury clean,Property cards map pins lead scoring visual comparison tools,Excessive imagery poor table performance missing price formatting cluttered filters
+13,energy,Energy / Utilities,Grid Monitor + Meter Readings + Outage Map,real-time-monitoring data-dense,Power blue + grid yellow + outage red + eco green,Roboto / Source Sans Pro technical functional,Real-time gauges geographic outage maps consumption charts,Missing time-series data poor mobile map experience slow data refresh
+14,media,Media / Content Management,Asset Library + Editorial Calendar + Analytics,minimalism bento-grid,Dark charcoal + vibrant accent + white + video red,Montserrat / Inter modern dynamic,Media previews drag-drop upload editorial timeline engagement charts,Cluttered asset grids missing metadata poor search missing preview thumbnails
+15,nonprofit,Nonprofit / NGO,Donor CRM + Campaign Tracker + Impact Dashboard,soft-ui accessible minimalism,Hope blue + growth green + warm white + heart red,Merriweather / Lora trustworthy warm,Donor profiles campaign progress impact visualization volunteer management,Overly corporate design missing donation CTAs poor mobile donation flow complex reporting

package/assets/data/page-patterns.csv

@@ -0,0 +1,9 @@
+id,page_type,visual_pattern,mui_architecture,reusable_components,required_states,anti_patterns
+1,CRUD List Page,Clean card-based list with header toolbar bordered table status chips tonal action dropdowns pagination footer search plus filters in card header table header 56px body 50px horizontal borders only,Card with CardHeader and CardContent TanStack react-table with typed columns MUI Pagination shape rounded variant tonal MUI Chip status OptionMenu row actions MUI TextField search with InputAdornment debounced 500ms filters in Drawer,PageLayout Card SearchFilterBar DataTable StatusChip OptionMenu Pagination StatCard,loading empty error filtered emptySearch selectedRows bulkActionLoading,Putting filters inside small dialog no loading state no empty state inline edit inside table without drawer missing rowKey vertical table borders inline column definitions using MUI TablePagination
+2,Complex Form Page,Single column or two-column card layout section headers with subtle separators footer action bar with primary contained plus secondary tonal buttons helper text under fields label above input focus ring primary shadow,react-hook-form with Controller validation rules inline or valibot schema MUI TextField fullWidth label-above shrink true focus 2px border primary-sm shadow MUI Grid spacing 6 CardActions submit loading cancel confirmation dirty tracking,PageLayout Card SectionHeader FormGrid CustomTextField SubmitBar FormGuard,loading dirty submitting validating success error cancelConfirm,Putting complex forms in Dialogs no validation feedback inline sx props hardcoded widths missing dirty guard no loading on submit floating labels without shrink
+3,Dashboard Page,Widget grid with KPI cards horizontal or vertical stat cards with avatar and tonal chip chart cards recent activity list quick action buttons balanced spacing visual hierarchy via card elevation 24px gaps,MUI Card with CardHeader CardContent Grid spacing 6 StatCard ChartCard ActivityList QuickActionGrid MUI Chip tonal no business logic inside presentational cards,PageLayout StatCard ChartCard ActivityList QuickActionGrid CardStatsSquare Skeleton,loading partialError refreshing emptyWidget,Hardcoding chart library inside page no loading skeletons inconsistent card padding missing grid breakpoints business data mixed with UI layout missing tonal chip variants
+4,Detail Page,Two-column layout summary card left details tabs right back button in header status badge prominent tonal action buttons grouped top-right related lists at bottom cards stacked vertically 24px gap,MUI Card with CardHeader CardContent MUI Tabs for sections MUI Descriptions for read-only fields Drawer for quick edits Dialog for delete confirmation card per section pattern MUI Grid spacing 6,PageLayout PageHeader DetailTabs DescriptionsCard StatusChip ActionGroup RelatedTable Card,loading notFound editing deleting tabKey,Putting everything on one long page without tabs editable fields inline without form abstraction missing back navigation no not-found state no card separation
+5,Settings Page,Sidebar tabs or top tabs with pill style grouped sections per category toggle switches save-per-section or global save subtle success feedback multiple stacked cards per tab 24px gaps between cards avatar upload row above form fields,MUI Tabs pill style scrollable MUI Card per section with CardHeader CardContent MUI Switch toggles react-hook-form per section dirty tracking MUI CardActions save reset confirm on destructive changes avatar upload row,PageLayout SettingsNav SettingsSection FormSection ToggleField SaveFeedback CustomTextField Card,loading saving dirty success error confirmSensitive,One giant form for all settings no section isolation missing success feedback no confirm on destructive changes inline sx props per section missing avatar upload pattern
+6,Wizard Page,Stepper with numbered steps horizontal or vertical card container per step navigation buttons previous next skip summary review step at end progress indicator,react-hook-form with step validation schema per step MUI Stepper StepLabel StepContent form state persisted across steps validation on step advance summary review before submit,PageLayout WizardStepper StepContent FormGrid SubmitBar FormGuard StepNavigation,loading validating stepError submitting success stepIndex,Putting all steps in one giant form without per-step validation no progress indicator no summary review step missing back navigation
+7,Auth Page,Centered card on blank layout no sidebar no navbar illustration left or top form right or below logo above form social login buttons forgot password link register link,MUI Card on BlankLayout MUI TextField with InputAdornment icons react-hook-form validation MUI Button contained fullWidth MUI Divider with or continue text social auth buttons,BlankLayout AuthCard Logo CustomTextField SubmitBar SocialButton ForgotPasswordLink,loading submitting error success validating,Using full dashboard layout for auth pages no validation feedback inline styles no loading state on submit missing password visibility toggle
+8,Blank Layout,Full-width centered content no sidebar no navbar minimal footer optional background color or gradient centered card or content,BlankLayout component with centered flex container optional background optional footer minimal routing without auth guard,BlankLayout CenteredContent Background OptionalFooter,loading error,Using dashboard layout for blank pages sidebar visible on login pages navbar present on error pages

package/assets/data/pre-delivery-checklist.csv

@@ -0,0 +1,36 @@
+id,page_type,check,severity,why_it_matters
+1,all,All interactive elements have hover states and cursor-pointer,Critical,Users need visual feedback on clickable elements
+2,all,Focus states are visible and consistent across all components,Critical,Keyboard navigation requires clear focus indicators
+3,all,No emojis used as icons — only SVG or icon font icons,Critical,Emojis render inconsistently across OS and look unprofessional
+4,all,Text contrast meets 4.5:1 minimum in light mode,Critical,WCAG AA compliance and readability
+5,all,prefers-reduced-motion is respected for all animations,High,Accessibility for users with vestibular disorders
+6,all,Responsive breakpoints tested: 375px 768px 1024px 1440px,High,Mobile tablet desktop large desktop coverage
+7,all,Loading states present for all async operations,High,Users need feedback during data fetching
+8,all,Empty states designed for every list table grid,High,Empty data should not look broken
+9,all,Error states with helpful messages and recovery actions,High,Users need guidance when things go wrong
+10,all,Browser back button works correctly for filter sort page state,High,Expected browser behavior must be preserved
+11,all,No console errors or warnings in production build,Medium,Clean console indicates code quality
+12,all,All images have alt text or aria-hidden if decorative,Medium,Screen reader compatibility
+13,all,Tab order follows logical reading order,Medium,Keyboard navigation must be intuitive
+14,all,No inline styles on generic UI primitives,Medium,Maintainability and theme consistency
+15,all,Form inputs have associated labels and error links,Medium,Accessibility and validation clarity
+16,crud-list,Table row actions are keyboard accessible,High,All users must access actions without mouse
+17,crud-list,Pagination updates URL query params,Medium,Shareable and bookmarkable page states
+18,crud-list,Search debounce is 300-500ms not instant,Medium,Prevents API flooding and improves UX
+19,crud-list,Bulk actions disabled when no rows selected,Medium,Prevents invalid operations
+20,complex-form,Dirty form confirmation before route leave,High,Prevents accidental data loss
+21,complex-form,Submit button disabled while invalid,High,Prevents invalid submissions
+22,complex-form,Form sections collapse gracefully on mobile,Medium,Mobile form UX must be usable
+23,dashboard,Skeleton screens used instead of spinners for initial load,High,Reduces layout shift improves perceived performance
+24,dashboard,Charts have loading and empty states,High,Data visualization must handle all states
+25,dashboard,Auto-refresh interval is reasonable not excessive,Medium,Prevents server overload
+26,detail,Back navigation returns to correct list state,High,User expects to return to same context
+27,detail,Related data lazy-loaded not blocking initial render,Medium,Improves initial page load speed
+28,settings,Each section saves independently or global save is explicit,High,Prevents accidental partial saves
+29,settings,Toggle switches have immediate feedback with undo capability,Medium,Users need confirmation for state changes
+30,wizard,Step validation prevents forward navigation when invalid,High,Wizard must enforce data quality per step
+31,wizard,Progress indicator shows current step and total steps,High,Users need orientation in multi-step flows
+32,wizard,Summary review step before final submit,High,Prevents accidental submissions
+33,auth,Password visibility toggle present,Medium,Improves UX for password entry
+34,auth,Form focuses first input on load,Low,Small UX improvement for keyboard users
+35,auth,Social login buttons match brand colors,Low,Visual consistency with external services

package/assets/data/review-rubric.csv

@@ -0,0 +1,11 @@
+id,category,score_1_3,score_4_6,score_7_8,score_9_10
+1,Premium Admin Visual Quality,Layout is broken or unrecognizable as admin UI; no cards; random spacing,Cards present but inconsistent; spacing varies; some hierarchy; looks like generic AntD,Clean card hierarchy; consistent spacing; feels like admin panel; status chips styled,Premium Enterprise admin feel; balanced rhythm; excellent hierarchy; polished status and actions; visually cohesive
+2,AntD Architecture Quality,No typed props; inline everything; no reusable components; raw AntD dumped,Some abstractions; partial types; mixed patterns; inconsistent API surfaces,Good component boundaries; typed props; consistent Form/Table patterns; token usage,Excellent architecture; predictable APIs; disciplined abstractions; token-first; fully typed
+3,Component Reusability,Everything inline; copy-paste patterns; no shared UI primitives,Some shared components but inconsistent props; magic numbers; hardcoded text,Reusable PageLayout Card Table Form primitives; configurable via props,Highly reusable system; composable patterns; design-token driven; minimal duplication
+4,Form Quality,No validation; no loading; no feedback; inline styles; missing labels,Basic validation; some feedback; inconsistent layout; partial loading state,Full typed Form; validation rules; helper text; dirty guard; responsive grid,Enterprise form discipline; accessible labels; clear errors; submit loading; cancel/reset; sectioned layout
+5,Table Quality,No pagination; no sorting; no rowKey; no empty state; inline columns,Basic table with some features; missing loading or error state; hardcoded columns,Typed columns; loading/empty/error; pagination; sorting; row actions; responsive plan,Production table standard; server-side ready; accessible headers; status tags; formatted values; bulk actions
+6,State Handling,Local state chaos; no loading states; no error boundaries; race conditions,Some state management; inconsistent loading; partial error handling,Consistent loading/error/empty; predictable state flow; form dirty tracking,Robust state discipline; optimistic updates where needed; clear state machines; no race conditions
+7,Responsiveness,Broken on mobile; horizontal overflow; unreadable text; no breakpoints,Partial responsiveness; some overflow issues; cramped on tablet,Responsive grid; readable on mobile; drawers for filters; tables scroll or stack,Fully responsive; mobile-first considerations; adaptive navigation; touch-friendly targets
+8,Accessibility,Major a11y violations; no labels; no focus management; poor contrast,Some labels; partial focus management; mixed contrast,Accessible forms and tables; focus management in modals/drawers; semantic HTML,WCAG-aligned; keyboard navigable; screen-reader friendly; color not sole indicator; focus visible
+9,Maintainability,Spaghetti code; magic numbers; no types; impossible to refactor,Some types; mixed conventions; hard to extend,Clear conventions; typed; reusable; documented patterns,Exceptionally maintainable; self-documenting; minimal tech debt; easy to extend
+10,Production Readiness,Crashes; no error handling; insecure; unresponsive UI,Basic error handling; some edge cases covered; mostly stable,Handles errors gracefully; loading states; validation; stable UX,Enterprise production grade; resilient; performant; secure; monitored

package/assets/data/styles.csv

@@ -0,0 +1,16 @@
+id,style_name,display_name,description,best_for,keywords,performance,accessibility,admin_suitability
+1,minimalism,Minimalism & Swiss Style,Clean whitespace crisp typography clear hierarchy no decorative elements,Enterprise dashboards data-heavy apps documentation,Whitespace grid system sans-serif clean lines neutral colors,Excellent,Excellent,10
+2,bento-grid,Bento Box Grid,Card-based modular layout grid with varied cell sizes dashboard widgets,Admin dashboards analytics product features status overview,Modular cards widgets grid layout information density snapping,Excellent,Excellent,10
+3,dark-mode,Dark Mode (OLED),Deep blacks with high contrast elements reduced eye strain night-friendly,DevOps monitoring cybersecurity night-shift operations coding platforms,OLED pure black high contrast neon accents reduced glare,Good,Good,9
+4,soft-ui,Soft UI Evolution,Rounded corners subtle shadows gentle gradients calming visual weight modern SaaS,HR healthcare wellness customer support non-technical users,Soft shadows rounded corners gentle gradients pastel tones calming,Excellent,Excellent,9
+5,glassmorphism,Glassmorphism,Translucent frosted glass effect with backdrop blur layered depth modern feel,Financial dashboards premium SaaS creative admin modern startups,Translucency blur backdrop-filter layered depth refraction light,Medium,Medium,7
+6,data-dense,Data-Dense Dashboard,Maximum information density compact tables inline charts minimal padding power user,Trading ERP manufacturing supply chain operations power users,Compact tables inline charts minimal whitespace high density monochrome,Good,Medium,10
+7,executive,Executive Dashboard,High-level KPIs summary cards trend sparklines minimal detail C-suite focused,C-suite executives board meetings quarterly reviews high-level overview,Large numbers trend arrows sparklines minimal text snapshot view,Excellent,Excellent,8
+8,real-time,Real-Time Monitoring,Live data streams pulse indicators auto-refreshing counters operational focus,DevOps IoT logistics network monitoring call centers operations,Live counters pulsing dots auto-refresh timelines real-time badges,Good,Good,9
+9,accessible,Accessible & Inclusive,High contrast large touch targets screen-reader optimized reduced motion,Government healthcare education public sector compliance-required,High contrast large fonts focus visible reduced motion screen-reader,Excellent,Excellent,10
+10,claymorphism,Claymorphism,3D-like soft extruded shapes inner shadows playful depth educational friendly,Educational admin nonprofit HR training platforms children's apps,Inner shadows soft 3D extrusion playful depth pastel colors rounded,Medium,Good,6
+11,ai-native,AI-Native UI,Chat-first interfaces prompt boxes streaming text avatar indicators agent focus,AI platforms chatbots copilot admin AI-powered analytics,Streaming text typing indicators avatar bubbles prompt interfaces,Medium,Medium,7
+12,neumorphism,Neumorphism,Soft extruded shapes that look like they push out from background subtle depth,Health wellness meditation minimalist admin soft aesthetic,Soft shadows extruded shapes monochrome subtle depth tactile feel,Medium,Medium,5
+13,brutalism,Brutalism,Raw unpolished high contrast bold typography unapologetic design artistic,Creative agencies design portfolios artistic admin experimental,High contrast bold borders raw typography unpolished expressive,Medium,Medium,3
+14,liquid-glass,Liquid Glass,Premium translucent surfaces with light refraction high-end aesthetic 2025+,Premium SaaS high-end e-commerce luxury admin high-visibility products,Refraction light caustics premium translucent depth high-end,Medium,Medium,6
+15,motion-driven,Motion-Driven,Animations guide attention transitions explain state changes storytelling,Portfolio admin storytelling dashboards onboarding flows walkthroughs,Smooth transitions scroll animations state change animations guides,Medium,Medium,6

package/assets/data/tokens.csv

@@ -0,0 +1,89 @@
+id,token_type,semantic_name,purpose,example_value,avoid
+1,spacing,space-xs,Tight gaps icon text inline MUI spacing 0.25rem,4px,Random 3px or 5px
+2,spacing,space-sm,Small gaps between related items MUI spacing 0.5rem,8px,Using 10px inconsistently
+3,spacing,space-md,Default component padding and gaps MUI spacing 1rem,16px,Mixing 14px and 18px
+4,spacing,space-lg,Section gaps and card padding MUI spacing 1.5rem,24px,Hardcoding 20px or 30px per page
+5,spacing,space-xl,Page-level spacing between major sections MUI spacing 2rem,32px,Arbitrary 40px without reason
+6,spacing,space-xxl,Hero or dashboard section separation MUI spacing 3rem,48px,Inconsistent large gaps
+7,spacing,space-dense,Dense action bar padding MUI spacing 0.75rem,12px,Hardcoding 10px or 14px in action bars
+8,color,color-primary,Primary actions links buttons MUI palette primary main,#7367F0,Random purple or brand color per component
+9,color,color-secondary,Secondary actions neutral elements MUI palette secondary main,#808390,Hardcoding gray per component
+10,color,color-success,Success states positive feedback MUI palette success main,#28C76F,Green variations per file
+11,color,color-warning,Warning states caution MUI palette warning main,#FF9F43,Orange variations per file
+12,color,color-error,Error states validation failures MUI palette error main,#FF4C51,Red variations per file
+13,color,color-info,Informational neutral highlights MUI palette info main,#00BAD1,Cyan variations per file
+14,color,color-bg-page,Page background color MUI palette background default,#F8F7FA,White on every page or random gray
+15,color,color-bg-card,Card background surface MUI palette background paper,#FFFFFF,Transparent cards with random backgrounds
+16,color,color-text-primary,Primary text headings body MUI palette text primary,rgb(var(--mui-mainColorChannels-light) / 0.9),Pure black #000000
+17,color,color-text-secondary,Secondary text captions meta MUI palette text secondary,rgb(var(--mui-mainColorChannels-light) / 0.7),Hardcoded lighter grays per file
+18,color,color-border,Default borders dividers MUI palette divider,rgb(var(--mui-mainColorChannels-light) / 0.12),Hardcoded #d9d9d9 in some places
+19,opacity,opacity-lighter,Very light tint backgrounds 0.08,0.08,Random opacity values per component
+20,opacity,opacity-light,Light tint backgrounds 0.16,0.16,Inconsistent opacity values
+21,opacity,opacity-main,Medium tint backgrounds 0.3,0.3,Hardcoded opacity strings
+22,opacity,opacity-dark,Dark tint backgrounds 0.5,0.5,Missing opacity scale
+23,opacity,opacity-darker,Darker tint backgrounds 0.7,0.7,Inconsistent darker values
+24,radius,radius-xs,Extra small tags badges MUI shape customBorderRadius xs,2px,0px on small interactive elements
+25,radius,radius-sm,Small tags badges chips MUI shape customBorderRadius sm,4px,0px or 2px randomly
+26,radius,radius-md,Default cards buttons inputs MUI shape customBorderRadius md,6px,Mixing 5px and 8px
+27,radius,radius-lg,Large modals drawers panels MUI shape customBorderRadius lg,8px,Inconsistent large radius
+28,radius,radius-xl,Extra large floating elements MUI shape customBorderRadius xl,10px,Hardcoding 12px+ without token
+29,shadow,shadow-xs,Subtle input focus or hover MUI customShadows xs,0px 1px 6px rgb(var(--mui-mainColorChannels-modeShadow) / 0.1),Hardcoded rgba shadows
+30,shadow,shadow-sm,Subtle card hover or dropdown MUI customShadows sm,0px 2px 8px rgb(var(--mui-mainColorChannels-modeShadow) / 0.12),Hardcoded rgba shadows
+31,shadow,shadow-md,Default card elevation MUI customShadows md,0px 3px 12px rgb(var(--mui-mainColorChannels-modeShadow) / 0.14),Hardcoded rgba shadows
+32,shadow,shadow-lg,Modals drawers floating panels MUI customShadows lg,0px 4px 18px rgb(var(--mui-mainColorChannels-modeShadow) / 0.16),Hardcoded rgba shadows
+33,shadow,shadow-xl,Large floating panels dialogs MUI customShadows xl,0px 5px 20px rgb(var(--mui-mainColorChannels-modeShadow) / 0.18),Hardcoded rgba shadows
+34,shadow,shadow-primary-sm,Primary tinted focus hover MUI customShadows primarySm,0px 2px 6px rgb(var(--mui-palette-primary-mainChannel) / 0.3),Hardcoded purple rgba
+35,shadow,shadow-primary-md,Primary tinted card button elevation MUI customShadows primaryMd,0px 4px 16px rgb(var(--mui-palette-primary-mainChannel) / 0.4),Hardcoded purple rgba
+36,shadow,shadow-success-sm,Success tinted shadow MUI customShadows successSm,0px 2px 6px rgb(var(--mui-palette-success-mainChannel) / 0.3),Missing color-specific shadows
+37,shadow,shadow-error-sm,Error tinted shadow MUI customShadows errorSm,0px 2px 6px rgb(var(--mui-palette-error-mainChannel) / 0.3),Missing color-specific shadows
+38,shadow,shadow-warning-sm,Warning tinted shadow MUI customShadows warningSm,0px 2px 6px rgb(var(--mui-palette-warning-mainChannel) / 0.3),Missing color-specific shadows
+39,typography,font-family,Base font family MUI typography fontFamily,"Public Sans, sans-serif",System-ui or different font per page
+40,typography,font-size-base,Base body font size MUI typography fontSize,13.125px,Random 12px or 14px base
+41,typography,font-page-title,Top-level page headings MUI typography h4,"24px, 600",Arbitrary 22px or 26px
+42,typography,font-section-title,Card and section headings MUI typography h6,"18px, 600",Arbitrary 16px or 20px
+43,typography,font-body,Default body text MUI typography body1,"15px, 400",Mixing 13px and 15px
+44,typography,font-caption,Meta helper small text MUI typography caption,"12px, 400",Hardcoded 11px
+45,typography,font-btn,Button text MUI typography button,"15px, 400, textTransform none",Different button sizes per page
+46,typography,font-overline,Table header label style MUI typography overline,"12px, 500, letterSpacing 0.8px",Normal case or inconsistent weight
+47,typography,font-table-body,Table body text CSS module override,"15px, 400",Inconsistent sizes per table
+48,layout,header-height,Navbar header height CSS variable,54px,Hardcoding 60px or 48px
+49,layout,sidebar-width,Expanded sidebar width CSS variable,260px,Random 240px or 280px
+50,layout,sidebar-collapsed,Collapsed sidebar width CSS variable,71px,Random 64px or 80px
+51,layout,content-padding,Main content padding from themeConfig,24px,Inconsistent 16px or 32px per page
+52,layout,content-max-width,Compact content max-width from themeConfig,1440px,No max-width or arbitrary values
+53,layout,skin,Card and surface skin variant default bordered,default | bordered,Hardcoding shadow or border per component
+54,layout,navbar-type,Navbar behavior type,default | fixed,Inconsistent navbar positioning
+55,layout,navbar-floating,Floating navbar with rounded shadow,true | false,Mixing floating and attached styles
+56,layout,navbar-detached,Detached navbar with rounded bottom,true | false,Mixing detached and attached styles
+57,layout,navbar-blur,Backdrop blur filter on navbar,true | false,Missing blur behavior
+58,layout,content-width,Main content width mode,compact | wide,No content width constraint
+59,layout,footer-detached,Detached footer with rounded top,true | false,Missing footer behavior
+60,layout,semi-dark,Semi-dark sidebar in light mode,true | false,Missing sidebar dark mode
+61,theme,mainColorChannels-light,Light mode RGB channels for opacity,47 43 61,Hardcoded rgb values
+62,theme,mainColorChannels-dark,Dark mode RGB channels for opacity,225 222 245,Hardcoded rgb values
+63,theme,mainColorChannels-lightShadow,Light mode shadow RGB channels,47 43 61,Hardcoded shadow colors
+64,theme,mainColorChannels-darkShadow,Dark mode shadow RGB channels,19 17 32,Hardcoded shadow colors
+65,theme,customColor-bodyBg,Custom body background,#F8F7FA,Hardcoded background colors
+66,theme,customColor-chatBg,Chat background,#F5F5F9,Hardcoded chat backgrounds
+67,theme,customColor-greyLightBg,Light gray background,#FAFAFA,Hardcoded gray backgrounds
+68,theme,customColor-inputBorder,Input border color,rgb(var(--mui-mainColorChannels-light) / 0.22),Hardcoded border colors
+69,theme,customColor-tableHeaderBg,Table header background,transparent,Inconsistent header backgrounds
+70,theme,customColor-tooltipText,Tooltip text color,#FFFFFF,Hardcoded tooltip colors
+71,theme,customColor-trackBg,Track background for sliders switches,#F0F0F0,Hardcoded track colors
+72,breakpoint,bp-sm,Mobile landscape MUI breakpoint sm,600px,Hardcoding 576px
+73,breakpoint,bp-md,Tablet portrait MUI breakpoint md,900px,Hardcoding 768px
+74,breakpoint,bp-lg,Desktop MUI breakpoint lg,1200px,Hardcoding 992px
+75,breakpoint,bp-xl,Large desktop MUI breakpoint xl,1536px,Hardcoding 1280px inconsistently
+76,breakpoint,bp-2xl,Extra large desktop MUI breakpoint 2xl,1920px,Missing extra-large breakpoint
+77,z-index,z-header,Header overlay layer MUI zIndex appBar,1100,Random 1000 or 1200
+78,z-index,z-footer,Footer overlay layer custom,10,Competing with content layers
+79,z-index,z-drawer,Drawer overlays MUI zIndex drawer,1200,Drawers behind dialogs
+80,z-index,z-modal,Modal overlays MUI zIndex modal,1300,Inconsistent modal stacking
+81,z-index,z-tooltip,Tooltips MUI zIndex tooltip,1400,Tooltips buried under other layers
+82,z-index,z-customizer,Theme customizer panel custom,1500,Customizer behind drawers
+83,z-index,z-search,Search overlay layer custom,1500,Missing search z-index
+84,table,table-header-height,Table header row height CSS,56px,Inconsistent header heights
+85,table,table-body-height,Table body row height CSS,50px,Inconsistent row heights
+86,table,table-cell-padding-x-first,First last column horizontal padding CSS,24px,Inconsistent edge padding
+87,table,table-cell-padding-x,Internal column horizontal padding CSS,16px,Inconsistent internal padding
+88,table,table-checkbox-width,Checkbox selection column width,51px,Inconsistent checkbox column width

package/assets/data/typography.csv

@@ -0,0 +1,16 @@
+id,pairing_name,heading_font,body_font,heading_import,body_import,mood,best_for,weights
+1,Corporate Modern,Inter,Inter,https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap,https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap,Clean neutral highly readable,SaaS fintech enterprise dashboards,400 500 600 700
+2,Premium Editorial,Playfair Display,Inter,https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap,https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap,Elegant sophisticated premium,Real estate luxury SaaS executive dashboards,600 700
+3,Technical Mono,Fira Code,Inter,https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap,https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap,Technical precise data-heavy,Cybersecurity DevOps logistics technical admin,400 500
+4,Healthcare Clean,Open Sans,Roboto,https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap,https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap,Clean approachable accessible,Healthcare education government public sector,400 500 600 700
+5,Modern Geometric,Plus Jakarta Sans,DM Sans,https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap,https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap,Modern geometric friendly,Fintech modern SaaS consumer apps,400 500 600 700
+6,Academic Classic,Merriweather,Lora,https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap,https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&display=swap,Traditional trustworthy scholarly,Education government nonprofit formal admin,400 500 600 700
+7,Friendly Humanist,Work Sans,Lato,https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap,https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap,Friendly professional warm,HR nonprofit healthcare people-focused admin,400 500 600 700
+8,Luxury Serif,Playfair Display,Source Sans Pro,https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap,https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap,Luxury editorial high-end,Real estate luxury fintech premium dashboards,600 700
+9,Industrial Tech,IBM Plex Sans,Roboto Mono,https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap,https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap,Technical industrial precise,ERP manufacturing logistics engineering admin,400 500 600
+10,Dynamic Modern,Montserrat,Inter,https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap,https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap,Dynamic modern bold,Media content marketing creative admin,400 500 600 700
+11,Minimal Swiss,Public Sans,Public Sans,https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap,https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap,Minimal Swiss neutral,Enterprise dashboards minimalism data-dense,400 500 600 700
+12,Warm Trustworthy,Merriweather,Open Sans,https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap,https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap,Trustworthy warm approachable,Government nonprofit education community-focused,400 500 600 700
+13,Sci-Fi HUD,Orbitron,Fira Code,https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap,https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap,Sci-fi futuristic HUD,Cybersecurity gaming spatial computing futuristic admin,400 500 700
+14,Elegant Calm,Cormorant Garamond,Montserrat,https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&display=swap,https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap,Elegant calm sophisticated,Wellness beauty lifestyle premium services,400 500 600 700
+15,Startup Bold,Poppins,Inter,https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap,https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap,Bold modern startup-friendly,Startup SaaS e-commerce young dynamic teams,400 500 600 700