メニュー
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.
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 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.
| name | context-pattern |
| description | 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. |
| argument-hint | [context goal] [state slices] [selector/dispatch names] |
| user-invokable | true |
| disable-model-invocation | false |
Use this skill when the request matches React Context Pattern Guide.
When invoking this skill manually, include:
