electron-modular-boilerplate

Use when styling React components with Tailwind className variants, conditional classes, or class conflicts; applies repository cn (clsx + tailwind-merge) patterns for merge-safe, overridable UI styles.

Use when creating or refactoring shared React state with Context + useSyncExternalStore selectors; provides typed store/provider/hook patterns to avoid unnecessary rerenders and prop drilling.

Use when fixing import paths or alias errors in Electron projects; applies correct main-process Node subpath aliases (#main/*), renderer Vite aliases (@/*), and tsconfig/package runtime-safe alignment.

Use when React lists or nested component trees have many click/change handlers; replaces prop-drilled callbacks with parent-level event delegation for scalable, dynamic, high-performance interactions.

Use when preparing git commits or PR-ready commit text; generates repository-compliant Conventional Commit messages with correct type/scope syntax, concise subject lines, and clear rationale/body formatting.

Use when adding or debugging Electron IPC between preload, renderer, and main; implements strongly typed send/invoke/receive channels, payload contracts, window.electron API wiring, and safe handler registration.

Use when improving JavaScript code quality in existing modules; refactors toward modern syntax, readable structure, safer async/error handling, smaller focused functions, and maintainable utility abstractions.

Use when loops over large arrays/collections cause slowness or memory pressure; optimizes nested iteration with indexing/maps, pre-grouping, chunking, lazy processing, and memoization to remove O(n*m*k) bottlenecks.

Use when rendering long lists in React/Electron renderer causes lag; applies LazyRender/react-window virtualization, stable itemData, memoized rows, and empty/loading states for smooth scrolling performance.

Use when adding or standardizing UI icons in React components; integrates lucide-react with consistent size/stroke rules, accessibility labels, semantic icon selection, and typed icon-prop component patterns.

Use when designing or refactoring Electron main-process feature modules; enforces project modular architecture with module/service/ipc/window separation, DI providers/tokens, imports/exports boundaries, and typed contracts.

Use when writing or fixing tests for Electron main process; creates Vitest unit tests for modules, services, IPC handlers, window managers, and DI providers/tokens with correct Electron and dependency mocks.

Use when profiling Electron startup/module performance or investigating regressions; instruments and interprets project performance metrics (min/max/mean/median/stddev, timing logs, bootstrap/module measurements).

Use when building or refactoring React forms with submission state; applies isolated field components, useActionState/useFormStatus, typed FormData parsing, validation flow, and rerender-optimized form architecture.

Use when bundle size or initial render is heavy in React apps; applies React.lazy + Suspense code splitting for routes/modals/feature chunks, dynamic imports, and fallbacks without breaking critical render paths.

Use when implementing or refactoring renderer React code; applies repository patterns for memoized components, hook-first business logic extraction, composition, typed props/state, and predictable render architecture.

Use when creating or reorganizing renderer features/windows; applies project renderer architecture for routes/guards, conceptions/domain modules, providers, shared components, and preload-based window.electron IPC integration.

Use when writing or debugging React renderer tests; creates Vitest + Testing Library unit tests with jsdom setup, window.electron mocks, user interaction checks, and positive/negative/error scenarios.

Use when implementing API clients/services or endpoint integrations; applies REST API contracts with JWT auth headers, request/response payload typing, ownership/access checks, status-code handling, and error mapping.

Use when styling reusable React components with Tailwind CSS; applies repository conventions for responsive breakpoints, accessibility states, class override architecture, and consistent utility-class composition.

Use when creating or refactoring TypeScript code to strict standards; enforces type-first modeling, T-prefixed aliases, explicit return types, safe generics, discriminated unions, and maintainable module-level typings.