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 inicial (nuevos empleados)
Solo necesitas completar estos pasos una vez, cuando te integras al equipo.
📖 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.
Flujo de trabajo del desarrollador
Pasos que debes seguir en cada proyecto: clonar el repositorio, configurar Astro, Tailwind y las herramientas de calidad de código.
📖 Descripción
Primer paso del flujo: preparar el repositorio que Infraestructura te comparte antes de instalar Astro.
🚀 Cómo lo utilizamos
Cuando recibas la invitación al repositorio, primero elimina el README inicial y commitea ese borrado en GitHub. Después clona el repositorio en tu computadora y entra a la carpeta del proyecto.
⚙️ Configuración
Este paso deja el repositorio listo y vacío para que el Paso 2 pueda instalar Astro dentro de la carpeta clonada usando create astro@6.4.8 .
Git — Guía Rápida de Trabajo en Equipo
Git y Astro trabajan juntos en este onboarding: primero preparas el repositorio en GitHub y luego usas esa misma carpeta para crear el proyecto Astro.
Infraestructura te invitará al repositorio del proyecto. Acepta la invitación, entra al repositorio en GitHub y completa estos pasos antes de instalar Astro.
Paso 1: preparar GitHub y clonar el proyecto
Eliminar el README inicial
Dentro del repositorio en GitHub, elimina el README que viene creado por defecto. Esto deja la carpeta limpia para poder instalar Astro después.
Commitear el borrado del README
Confirma el cambio en GitHub para que el repositorio quede actualizado sin el README inicial.
Clonar el repositorio
Copia la URL del repositorio y clónalo en tu computadora desde la terminal.
git clone <url-del-repositorio> Entrar a la carpeta clonada
Muévete dentro de la carpeta que acabas de clonar. Desde ahí continuarás con el Paso 2 de Astro.
cd <nombre-del-proyecto> Cuando ya estés dentro de la carpeta clonada, continúa con el Paso 2: instalar Astro en ese mismo directorio.
Reglas de oro
- ✅ Borra el README inicial antes de clonar el repositorio para que Astro pueda crearse en una carpeta limpia.
- ✅ Después de eliminar el README, siempre commitea ese cambio en GitHub.
- ✅ Ejecuta cd <nombre-del-proyecto> antes de instalar Astro; el comando de Astro debe correr dentro de la carpeta clonada.
Este flujo conecta el Paso 1 con el Paso 2: Git prepara el repositorio y Astro se instala luego dentro de esa misma carpeta.
📖 Descripción
Framework moderno para sitios web rápidos y optimizados
🚀 Cómo lo utilizamos
Después de completar el Paso 1 de Git, entra a la carpeta clonada y crea el proyecto Astro directamente dentro de esa carpeta.
⚙️ Configuración
El punto al final de create astro@6.4.8 . es obligatorio: le indica a Astro que debe instalarse dentro de la carpeta actual, no crear una carpeta nueva.
Importante: El comando create astro@6.4.8 . debe ejecutarse dentro de la carpeta clonada. No elimines el punto final: ese punto significa carpeta actual.
📥 Instalación paso a paso
Crear Astro dentro de la carpeta clonada
Selecciona tu paquetería y ejecuta estos comandos en la carpeta clonada. El punto final indica el directorio actual.
pnpm create astro@latest . --template basics --no-install
pnpm pkg set dependencies.astro=6.4.8
pnpm pkg set devDependencies.vite=7.3.6
pnpm pkg set pnpm.overrides.vite=7.3.6
pnpm install
pnpm astro --version
pnpm why vite Iniciar servidor de desarrollo
Levanta el servidor local de Astro para comenzar a trabajar y revisar el proyecto en el navegador.
pnpm run dev 🔧 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.
pnpm 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
Configuración de herramientas de linting y formateo para estandarizar el código entre todos los desarrolladores del equipo.
🚀 Cómo lo utilizamos
Prettier se encarga de formatear el código automáticamente, mientras que ESLint detecta errores y malas prácticas. Juntos garantizan un código limpio y consistente en todo el equipo.
⚙️ Configuración
Prettier usa el archivo .prettierrc para su configuración. ESLint usa eslint.config.mjs con las reglas del equipo. Ambos se integran con Windsurf para formatear al guardar.
📥 Instalación paso a paso
Instalar Prettier y plugins
Instala Prettier junto con los plugins necesarios para Astro y Tailwind CSS.
pnpm add --save-dev --save-exact prettier prettier-plugin-astro prettier-plugin-tailwindcss Crear archivo .prettierrc
Crea un archivo .prettierrc en la raíz del proyecto y pega esta configuración. El plugin de Tailwind debe ir de último en la lista de plugins.
{
"plugins": [
"prettier-plugin-astro",
"prettier-plugin-tailwindcss"
],
"overrides": [
{
"files": "*.astro",
"options": {
"parser": "astro"
}
}
]
} Instalar ESLint y plugins
Instala ESLint con los plugins recomendados para proyectos Astro.
pnpm add -D eslint eslint-plugin-astro eslint-plugin-astro-standards eslint-plugin-jsx-a11y eslint-plugin-unused-imports eslint-plugin-simple-import-sort Crear archivo eslint.config.mjs
Crea un archivo eslint.config.mjs en la raíz del proyecto y pega esta configuración para activar las reglas recomendadas de Astro.
import astro from "eslint-plugin-astro";
import astroStandards from "eslint-plugin-astro-standards";
export default [
...astro.configs.recommended,
{
...astroStandards.configs.recommended,
},
]; 💻 Requisitos del Editor (Obligatorio)
Para mantener la consistencia del código en el equipo, es obligatorio tener instalados los siguientes plugins en tu editor de código:
Visual Studio Code
Extensiones obligatorias para mantener consistencia del código
Plugins requeridos:
- ✅
- ✅
Pasos de configuración:
- 1. Instalar las extensiones desde el marketplace
- 2. Configurar Prettier como formateador por defecto
- 3. Habilitar 'Format on Save' en la configuración
WebStorm / IntelliJ IDEA
Configuración de herramientas integradas
Pasos de configuración:
- 1. Activar Prettier en Settings → Languages & Frameworks → Prettier
- 2. Activar ESLint en Settings → Languages & Frameworks → ESLint
- 3. Habilitar 'Run on save' para ambas herramientas
🔧 Opciones de configuración
Formateo al guardar
Configura Windsurf para formatear automáticamente con Prettier al guardar
Settings > Format On Save: true, Default Formatter: "Prettier" Ignorar archivos (opcional)
Crea .prettierignore para excluir archivos del formateo
node_modules
dist
.astro Scripts en package.json
Agrega scripts para ejecutar lint y format desde la terminal. IMPORTANTE: Para ESLint, debes agregar en tu package.json el siguiente script: "lint": "eslint . --ext .js,.ts,.astro"
"lint": "eslint . --ext .js,.ts,.astro", "format": "prettier --write ."