# Oop Architect

> Multi-language: TypeScript, Java, Python, Go, C# code examples. Full-stack OOP architecture guide for React/TypeScript web projects. Covers project structure, domain modeling, 22 design patterns, 22 code smells with detection heuristics, 66 refactoring techniques, SOLID principles, component architecture, state management, and anti-patterns. Use when designing new features, refactoring existing code, reviewing PRs for architecture, or starting a new project. Auto-triggers when user asks about architecture, design patterns, refactoring, code smells, SOLID, or OOP best practices.

- Skill: `pratchaya0/oop-architect` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add pratchaya0/oop-architect`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pratchaya0/oop-architect/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: pratchaya0 (https://skillmd.com/u/pratchaya0)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/pratchaya0/oop-architect

---


# OOP Architect

Full-stack OOP architecture for web projects. Choose your language, apply the patterns.

## Navigation

### By Language

| Language | Architecture Guide | Pattern Examples |
|----------|-------------------|-----------------|
| **TypeScript / React** | [reference/typescript-react.md](reference/typescript-react.md) | [reference/design-patterns-multilang.md](reference/design-patterns-multilang.md) |
| **Java / Spring** | [reference/typescript-react.md](reference/typescript-react.md) | [reference/design-patterns-multilang.md](reference/design-patterns-multilang.md) |
| **Python / FastAPI** | [reference/typescript-react.md](reference/typescript-react.md) | [reference/design-patterns-multilang.md](reference/design-patterns-multilang.md) |
| **Go / Gin** | [reference/typescript-react.md](reference/typescript-react.md) | [reference/design-patterns-multilang.md](reference/design-patterns-multilang.md) |
| **C# / Rust / Swift** | [reference/typescript-react.md](reference/typescript-react.md) | [reference/design-patterns-multilang.md](reference/design-patterns-multilang.md) |

### By Topic

| Topic | File | Contents |
|-------|------|----------|
| **SOLID Principles** | [reference/typescript-react.md](reference/typescript-react.md) | S·O·L·I·D with TypeScript examples |
| **Project Structure** | [reference/typescript-react.md](reference/typescript-react.md) | Directory layout + layer rules |
| **Domain Layer** | [reference/typescript-react.md](reference/typescript-react.md) | Rich models, state machines, DTO wrapping |
| **Service Layer** | [reference/typescript-react.md](reference/typescript-react.md) | Singleton HTTP, Template Method, Facade |
| **State Management** | [reference/typescript-react.md](reference/typescript-react.md) | TanStack Query vs Redux split |
| **Design Patterns** | [reference/design-patterns-multilang.md](reference/design-patterns-multilang.md) | 22 patterns (TS + multi-language) |
| **Code Smells** | [reference/code-smells.md](reference/code-smells.md) | 22 smells, 5 categories |
| **Refactoring** | [reference/refactoring-catalog.md](reference/refactoring-catalog.md) | 66 techniques, 6 categories |
| **Anti-Patterns** | [reference/anti-patterns.md](reference/anti-patterns.md) | 7 anti-patterns + fixes |
| **Feature Workflow** | [reference/workflows.md](reference/workflows.md) | 4-phase process + checklists |
| **Code Review** | [reference/workflows.md](reference/workflows.md) | Architecture review checklist |
| **Pattern Selection** | [reference/workflows.md](reference/workflows.md) | Decision tree flowchart |

---

## Quick Reference

### SOLID — Five Lines

| Principle | Rule | Violation Signal → Fix |
|-----------|------|----------------------|
| **S**ingle Responsibility | One reason to change | Class changes for different reasons → Extract Class |
| **O**pen/Closed | Extend without modifying | Feature requires editing internals → Strategy/Decorator |
| **L**iskov Substitution | Subtypes are substitutable | `instanceof` checks → Extract Interface |
| **I**nterface Segregation | No unused methods | Unused props → Split interface |
| **D**ependency Inversion | Depend on abstractions | `new Concrete()` in logic → Factory/DI |

### Pattern Decision Tree

```
Object type depends on runtime?      → Factory Method
One shared instance?                 → Singleton
Add behavior at runtime?             → Decorator
Interchangeable algorithms?          → Strategy
Behavior changes with state?         → State
One-to-many notifications?           → Observer (useEffect, TanStack Query)
Complex subsystem?                   → Facade
Incompatible interfaces?             → Adapter
Tree structure?                      → Composite
Step-by-step construction?           → Builder
```

### State Management Split

| Data | Store |
|------|-------|
| API data | TanStack Query |
| Form drafts, UI state | Redux Toolkit |
| Filter/search | URL params |
| Auth tokens | Context/cookie |

---

## Operating Rules

**Creating code:** Domain classes first. No raw DTOs to components. No `any`. API clients extend `BaseApiClient`.

**Refactoring:** Name the smell. Show before/after. One technique at a time. Rule of three.

**Reviewing:** Architecture before logic. Reference patterns/smells by name.

**Multi-language:** Default to TypeScript for React/web. Use language idioms when specified. No cross-pollination.

**Brevity:** Name the pattern. Show the code. Move on.

## References

- Design Patterns: https://refactoring.guru/design-patterns
- Refactoring: https://refactoring.guru/refactoring
- Reference Codebase: Line Chat Management Platform (XingyunLabs)