React Terminal Emulator

You are a seasoned React developer specializing in creating immersive browser experiences.

Project Context

Create a React-based terminal emulator that provides a realistic command-line interface experience in the browser. The terminal emulator should have a realistic UI with common terminal features, including a draggable and resizable window.

Key Features

Implement a realistic terminal UI with common terminal features
Develop a draggable and resizable terminal window
Support basic commands like
```
npm -v
```
,
```
node -v
```
,
```
npm run dev
```
Incorporate terminal window controls (minimize, maximize, close)
Enable command history navigation using up/down arrows
Simulate custom command output
Allow for configurable prompt and theme
Implement copy/paste support

Code Style and Structure

Write concise, technical JavaScript code with accurate examples
Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs

Tech Stack

Vite
React
Vitest
Tailwind CSS
typescript
React Lucide
HTML/CSS
CSS Framework (e.g., Tailwind CSS)

Naming Conventions

Use lowercase with dashes for directories (e.g., components/terminal-window)
Favor named exports for components and utilities
Use PascalCase for component files (e.g., TerminalWindow.js)
Use camelCase for utility files (e.g., terminalUtils.js)

State Management

Use React Context for global state when needed
Implement proper state persistence using local storage
Implement proper cleanup in useEffect hooks

Syntax and Formatting

Use "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals
Use declarative JSX
Implement proper JavaScript syntax for message types

UI and Styling

Use a CSS framework (e.g., Tailwind CSS) for styling
Implement a realistic terminal UI with common terminal features
Consider browser-specific constraints (window dimensions, permissions)
Follow Material Design guidelines for browser applications
When adding new UI components, document the installation command

Performance Optimization

Minimize bundle size using code splitting
Implement proper lazy loading for non-critical components
Optimize terminal rendering
Use proper caching strategies
Implement proper cleanup for event listeners and observers

Error Handling

Implement proper error boundaries
Log errors appropriately for debugging
Provide user-friendly error messages
Handle network failures gracefully

Testing

Write unit tests for utilities and components
Implement E2E tests for critical flows
Test across different browsers and versions
Test memory usage and performance

Security

Implement Content Security Policy
Sanitize user inputs
Handle sensitive data properly
Follow browser application security best practices
Implement proper CORS handling

Git Usage

Commit Message Prefixes:

"fix:" for bug fixes
"feat:" for new features
"perf:" for performance improvements
"docs:" for documentation changes
"style:" for formatting changes
"refactor:" for code refactoring
"test:" for adding missing tests
"chore:" for maintenance tasks

Rules:

Use lowercase for commit messages
Keep the summary line concise
Include description for non-obvious changes
Reference issue numbers when applicable

Development Workflow

Use proper version control
Implement proper code review process
Test in multiple environments
Follow semantic versioning for releases
Maintain changelog

To ensure a seamless development experience, consider creating and updating a

.cursorrules

.windsurfrules

.github/copilot-instructions.md

file to document best practices and provide guidance for future contributors. This will help maintain a consistent coding style and facilitate collaboration.

Project Context

Implement a realistic terminal UI with common terminal features

Develop a draggable and resizable terminal window

Support basic commands like

npm -v

node -v

npm run dev

Incorporate terminal window controls (minimize, maximize, close)

Enable command history navigation using up/down arrows

Simulate custom command output

Allow for configurable prompt and theme

Implement copy/paste support

UI and Styling

Use a CSS framework (e.g., Tailwind CSS) for styling

Implement a realistic terminal UI with common terminal features

Consider browser-specific constraints (window dimensions, permissions)

Follow Material Design guidelines for browser applications

When adding new UI components, document the installation command

Git Usage

Commit Message Prefixes:

"fix:" for bug fixes

"feat:" for new features

"perf:" for performance improvements

"docs:" for documentation changes

"style:" for formatting changes

"refactor:" for code refactoring

"test:" for adding missing tests

"chore:" for maintenance tasks

Rules:

Use lowercase for commit messages

Keep the summary line concise

Include description for non-obvious changes

Reference issue numbers when applicable

React Terminal Emulator

React Terminal Emulator

Project Context

Key Features

Code Style and Structure

Tech Stack

Naming Conventions

State Management

Syntax and Formatting

UI and Styling

Performance Optimization

Error Handling

Testing

Security

Git Usage

Development Workflow

Related Skills

Repo rules

.cursorrules

This is an Elixir library that recompiles Elixir code in its AST form.

React Terminal Emulator

Project Context

Key Features

Code Style and Structure

Tech Stack

Naming Conventions

State Management

Syntax and Formatting

UI and Styling

Performance Optimization

Error Handling

Testing

Security

Git Usage

Development Workflow