Onboarding
Guía completa para nuevos integrantes del equipo
¡Bienvenido/a al equipo! 🎉
Nos alegra presentarte este nuevo formato orientado al código. Aquí encontrarás una estructura más clara, componentes reutilizables y ejemplos prácticos pensados para facilitar el desarrollo, la colaboración y la escalabilidad de nuestros proyectos. Este espacio está diseñado para que puedas explorar, entender y aplicar cada pieza con confianza, manteniendo consistencia y buenas prácticas. Siéntete libre de experimentar, proponer mejoras y aportar tu criterio técnico. Este formato evoluciona contigo y con el equipo.
🛠️ Configuración del entorno de Trabajo
💡 Tip: Si ya completaste los pasos 1 y 2, puedes saltar directamente al paso 3 y continuar desde ahí.
📖 Descripción
Terminal moderna con características inteligentes y autocompletado con IA
🚀 Cómo lo utilizamos
Descarga Warp desde su sitio web oficial. Una vez instalado, configura tu terminal preferida. Warp incluye autocompletado inteligente, búsqueda de comandos y colaboración en tiempo real.
⚙️ Configuración
Puedes personalizar Warp con temas y atajos de teclado. Accede a Settings (Cmd/Ctrl + ,) para configurar tu experiencia.
💻 Comandos comunes
Navegación
Comandos para moverte entre directorios
cd nombre-carpeta (entra a una carpeta) cd .. (sube un nivel) pwd (muestra la ruta actual) ls (lista archivos y carpetas) Gestión de Archivos
Crear, copiar y eliminar archivos
touch archivo.txt (crea un archivo) mkdir nombre-carpeta (crea una carpeta) cp archivo.txt copia.txt (copia un archivo) rm archivo.txt (elimina un archivo) Git
Comandos esenciales de control de versiones
git clone URL (clona un repositorio) git add . (prepara cambios) git commit -m 'mensaje' (confirma cambios) git push (sube cambios al servidor) NPM
Gestión de dependencias y scripts
npm install (instala dependencias) npm run dev (inicia servidor de desarrollo) npm run build (construye para producción) npm install nombre-paquete (instala un paquete) PNPM
Gestor de paquetes rápido y eficiente
pnpm install (instala dependencias) pnpm run dev (inicia servidor de desarrollo) pnpm run build (construye para producción) pnpm add nombre-paquete (instala un paquete) Utilidades
Comandos útiles generales
clear (limpia la pantalla) cat archivo.txt (muestra contenido de archivo) grep 'texto' archivo.txt (busca texto) history (muestra historial de comandos) 📖 Descripción
Editor con integración perfecta de IA para desarrollo ágil
🚀 Cómo lo utilizamos
Windsurf es nuestro editor principal. Descárgalo e instala las extensiones recomendadas del equipo. Utiliza Cascade (IA) para acelerar tu desarrollo.
⚙️ Configuración
Configura tu entorno con las extensiones del equipo. Activa Cascade para asistencia con IA. Sincroniza tus settings para mantener consistencia.
📖 Descripción
Framework moderno para sitios web rápidos y optimizados
🚀 Cómo lo utilizamos
Astro es nuestro framework principal. Usamos componentes .astro para crear páginas estáticas ultra-rápidas. Puedes integrar React, Vue o Svelte cuando sea necesario.
⚙️ Configuración
El archivo astro.config.mjs contiene la configuración del proyecto. Aquí defines integraciones, rutas y opciones de build. Revisa la documentación para configuraciones avanzadas.
📥 Instalación paso a paso
Crear un nuevo proyecto Astro
Ejecuta este comando para crear un nuevo proyecto Astro. Reemplaza 'my-project' con el nombre de tu proyecto. Ejemplo: 'npm create astro@latest foundation-cm'. En la siguiente opcion selecciona la recomendada, que seria la #1.
npm create astro@latest my-project Navegar al directorio del proyecto
Accede a la carpeta del proyecto que acabas de crear.
cd my-project Instalar dependencias
Instala todas las dependencias necesarias del proyecto.
npm install Iniciar servidor de desarrollo
Inicia el servidor de desarrollo. Por defecto corre en http://localhost:3000
npm run dev Construir para producción - (Este paso se hace al finalizar el proyecto)
Genera la versión optimizada para producción en la carpeta 'dist'.
npm run build 🔧 Opciones de configuración
Tailwind CSS
Integra Tailwind CSS para estilos utility-first
npx astro add tailwind Rutas dinámicas (opcional)
Crea rutas dinámicas con [id].astro en src/pages/
Archivo: src/pages/posts/[id].astro Variables de entorno (opcional)
Define variables en .env y accede con import.meta.env
VITE_API_URL=https://api.example.com Optimización de imágenes
Usa el componente Image para optimizar automáticamente
import { Image } from 'astro:assets' Layouts (opcional)
Crea layouts reutilizables en src/layouts/
Archivo: src/layouts/Layout.astro 📖 Descripción
Framework CSS utility-first para diseños rápidos y consistentes
🚀 Cómo lo utilizamos
Usamos Tailwind para todos los estilos. Aplica clases utility directamente en el HTML. Evita CSS personalizado a menos que sea absolutamente necesario.
⚙️ Configuración
El archivo tailwind.config.js define colores, fuentes y extensiones personalizadas. Puedes agregar tus propias utilidades y temas aquí.
📥 Instalación paso a paso
Instalar Tailwind CSS en tu proyecto Astro
Este comando instala y configura automáticamente Tailwind CSS en tu proyecto Astro.
npx astro add tailwind Importar estilos en tu layout principal
Agrega esta línea en tu archivo CSS global (src/styles/global.css) para activar Tailwind.
@import 'tailwindcss'; Comenzar a usar clases Tailwind
Ahora puedes usar clases Tailwind directamente en tus componentes HTML.
<div class="bg-blue-500 text-white p-4 rounded-lg">Hola Tailwind</div> 🎨 Cómo se construyen las clases
Colores
Define colores de fondo, texto y bordes
bg-red-500 (fondo rojo) text-blue-700 (texto azul oscuro) border-green-300 (borde verde claro) Espaciado
Controla padding y margin
p-4 (padding de 1rem en todos lados) m-2 (margin de 0.5rem en todos lados) px-8 (padding horizontal de 2rem) Tipografía
Estilos de texto y fuentes
text-lg (tamaño grande) font-bold (texto en negrita) text-center (texto centrado) Flexbox
Layouts flexibles
flex (activa flexbox) gap-4 (espacio entre elementos) justify-center (centra horizontalmente) Grid
Layouts con grid
grid (activa grid) grid-cols-3 (3 columnas) gap-6 (espacio entre celdas) Bordes y Sombras
Estilos visuales
rounded-lg (esquinas redondeadas) shadow-md (sombra media) border-2 (borde de 2px) 🔧 Opciones de configuración
Colores personalizados (opcional)
Define tu propia paleta de colores
theme: { colors: { primary: '#667eea' } } Responsive Design
Usa breakpoints para diseño responsivo
md:text-lg lg:text-xl (diferentes tamaños por pantalla) Dark Mode (opcional)
Soporte para modo oscuro
dark:bg-gray-900 (fondo oscuro en dark mode) Extensiones personalizadas (opcional)
Crea tus propias utilidades en tu archivo .css
@apply para combinar clases Purge CSS
Optimiza el tamaño final eliminando clases no usadas
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'] Plugins (opcional)
Extiende Tailwind con plugins comunitarios
npm install @tailwindcss/forms @tailwindcss/typography 📖 Descripción
Generador y editor de markdown online para la creación de especificaciones de diseño que la IA interpreta automáticamente.
🚀 Cómo lo utilizamos
Este es un generador de especificaciones en markdown que actúa como intermediario entre tus decisiones de diseño y la IA. El flujo es: (1) Completas un formulario con información del proyecto (nombre, identidad visual, estructura, datos auxiliares), (2) El generador produce un markdown estructurado con toda esa información, (3) Copias ese markdown y lo pasas a Cascade (la IA en Windsurf), (4) La IA interpreta el markdown y genera automáticamente la estructura HTML/Astro completa, estilos CSS, componentes y layout según tus especificaciones.
⚙️ Configuración
El generador de Caribe Media es una herramienta online que convierte tus decisiones de diseño en especificaciones markdown que Cascade puede interpretar y ejecutar automáticamente.
📥 Instalación paso a paso
Acceder al Generador de Planillas
Abre el navegador y ve a la URL del generador. No requiere instalación ni configuración previa. El sitio carga automáticamente con el formulario listo para usar.
https://markdown.caribemedia.com.do/ Completar sección PROYECTO
En el paso 01 PROYECTO, ingresa el nombre de tu proyecto (ej: 'Mi Sitio Web') y selecciona si usarás HTML o Astro como tecnología base. Esta información es fundamental para que Cascade genere el código correcto.
Nombre del Proyecto + Seleccionar tecnología (HTML o Astro) Configurar IDENTIDAD VISUAL
En el paso 02 IDENTIDAD VISUAL, define: Colores (fondo, texto, enlaces, acentos), Tipografía (títulos, cuerpo, botones, layout). Estos valores se incluirán en el markdown para que Cascade cree un diseño coherente y profesional.
Colores + Tipografía + Estilos Definir ESTRUCTURA del sitio
En el paso 03 ESTRUCTURA, crea las secciones de tu sitio. Para cada sección define: Nombre (ej: 'Inicio'), Contenido (descripción breve), Slug (URL amigable). Puedes agregar múltiples secciones con el botón '+ Agregar Sección'.
Secciones + Contenido + Slugs Agregar DATOS AUXILIARES
En DATOS AUXILIARES, completa: Contacto (descripción, email, teléfono), Redes Sociales (Facebook, Instagram URLs), SEO (GA4-ID para Google Analytics, Aviso de Cookies). Estos datos se integrarán automáticamente en tu sitio.
Contacto + Redes Sociales + SEO Generar la especificación
Una vez completes todos los campos, haz clic en el botón azul 'GENERAR ESPECIFICACIÓN' en la esquina inferior derecha. El sistema procesará toda tu información y generará un markdown detallado.
Haz clic en el botón GENERAR ESPECIFICACIÓN Copiar el markdown generado
El markdown se mostrará en el editor. Selecciona todo el contenido y cópialo al portapapeles. Este markdown contiene todas tus especificaciones en un formato que Cascade puede interpretar.
Selecciona todo (Ctrl+A) y copia (Ctrl+C) Pegar en el chat de Cascade
En tu editor Windsurf, abre el chat de Cascade (la IA) y pega todo el markdown que copiaste. Cascade analizará automáticamente cada sección y comenzará a generar tu sitio web completo.
Abre Windsurf y pega el markdown en el chat de Cascade Cascade genera tu sitio automáticamente
Cascade interpretará el markdown y generará: estructura de carpetas, componentes Astro/HTML, estilos Tailwind CSS, configuración de colores y tipografía, integración de datos (contacto, redes, SEO). Todo se crea automáticamente según tus especificaciones.
Espera a que Cascade procese y genere los archivos 🔧 Opciones de configuración
Colores personalizados
Define una paleta de colores coherente para tu marca
Fondo: #ffffff, Texto: #1a1a1a, Acento: #0066cc Tipografía profesional
Selecciona fuentes que reflejen la identidad de tu proyecto
Títulos: Outfit, Cuerpo: Inter, Botones: Modern Full Estructura modular
Organiza tu sitio en secciones lógicas y reutilizables
Inicio, Servicios, Portafolio, Contacto, Acerca de Integración de contacto (opcional)
Incluye información de contacto y formularios
Email: info@ejemplo.com, Teléfono: +1-234-567-8900 Redes sociales (opcional)
Conecta tus perfiles de redes sociales
Facebook: facebook.com/tu-pagina, Instagram: instagram.com/tu-usuario Configuración SEO (opcional)
Optimiza tu sitio para buscadores
GA4-ID: G-XXXXXXXXXX, Aviso de Cookies: activado