Comment Guide for AI Development with React and TypeScript

This is a comprehensive guide for AI tools to understand and generate proper comments in React and TypeScript projects. The guide includes operator terminology, documentation patterns, and best practices for code commenting.

# I'm using Windows operating system and Powershell

#Please do NOT be lazy, if you suggest a fix of a file, rewrite the codes without truncation, do not use something like [existing]  [... Continue with more sections and images ...] or [... Continue with existing codes ...], etc.

# React & TypeScript Code Documentation Guide

Use these specific terms when commenting code to make documentation searchable and consistent.

## Operators & Expressions

### Conditional Operators

- `? :` - **Ternary Conditional Operator**
- `&&` - **Logical AND Operator** (short-circuit evaluation)
- `||` - **Logical OR Operator** (short-circuit evaluation)
- `??` - **Nullish Coalescing Operator**

### Optional Chaining

- `?.` - **Optional Chaining Operator**
- `!.` - **Non-null Assertion Operator**

### Type Operations

- `as` - **Type Assertion Operator**
- `instanceof` - **Instance Check Operator**
- `typeof` - **Type Check Operator**
- `keyof` - **Index Type Query Operator**

### String Operations

- `+` - **String Concatenation Operator**
- `` ` `` - **Template Literal**
- `${expression}` - **String Interpolation**

### Array Operations

- `...` - **Spread Operator**
- `.map()` - **Array Mapping Method**
- `.filter()` - **Array Filter Method**
- `.reduce()` - **Array Reduction Method**
- `.find()` - **Array Find Method**

### Object Operations

- `...` - **Object Spread Operator**
- `?.` - **Optional Property Access**
- `??=` - **Nullish Coalescing Assignment**

### React-Specific

- `<>` - **Fragment Shorthand**
- `React.Fragment` - **Fragment Component**
- `useState` - **State Hook**
- `useEffect` - **Effect Hook**
- `useMemo` - **Memoization Hook**
- `useCallback` - **Callback Memoization Hook**

### TypeScript-Specific

- `interface` - **Interface Declaration**
- `type` - **Type Alias**
- `extends` - **Type Extension**
- `implements` - **Interface Implementation**
- `&` - **Intersection Type Operator**
- `|` - **Union Type Operator**

## Example Usage in Comments

```typescript
// Using Nullish Coalescing Operator (??) for default value
const value = data ?? defaultValue;

// Using Optional Chaining Operator (?.) for safe property access
const userName = user?.profile?.name;

// Using Ternary Conditional Operator (? :) for conditional rendering
const element = isLoading ? <Loading /> : <Content />;

// Using Logical AND Operator (&&) for conditional rendering
{
  isVisible && <Component />;
}

// Using Template Literal (``) with String Interpolation (${})
const greeting = `Hello, ${userName}!`;

// Using Array Spread Operator (...) for array copying
const newArray = [...existingArray];

// Using Type Assertion Operator (as) for type casting
const element = event.target as HTMLInputElement;

// Using Union Type Operator (|) for multiple types
type Status = "loading" | "success" | "error";


## Style Guide for Comments

1. Be specific with operator names
2. Include both the symbol and the full operator name
3. Mention the purpose after the operator specification
4. Keep comments concise but descriptive

Example:

```typescript
// Ternary Operator (? :) - Conditionally assigns role based on admin status
const role = isAdmin ? "administrator" : "user";

From: Reddit thread “Pro Tip: These 3 Magic Words Will Make Claude Write WAY Better Code (KISS, YAGNI, SOLID)”

Follow these principles:

KISS (Keep It Simple, Stupid)
Encourages Claude to write straightforward, uncomplicated solutions
Avoids over-engineering and unnecessary complexity
Results in more readable and maintainable code

YAGNI (You Aren't Gonna Need It)
Prevents Claude from adding speculative features
Focuses on implementing only what's currently needed
Reduces code bloat and maintenance overhead

SOLID Principles
Single Responsibility Principle
Open-Closed Principle
Liskov Substitution Principle
Interface Segregation Principle
Dependency Inversion Principle


// Define core principles
define KISS as "Keep It Simple, Stupid principle".
KISS has goal of "straightforward solutions".
KISS has attribute of "simplicity".
KISS has attribute of "readability".
KISS has attribute of "maintainability".

define Solution as "Code implementation".
Solution has complexity_level of "low".
Solution has maintainability of "high".

relate KISS and Solution as "guides" if Solution has complexity_level of "low".
ensure KISS guides Solution.

// Define YAGNI
define YAGNI as "You Aren't Gonna Need It principle".
YAGNI has goal of "minimal implementation".
YAGNI has attribute of "focus".
YAGNI has attribute of "efficiency".

define Feature as "Code functionality".
Feature has status of "required".

relate YAGNI and Feature as "filters" if Feature has status of "required".
ensure YAGNI filters Feature.

// Define SOLID principles
define SOLID as "Set of five design principles".
SOLID has principle_count of 5.

// Single Responsibility Principle
define SRP as "Single Responsibility Principle".
SRP has responsibility of "one".
SRP has parent of SOLID.

define Component as "Software component".
Component has responsibility_count of 1.

relate SRP and Component as "enforces" if Component has responsibility_count of 1.
ensure SRP enforces Component.

// Open-Closed Principle
define OCP as "Open-Closed Principle".
OCP has attribute of "extensibility".
OCP has parent of SOLID.
OCP is extendable.
OCP is closed_for_modification.

// Liskov Substitution Principle
define LSP as "Liskov Substitution Principle".
LSP has attribute of "substitutability".
LSP has parent of SOLID.

define Subtype as "Derived class or implementation".
define Supertype as "Base class or interface".

relate Subtype and Supertype as "substitutes" if Subtype is compatible.
ensure LSP enforces "substitutes".

// Interface Segregation Principle
define ISP as "Interface Segregation Principle".
ISP has attribute of "specificity".
ISP has parent of SOLID.

define Interface as "Contract between components".
Interface is specific.
Interface is minimal.

relate ISP and Interface as "shapes" if Interface is specific and Interface is minimal.
ensure ISP shapes Interface.

// Dependency Inversion Principle
define DIP as "Dependency Inversion Principle".
DIP has attribute of "abstraction".
DIP has parent of SOLID.

define HighLevelModule as "Abstract component".
define LowLevelModule as "Concrete implementation".
define Abstraction as "Interface or abstract class".

relate HighLevelModule and LowLevelModule as "depends_on" if Abstraction is present.
ensure DIP enforces "depends_on".

// Define relationships between principles
relate KISS and YAGNI as "complements".
relate SOLID and KISS as "supports".
relate SOLID and YAGNI as "reinforces".

// Define goals
ensure Solution is simple.
ensure Feature is necessary.
ensure Component has responsibility_count of 1.
ensure Interface is specific.
ensure Abstraction is present.