Comprehensive workflow for contributing features to open-source IDE and coding tool projects
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Comprehensive workflow for contributing major features to open-source IDE and coding tool projects (VS Code, Cursor, Windsurf, Tauri-based editors).
Before recommending ANY features, check what already exists in the codebase:
# Check existing components
ls -la src/components/
find src -name "*.tsx" -o -name "*.ts" | grep -E "(component|store)"
# Check existing stores
ls -la src/stores/
# Search for feature keywords
grep -r "StatusBar\|QuickOpen\|Terminal\|FileTree\|Git" src/
# Check existing UI elements
cat src/components/layout/AppFooter.tsx # Often has status info
cat src/components/layout/RightSidebar.tsx # Check sidebar tabs
User expectation: When asked "ada yang recommended lagi gak?" or "apa lagi yang bisa kita kontribusikan?", user expects you to check existing features first. User will explicitly ask "cek fitur skrng dulu apa semua itu blm ada?" if you skip this step.
Output format:
## ANALISA FITUR EXISTING
### Yang Sudah Ada:
- ✅ AI Chat Interface
- ✅ Settings Modal (Providers, Agents tabs)
- ✅ Left/Right Sidebar system
- ✅ Theme system
### Yang Belum Ada:
- ❌ File Tree
- ❌ Code Editor
- ❌ Terminal
- ❌ Git Integration
### Verdict:
SEMUA 9 PRs yang gue bikin itu BELUM ADA! ✅
# Clone and analyze
git clone <repo>
cd <repo>
# Read core docs
cat README.md
cat CHANGELOG.md
cat package.json # Tech stack
cat src-tauri/Cargo.toml # Rust dependencies (if Tauri)
Key questions:
Compare with competitors:
Create feature matrix:
| Feature | Cursor | Windsurf | Target Project |
|---|---|---|---|
| Code Editor | ✅ | ✅ | ? |
| Terminal | ✅ | ✅ | ? |
| File Tree | ✅ | ✅ | ? |
| Git Integration | ✅ | ✅ | ? |
| Search & Replace | ✅ | ✅ | ? |
Identify gaps:
Tier 1: Essential (CRITICAL)
Tier 2: Competitive Edge
Tier 3: Unique Differentiators
Prioritization criteria:
When adding multiple interdependent features (e.g., 9 IDE components):
Problem: Features depend on each other but need to be reviewed independently.
Solution: Placeholder-based integration system
Create layout/infrastructure PR first
Use placeholder components
const FileTreePlaceholder = () => (
<div className="h-full flex items-center justify-center p-4 text-center">
<div>
<p className="text-sm font-semibold mb-2">File Tree</p>
<p className="text-xs text-gray-500">PR #8 - Coming soon</p>
</div>
</div>
);
Document integration points clearly
## Integration Points
### Current State (Placeholders)
All panels show placeholder components. This allows:
1. Testing layout system independently
2. Merging layout before feature PRs
3. Easy feature integration when PRs merge
### Future Integration (When PRs Merge)
Replace placeholders with actual components:
// Before
const FileTreePlaceholder = () => <div>Coming soon</div>;
// After (when PR #8 merges)
import { FileTree } from '@/components/ui/FileTree';
const renderLeftPanel = () => {
case 'file-tree': return <FileTree />;
}
Merge features incrementally
Example (enowX-Coder session):
FileTreePlaceholder → <FileTree /> when PR #8 mergesBenefits:
Pitfall to avoid: Don't create cross-branch dependencies. Each feature PR should work standalone (even if just showing placeholder in layout).
Phase 1: Quick Wins (1-2 hours each)
Phase 2: Core Features (2-4 hours each)
Phase 3: Advanced Features (4-6 hours each)
Phase 4: Unique Features (5-8 hours each)
feat/command-palette-keyboard-shortcuts
feat/loading-empty-states
feat/file-tree-sidebar
feat/terminal-integration
feat/monaco-code-editor
feat/git-integration
feat/search-replace
feat/ai-code-review
Pattern: feat/<feature-name> (kebab-case, descriptive)
project/
├── src/ # Frontend (React/TypeScript)
│ ├── components/ui/ # React components
│ ├── stores/ # Zustand state management
│ └── lib/ # Utilities
└── src-tauri/ # Backend (Rust)
└── src/
├── commands/ # Tauri commands
├── lib.rs # Command registration
└── main.rs # Entry point
For each feature:
// src-tauri/src/commands/feature.rs
use serde::{Deserialize, Serialize};
use tauri::command;
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct FeatureData {
pub id: String,
pub value: String,
}
#[command]
pub async fn feature_action(param: String) -> Result<FeatureData, String> {
// Implementation
Ok(FeatureData {
id: "1".to_string(),
value: param,
})
}
// src-tauri/src/commands/mod.rs
pub mod feature;
// src-tauri/src/lib.rs
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![
commands::feature::feature_action,
// ... other commands
])
// src/stores/useFeatureStore.ts
import { create } from 'zustand';
interface FeatureState {
data: FeatureData | null;
setData: (data: FeatureData | null) => void;
isLoading: boolean;
setIsLoading: (loading: boolean) => void;
}
export const useFeatureStore = create<FeatureState>((set) => ({
data: null,
setData: (data) => set({ data }),
isLoading: false,
setIsLoading: (loading) => set({ isLoading: loading }),
}));
// src/components/ui/Feature.tsx
import { useEffect } from 'react';
import { invoke } from '@tauri-apps/api/core';
import { useFeatureStore } from '@/stores/useFeatureStore';
export function Feature() {
const { data, setData, isLoading, setIsLoading } = useFeatureStore();
const handleAction = async () => {
setIsLoading(true);
try {
const result = await invoke('feature_action', { param: 'value' });
setData(result);
} catch (error) {
console.error('Failed:', error);
} finally {
setIsLoading(false);
}
};
return (
<div>
<button onClick={handleAction}>Action</button>
{isLoading && <p>Loading...</p>}
{data && <p>{data.value}</p>}
</div>
);
}
npx tsc --noEmit
Common errors:
_Fix immediately before continuing!
git add .
git commit -m "feat(feature): add feature with backend integration"
git push -u origin feat/feature-name
npx tsc --noEmit)## Overview
[One-sentence description]
## Features
### Frontend
- [Feature 1]
- [Feature 2]
### Backend (Rust)
- [Command 1]
- [Command 2]
## UI/UX
- [Design decision 1]
- [Design decision 2]
## Testing
- [What was tested]
- [How to test]
Ready for review!
Rust commands needed:
read_directory — List files/foldersread_file_content — Read filewrite_file_content — Write filecreate_file — Create new filecreate_directory — Create new folderdelete_file — Delete file/folderrename_file — Rename file/folderFrontend features:
Dependencies:
@xterm/xterm — Terminal emulator@xterm/addon-fit — Auto-resize@xterm/addon-web-links — Clickable linksRust commands needed:
create_terminal_session — Spawn shellwrite_to_terminal — Send inputread_from_terminal — Get outputclose_terminal_session — CleanupFrontend features:
Rust commands needed:
git_status — Get file statusgit_branches — List branchesgit_current_branch — Get active branchgit_log — Commit historygit_stage — Stage filegit_unstage — Unstage filegit_commit — Commit changesgit_push — Push to remotegit_pull — Pull from remotegit_checkout — Switch branchgit_diff — Get file diffFrontend features:
Rust commands needed:
search_in_files — Recursive search with regexreplace_in_file — Find and replaceFrontend features:
Dependencies:
@monaco-editor/react — React wrappermonaco-editor — Editor coreFrontend features:
# Switch to branch
git checkout feat/feature-name
# Test TypeScript
npx tsc --noEmit
# Test Rust (if cargo available)
cd src-tauri && cargo check
# Manual testing
# - Open UI
# - Test all interactions
# - Check error states
# - Check loading states
# - Check empty states
# Test all branches
for branch in feat/*; do
git checkout $branch
npx tsc --noEmit || echo "❌ $branch FAILED"
done
## FINAL QUALITY ASSURANCE REPORT
| PR | Feature | TypeScript | Rust | Status |
|----|---------|-----------|------|--------|
| #6 | Command Palette | ✅ PASS | N/A | READY |
| #7 | Loading States | ✅ PASS | N/A | READY |
| #8 | File Tree | ✅ PASS | ✅ PASS | READY |
Quality Score: 10/10
Production Ready: 100%
❌ WRONG:
# Push with errors, fix later
git push # Has 3 TypeScript errors
✅ CORRECT:
# Test before push
npx tsc --noEmit
# Fix errors
# Test again
npx tsc --noEmit
# Push
git push
❌ WRONG:
useEffect(() => {
window.addEventListener('keydown', handler);
// Missing cleanup!
}, []);
✅ CORRECT:
useEffect(() => {
window.addEventListener('keydown', handler);
return () => window.removeEventListener('keydown', handler);
}, []);
❌ WRONG:
const [value, setValue] = useState(''); // setValue unused
✅ CORRECT:
const [value] = useState(''); // No setValue
❌ WRONG:
# Assume dependency exists
import { Terminal } from '@xterm/xterm'; # Not installed!
✅ CORRECT:
# Install first
bun add @xterm/xterm @xterm/addon-fit
# Then import
import { Terminal } from '@xterm/xterm';
❌ WRONG:
// File tree without delete/rename
// Terminal without multiple tabs
// Git without push/pull
✅ CORRECT:
// Complete feature set
// All CRUD operations
// All expected functionality
Problem: Importing stores/components that don't exist in main branch yet.
❌ WRONG:
// In feat/search-replace branch
import { useFileTreeStore } from '@/stores/useFileTreeStore'; // Doesn't exist in main!
✅ CORRECT:
// Use local state or mock data
const [rootPath] = useState('/'); // Default value
When it happens: Creating features that depend on other feature branches.
Solution: Each feature branch should be self-contained. Use placeholders, mock data, or local state instead of importing from other feature branches.
❌ WRONG:
<span className="font-semibold">></span> // Error: Unexpected token
✅ CORRECT:
<span className="font-semibold">></span> // Use HTML entity
Common characters that need escaping:
> → >< → <& → &" → "Good contribution:
Great contribution:
World-class contribution:
Session goal: Make enowX-Coder world-class IDE
Contributions:
Total: 8 PRs, 7,419 lines, 0 errors, 100% production ready
Result: enowX-Coder now matches Cursor/Windsurf + has unique AI code review feature
references/tauri-typescript-integration.md — Complete Tauri + TypeScript integration pattern with examplesreferences/enowx-coder-12pr-case-study.md — Real-world case study: 12 PRs transforming AI chat tool into world-class IDE (8,415 lines, 0 errors, placeholder-based integration strategy)まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Drives development with tests. Use when implementing any logic, fixing any bug, or changing any behavior. Use when you need to prove that code works, when a bug report arrives, or when you're about to modify existing functionality.
日本語の概要は準備中です。原文の説明を表示しています。
Airtable REST API via curl. Records CRUD, filters, upserts.
日本語の概要は準備中です。原文の説明を表示しています。
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
日本語の概要は準備中です。原文の説明を表示しています。
Build monitoring bots that poll APIs and send notifications on state changes (new listings, price alerts, status updates)
日本語の概要は準備中です。原文の説明を表示しています。
REST/GraphQL API testing with automated validation — test endpoints, validate responses, check status codes, and ensure API contracts
日本語の概要は準備中です。原文の説明を表示しています。
Manage Apple Notes via memo CLI: create, search, edit.
日本語の概要は準備中です。原文の説明を表示しています。