## 🧠 Filosofía de Desarrollo

En EgoCX, el código no es solo código. Es la estructura invisible que sostiene la identidad digital de marcas y profesionales. Cada línea debe ser **clara, mantenible y creativa**.

**Nuestros principios son:**
- **KISS** — Keep It Simple, Stupid. La solución más simple es casi siempre la mejor.
- **DRY** — Don't Repeat Yourself. La reutilización es sagrada.
- **YAGNI** — You Aren't Gonna Need It. No construyas para el futuro; construye para ahora.
- **Disrupción con propósito** — Innovar no es hacer cosas raras. Es hacer lo que funciona de una manera que nadie más está haciendo.

---

## 📋 Reglas de Oro del Desarrollo

### 1. El código se lee más de lo que se escribe.
Escribe código como si la persona que lo mantendrá fuera un colega recién llegado. O tu yo de dentro de 6 meses.

✅ *"Nombres claros y consistentes."*
❌ *"Abreviaturas crípticas y lógica enrevesada."*

### 2. Cada componente tiene una sola responsabilidad.
Un archivo, una función, una tarea. Separar para dominar.

✅ *"button.js → solo botones."*
❌ *"ui-components.js → botones, modales, tooltips, y formularios."*

### 3. La performance no es un lujo; es un requisito.
El código debe ser rápido por defecto. No se optimiza al final; se optimiza desde el principio.

✅ *"Lazy loading por defecto."*
❌ *"Cargar todo al inicio y arreglarlo después."*

### 4. Documenta mientras escribes.
El código que necesita explicación debería ser mejor código. Pero si hay que explicarlo, hazlo.

✅ *"// Este hook maneja la autenticación con OAuth2"*
❌ *"// Hace cosas"*

### 5. El CSS no es un accidente.
Usa clases semánticas. No uses `!important`. Usa variables CSS. Que el diseño sea parte del sistema.

✅ *"class="button-primary""*
❌ *"style="color: red; font-size: 16px;""*

---

## 🛠️ Estructura de Archivos y Proyectos

```
proyecto/
├── src/
│   ├── components/           # Componentes reutilizables
│   │   ├── Button/
│   │   │   ├── Button.jsx
│   │   │   ├── Button.css
│   │   │   └── Button.test.js
│   │   └── Card/
│   │       ├── Card.jsx
│   │       ├── Card.css
│   │       └── Card.test.js
│   ├── pages/                # Páginas específicas
│   │   ├── Home/
│   │   ├── Product/
│   │   └── About/
│   ├── hooks/                # Hooks personalizados
│   │   ├── useAuth.js
│   │   └── useTheme.js
│   ├── utils/                # Funciones de utilidad
│   │   ├── formatDate.js
│   │   └── validateEmail.js
│   ├── styles/               # Estilos globales y variables
│   │   ├── variables.css
│   │   └── global.css
│   └── config/               # Configuraciones
│       └── constants.js
├── public/                   # Archivos estáticos
│   ├── images/
│   └── fonts/
├── tests/                    # Tests de integración
├── README.md
├── LICENSE
└── package.json
```

---

## 🎨 Guía de Estilo de Código

### JavaScript / TypeScript

✅ **Nombres de variables en camelCase**
```javascript
const userName = 'Carlos';
const isAuthenticated = true;
```

✅ **Nombres de funciones verbos + sustantivos**
```javascript
function getUserData() { ... }
function validateEmail() { ... }
```

✅ **Componentes en PascalCase**
```javascript
function ButtonPrimary({ children, onClick }) { ... }
function CardFeature({ title, description }) { ... }
```

✅ **Constantes en UPPER_SNAKE_CASE**
```javascript
const API_URL = 'https://api.ego.cx/v1';
const MAX_RETRIES = 3;
```

✅ **Usa arrow functions para funciones puras**
```javascript
const sum = (a, b) => a + b;
```

✅ **Usa async/await para promesas**
```javascript
const fetchData = async (url) => {
  const response = await fetch(url);
  return response.json();
};
```

### CSS / SCSS

