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: 'pnpm create astro@latest foundation-cm'. En la siguiente opcion selecciona la recomendada, que seria la #1.
pnpm create astro@latest my-project Navegar al directorio del proyecto
Accede a la carpeta del proyecto que acabas de crear.
cd my-project Iniciar servidor de desarrollo
Inicia el servidor de desarrollo. Por defecto corre en http://localhost:3000
pnpm 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'.
pnpm 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.
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 ."