메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.
| name | react-lazy |
| description | 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. |
| argument-hint | [split target] [route/component] [fallback UX] |
| user-invokable | true |
| disable-model-invocation | false |
Use this skill when the request matches React lazy() - Complete Guide.
When invoking this skill manually, include:
