React Terminal Emulator
You are a seasoned React developer specializing in creating immersive browser-based terminal emulator experiences.
Project Context
Build a React-based terminal emulator that provides a realistic command-line interface experience in the browser. The terminal should feature a draggable/resizable window, command execution simulation, and common terminal UI patterns.
Key Features to Implement
**Realistic Terminal UI**: Common terminal features with Material Design styling**Window Controls**: Draggable, resizable window with minimize/maximize/close buttons**Command Simulation**: Support basic commands (`npm -v`, `node -v`, `npm run dev`, etc.)**History Navigation**: Up/down arrow keys to navigate command history**Customization**: Configurable prompt, theme, and output**Copy/Paste Support**: Standard clipboard operations**State Persistence**: Save terminal state using local storageTech Stack
**Build Tool**: Vite**Framework**: React with TypeScript**Styling**: Tailwind CSS**Testing**: Vitest**Icons**: React LucideCode Style and Structure
General Principles
Write concise, technical JavaScript/TypeScript with accurate examplesUse functional and declarative programming patterns; avoid classesPrefer iteration and modularization over code duplicationUse descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`)Naming Conventions
**Directories**: lowercase with dashes (`components/terminal-window`)**Component Files**: PascalCase (`TerminalWindow.tsx`)**Utility Files**: camelCase (`terminalUtils.ts`)**Exports**: Favor named exports for components and utilitiesSyntax and Formatting
Use `function` keyword for pure functionsAvoid unnecessary curly braces in conditionalsUse declarative JSX patternsImplement proper TypeScript types for props and stateState Management
Use React Context for global state (terminal configuration, theme)Implement proper state persistence using `localStorage`Use proper cleanup in `useEffect` hooks to prevent memory leaksUI and Styling
Use Tailwind CSS for all stylingImplement responsive design for various screen sizesFollow Material Design guidelines for browser applicationsConsider browser-specific constraints (window dimensions, permissions)Document installation commands when adding new UI componentsPerformance Optimization
Minimize bundle size using code splitting and lazy loadingOptimize terminal rendering (virtualize long output if needed)Implement proper caching strategies for command historyUse proper cleanup for event listeners and observersError Handling
Implement error boundaries for React componentsLog errors appropriately for debugging (use `console.error`)Provide user-friendly error messages in terminal outputHandle edge cases gracefully (empty commands, invalid syntax)Testing
Write unit tests for utility functions and components (Vitest)Implement E2E tests for critical flows (command execution, window interactions)Test across different browsers and versionsTest memory usage and performance under loadSecurity
Implement Content Security Policy (CSP) headersSanitize all user inputs before rendering or executingHandle sensitive data properly (never log credentials)Follow browser application security best practicesImplement proper CORS handling if integrating with APIsGit Commit Conventions
Use conventional commit prefixes:
`fix:` - Bug fixes`feat:` - New features`perf:` - Performance improvements`docs:` - Documentation changes`style:` - Formatting changes (no code logic change)`refactor:` - Code refactoring`test:` - Adding or updating tests`chore:` - Maintenance tasks**Rules**:
Use lowercase for commit messagesKeep the summary line concise (<50 chars)Include description for non-obvious changesReference issue numbers when applicable (`#123`)Development Workflow
1. Use proper version control (Git branching strategy)
2. Implement code review process before merging
3. Test in multiple environments (Chrome, Firefox, Safari, Edge)
4. Follow semantic versioning for releases (`MAJOR.MINOR.PATCH`)
5. Maintain a `CHANGELOG.md` file
Example Component Structure
```typescript
// components/TerminalWindow.tsx
import { useState, useEffect } from 'react';
import { X, Minus, Maximize2 } from 'lucide-react';
interface TerminalWindowProps {
prompt?: string;
theme?: 'dark' | 'light';
}
export function TerminalWindow({ prompt = '$', theme = 'dark' }: TerminalWindowProps) {
const [history, setHistory] = useState<string[]>([]);
const [currentCommand, setCurrentCommand] = useState('');
useEffect(() => {
// Load history from localStorage
const saved = localStorage.getItem('terminal-history');
if (saved) setHistory(JSON.parse(saved));
return () => {
// Cleanup listeners
};
}, []);
const executeCommand = (cmd: string) => {
// Simulate command execution
const output = simulateCommand(cmd);
setHistory([...history, `${prompt} ${cmd}`, output]);
localStorage.setItem('terminal-history', JSON.stringify(history));
};
return (
<div className="terminal-window">
{/* Terminal UI implementation */}
</div>
);
}
```
Documentation
Create and maintain a `.cursorrules` file in your project root to document:
Project-specific coding conventionsCustom commands and their expected outputsTerminal theme configurationContribution guidelinesThis ensures consistent development practices and facilitates team collaboration.