Electron Code Review Mode Instructions
Electron Code Review Mode Instructions是一款code方向的AI技能,核心价值是Code Review Mode tailored for Electron app with Node,可用于解决开发者在code领域的实际问题,帮助用户提升效率、自动化重复任务或优化工作流。
Code Review Mode tailored for Electron app with Node.js backend (main), Angular frontend (render), and native integration layer (e.g., AppleScript, shell, or native tooling). Services in other repos a
mkdir -p ./skills/electron-angular-native && curl -sfL https://raw.githubusercontent.com/github/awesome-copilot/main/skills/electron-angular-native/SKILL.md -o ./skills/electron-angular-native/SKILL.md Run in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).
Skill Content
# Electron Code Review Mode Instructions
You're reviewing an Electron-based desktop app with:
- **Main Process**: Node.js (Electron Main)
- **Renderer Process**: Angular (Electron Renderer)
- **Integration**: Native integration layer (e.g., AppleScript, shell, or other tooling)
---
Code Conventions
- Node.js: camelCase variables/functions, PascalCase classes
- Angular: PascalCase Components/Directives, camelCase methods/variables
- Avoid magic strings/numbers — use constants or env vars
- Strict async/await — avoid `.then()`, `.Result`, `.Wait()`, or callback mixing
- Manage nullable types explicitly
---
Electron Main Process (Node.js)
Architecture & Separation of Concerns
- Controller logic delegates to services — no business logic inside Electron IPC event listeners
- Use Dependency Injection (InversifyJS or similar)
- One clear entry point — index.ts or main.ts
Async/Await & Error Handling
- No missing `await` on async calls
- No unhandled promise rejections — always `.catch()` or `try/catch`
- Wrap native calls (e.g., exiftool, AppleScript, shell commands) with robust error handling (timeout, invalid output, exit code checks)
- Use safe wrappers (child_process with `spawn` not `exec` for large data)
Exception Handling
- Catch and log uncaught exceptions (`process.on('uncaughtException')`)
- Catch unhandled promise rejections (`process.on('unhandledRejection')`)
- Graceful process exit on fatal errors
- Prevent renderer-originated IPC from crashing main
Security
- Enable context isolation
- Disable remote module
- Sanitize all IPC messages from renderer
- Never expose sensitive file system access to renderer
- Validate all file paths
- Avoid shell injection / unsafe AppleScript execution
- Harden access to system resources
Memory & Resource Management
- Prevent memory leaks in long-running services
- Release resources after heavy operations (Streams, exiftool, child processes)
- Clean up temp files and folders
- Monitor memory usage (heap, native memory)
- Handle multiple windows safely (avoid window leaks)
Performance
- Avoid synchronous file system access in main process (no `fs.readFileSync`)
- Avoid synchronous IPC (`ipcMain.handleSync`)
- Limit IPC call rate
- Debounce high-frequency renderer → main events
- Stream or batch large file operations
Native Integration (Exiftool, AppleScript, Shell)
- Timeouts for exiftool / AppleScript commands
- Validate output from native tools
- Fallback/retry logic when possible
- Log slow commands with timing
- Avoid blocking main thread on native command execution
Logging & Telemetry
- Centralized logging with levels (info, warn, error, fatal)
- Include file ops (path, operation), system commands, errors
- Avoid leaking sensitive data in logs
---
Electron Renderer Process (Angular)
Architecture & Patterns
- Lazy-loaded feature modules
- Optimize change detection
- Virtual scrolling for large datasets
- Use `trackBy` in ngFor
- Follow separation of concerns between component and service
RxJS & Subscription Management
- Proper use of RxJS operators
- Avoid unnecessary nested subscriptions
- Always unsubscribe (manual or `takeUntil` or `async pipe`)
- Prevent memory leaks from long-lived subscriptions
Error Handling & Exception Management
- All service calls should handle errors (`catchError` or `try/catch` in async)
- Fallback UI for error states (empty state, error banners, retry button)
- Errors should be logged (console + telemetry if applicable)
- No unhandled promise rejections in Angular zone
- Guard against null/undefined where applicable
Security
- Sanitize dynamic HTML (DOMPurify or Angular sanitizer)
- Validate/sanitize user input
- Secure routing with guards (AuthGuard, RoleGuard)
---
Native Integration Layer (AppleScript, Shell, etc.)
Architecture
- Integration module should be standalone — no cross-layer dependencies
- All native commands should be wrapped in typed function
🎯 Best For
- Engineering teams doing code reviews
- Open source maintainers
- Claude users
- GitHub Copilot users
- Software engineers
💡 Use Cases
- Reviewing pull requests for security vulnerabilities
- Checking code style consistency
- Code quality improvement
- Best practice enforcement
📖 How to Use This Skill
- 1
Install the Skill
Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.
- 2
Load into Your AI Assistant
Open Claude or GitHub Copilot and reference the skill. Paste the SKILL.md content or use the system prompt tab.
- 3
Apply Electron Code Review Mode Instructions to Your Work
Open your project in the AI assistant and ask it to apply the skill. Start with a small module to verify the output quality.
- 4
Review and Refine
Review AI suggestions before committing. Run tests, check for regressions, and iterate on the skill output.
❓ Frequently Asked Questions
Does this skill check for OWASP Top 10?
Security-focused review skills often include OWASP checks. Check the skill content for specific vulnerability categories covered.
Is Electron Code Review Mode Instructions compatible with Cursor and VS Code?
Yes — this skill works with any AI coding assistant including Cursor, VS Code with Copilot, and JetBrains IDEs.
Do I need specific dependencies for Electron Code Review Mode Instructions?
Check the install command and Works With section. Most code skills only require the AI assistant and your codebase.
How do I install Electron Code Review Mode Instructions?
Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/electron-angular-native/SKILL.md, ready to use.
Can I customize this skill for my team?
Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.
⚠️ Common Mistakes to Avoid
Blindly accepting AI suggestions
Always verify AI-generated review comments. Some suggestions may not apply to your specific codebase conventions.
Skipping validation
Always test AI-generated code changes, even for simple refactors.
Missing dependency updates
Check if the skill requires updated dependencies or new packages.