trae-op

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.

Guidelines for implementing the Event Delegation pattern in React to reduce prop drilling, improve performance, and handle dynamic or frequently changing content. Includes examples, best practices, common pitfalls, and an implementation checklist.

Guidelines for implementing performant, accessible React forms using isolated field components, custom hooks, and server actions (`useActionState`/`useFormStatus`). Use for building FormData-friendly forms and enforcing TypeScript patterns.

Main Process Architecture Guide. Dependency Injection Pattern (DIP). Provides decorators, module patterns, and examples for building modular, testable Electron main process code using dependency injection

Unit testing skill for Electron main process. guidelines, examples, and Vitest patterns to create and fix unit tests for services, IPC handlers, and DI-based code.

Provides a React Context implementation pattern using useSyncExternalStore, with types, hooks, and examples. Be specific about capabilities and when to use the skill.

This document describes how to write unit tests for the React renderer process (src/renderer). Use this when asked to create or update and fix unit tests.

This document describes how to write unit tests for the Electron main process (`src/main`). Use this when asked to create or update and fix unit tests.

This guide describes the best practices for creating forms in React using modern hooks (useActionState, useFormStatus) with a component-based architecture that optimizes re-rendering and maintains clean separation of concerns. Use this when asked to create or update forms in "react".