✅ **Variables CSS primero**
```css
:root {
  --color-primary: #DC0000;
  --spacing-base: 4px;
  --font-family-base: 'Inter', sans-serif;
}
```

✅ **Clases semánticas y utilitarias**
```css
.button-primary {
  background: var(--color-primary);
  padding: 12px 24px;
  border-radius: 4px;
}
```

✅ **Usa el sistema de spacing base**
```css
.card {
  padding: calc(var(--spacing-base) * 4); /* 16px */
  margin-bottom: calc(var(--spacing-base) * 6); /* 24px */
}
```

---

## 🤖 IA y Copilotos: Cómo Usarlos Bien

### Principios para Programación con IA

1. **Contexto es poder.** Dale al copiloto el contexto completo: el archivo, las dependencias, el propósito.
2. **Revisa antes de confiar.** La IA escribe código rápido; tú sabes si es correcto.
3. **Pide explicaciones.** No solo código; pide que te explique *por qué* eligió esa solución.
4. **Itera.** El primer intento rara vez es el mejor. Pide alternativas.
5. **Mantén la consistencia.** La IA puede saltar de un estilo a otro. Guíala con ejemplos.

### Ejemplos de Prompts para Copiloto

#### 🧩 Generar un Componente
```
Crea un componente Button en React con TypeScript.
Debe tener:
- Propiedades: variant (primary | secondary), size (sm | md | lg), onClick, children
- Usar CSS Modules para estilos
- Incluir comentarios para cada prop
- Seguir el sistema de diseño de EgoCX (colores #DC0000, #181716, #FCFCFC)
```

#### 🛠️ Optimizar una Función
```
Esta función procesa una lista de usuarios:
[insertar código]

Optimízala para:
1. Reducir la complejidad O(n²) a O(n)
2. Usar métodos de array modernos (map, filter, reduce)
3. Mantener la legibilidad
4. Agregar comentarios sobre la optimización
```

#### 📄 Refactorizar CSS
```
Refactoriza este CSS para usar variables CSS y un sistema de spacing de 4px:

[insertar código]

Debe mantener exactamente el mismo aspecto visual.
```

---

## 🧪 Testing y Calidad

### Principios

1. **Escribe tests antes o durante, no después.**
2. **Cada componente tiene su test.**
3. **Los tests deben ser rápidos y deterministas.**
4. **Mockea lo externo, prueba lo interno.**

### Estructura de Tests

```javascript
// Button.test.js
import { render, fireEvent } from '@testing-library/react';
import { ButtonPrimary } from './Button';

describe('ButtonPrimary', () => {
  it('renderiza con el texto correcto', () => {
    const { getByText } = render(<ButtonPrimary>Click me</ButtonPrimary>);
    expect(getByText('Click me')).toBeInTheDocument();
  });

  it('ejecuta onClick cuando se hace clic', () => {
    const handleClick = jest.fn();
    const { getByText } = render(
      <ButtonPrimary onClick={handleClick}>Click me</ButtonPrimary>
    );
    fireEvent.click(getByText('Click me'));
    expect(handleClick).toHaveBeenCalled();
  });
});
```

---

## 🚀 Despliegue y Monitoreo

### Checklist de Despliegue

- [ ] Todos los tests pasan
- [ ] Linter sin errores
- [ ] Bundle optimizado (code splitting, tree shaking)
- [ ] Assets comprimidos (WebP, AVIF, minificados)
- [ ] Variables de entorno configuradas
- [ ] Logs de errores configurados
- [ ] Métricas de performance (Core Web Vitals)

### Monitoreo

- **Errores:** Sentry / LogRocket
- **Performance:** Lighthouse / Web Vitals
- **Analytics:** Google Analytics / Plausible / Umami

---

## 📚 Recursos y Referencias

- [React Documentation](https://react.dev)
- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
- [CSS Variables Guide](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
- [KISS Principle](https://en.wikipedia.org/wiki/KISS_principle)
- [DRY Principle](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)

---

[Error: Referencia no disponible] [license(1234)]