🎯 Objetivo del starter

NK Next Starter es una base técnica reutilizable creada para iniciar nuevos proyectos web dentro de /nk.studio.

Su propósito principal es reducir el tiempo dedicado a configuraciones iniciales y evitar que cada proyecto tenga que resolver nuevamente las mismas necesidades técnicas. El starter proporciona una arquitectura organizada y un conjunto de herramientas, configuraciones y convenciones que pueden reutilizarse y adaptarse según los requerimientos de cada sitio.

La base no está vinculada a un cliente, diseño o CMS específico. Cada nuevo proyecto puede personalizar su identidad visual, contenido, componentes, integraciones y funcionalidades sin modificar innecesariamente la infraestructura compartida.

Objetivos principales

Reducir el tiempo de configuración

El starter incluye configuraciones y funcionalidades comunes que normalmente deben prepararse al comenzar un proyecto:

• Estructura inicial de carpetas.
• Configuración de Next.js, React y TypeScript.
• Sistema de estilos con Tailwind CSS.
• Internacionalización.
• Rutas localizadas.
• Metadata y SEO técnico.
• Sistema base de animaciones.
• Manejo de errores.
• Herramientas de calidad y formato.
• Reglas y skills para asistentes de IA.

Esto permite que el equipo pueda comenzar directamente con la implementación del diseño y las funcionalidades específicas.

Mantener una arquitectura consistente

Todos los proyectos iniciados desde el starter comparten una organización similar para páginas, componentes, estilos, utilidades, animaciones, tipos y estado global.

Esta consistencia facilita:

• Comprender rápidamente la estructura de un proyecto.
• Cambiar de proyecto sin aprender una arquitectura completamente nueva.
• Reutilizar soluciones entre diferentes sitios.
• Realizar revisiones de código.
• Detectar errores con mayor facilidad.
• Incorporar nuevos desarrolladores al equipo.

Centralizar decisiones técnicas

El starter define un punto de partida común para decisiones que afectan a todo el proyecto:

• Organización de componentes.
• Manejo de idiomas.
• Construcción de rutas.
• Navegación interna.
• Sistema de diseño.
• Configuración de animaciones.
• Generación de metadata.
• Datos estructurados.
• Manejo de errores.
• Estándares de calidad.

Estas decisiones pueden adaptarse cuando un proyecto lo requiera, pero deben partir de la infraestructura existente.

Reutilizar componentes y utilidades

La base incluye componentes, hooks y funciones para resolver necesidades frecuentes.

El objetivo no es que todos los proyectos tengan exactamente la misma interfaz, sino que puedan reutilizar la lógica y modificar únicamente la presentación o el comportamiento particular que necesiten.

Esto ayuda a evitar:

• Duplicación de código.
• Componentes con responsabilidades repetidas.
• Diferentes soluciones para el mismo problema.
• Configuraciones distribuidas por todo el proyecto.
• Implementaciones innecesariamente acopladas.

Mejorar la calidad del desarrollo

El starter incluye herramientas y convenciones para mantener un estándar compartido:

• TypeScript para el tipado.
• ESLint para validar el código.
• Prettier para mantener un formato consistente.
• Husky y lint-staged para revisar archivos antes de los commits.
• Configuraciones centralizadas.
• Manejo global de errores.
• Reglas para evitar valores mágicos.
• Verificaciones de accesibilidad, rendimiento y SEO.

La calidad no debe revisarse únicamente al finalizar el proyecto. Debe formar parte del proceso de implementación.

Optimizar rendimiento y experiencia

La base incorpora herramientas para crear experiencias visuales avanzadas sin perder de vista el rendimiento:

• Animaciones centralizadas.
• Smooth scroll.
• Loader inicial.
• Transiciones entre páginas.
• Animaciones activadas por scroll.
• Soporte para movimiento reducido.
• Optimización de imágenes y fuentes mediante Next.js.
• Herramientas para revisar Core Web Vitals.

Las animaciones y efectos deben utilizarse únicamente cuando aporten valor a la experiencia.

Facilitar la internacionalización

El starter incluye una configuración inicial para trabajar con múltiples idiomas y URLs localizadas.

Esto permite que los proyectos puedan incorporar:

• Contenido traducido.
• Rutas diferentes por idioma.
• Selector de idioma.
• Navegación localizada.
• Metadata por idioma.
• Etiquetas hreflang.
• URLs canónicas.
• Detección inicial del idioma.

Los idiomas y rutas disponibles deben adaptarse a las necesidades de cada proyecto.

Mejorar el uso de asistentes de IA

El starter incluye Rules y Skills para que los asistentes de IA trabajen respetando la arquitectura y los estándares del equipo.

Estas instrucciones ayudan a que la IA pueda:

• Interpretar correctamente los diseños de Figma.
• Utilizar los componentes existentes.
• Mantener el sistema de diseño.
• Aplicar correctamente las animaciones.
• Evitar valores mágicos.
• Respetar la estructura de carpetas.
• Revisar accesibilidad, SEO y rendimiento.
• Utilizar los assets proporcionados.
• Evitar decisiones que contradigan las convenciones del proyecto.

Las Rules y Skills sirven como apoyo para el desarrollo, pero no reemplazan la revisión técnica del equipo.

Permitir personalización por proyecto

El starter funciona como punto de partida y no como una plantilla visual cerrada.

Cada proyecto debe poder personalizar:

• Nombre e identidad.
• Tipografías.
• Colores.
• Espaciados.
• Componentes.
• Header y Footer.
• Animaciones.
• Idiomas.
• Rutas.
• Metadata.
• Analítica.
• Integraciones externas.
• Fuente de contenido.
• Funcionalidades específicas.

Las personalizaciones deben realizarse manteniendo separada la lógica general de la configuración propia del proyecto.

Resultado esperado

Al utilizar NK Next Starter, un nuevo proyecto debería comenzar con una base funcional, organizada y preparada para escalar.

El equipo debería poder enfocarse principalmente en:

• Implementar el diseño.
• Crear los componentes particulares.
• Incorporar el contenido.
• Desarrollar las funcionalidades específicas.
• Realizar las integraciones necesarias.
• Validar la calidad final.

El starter debe evolucionar a medida que el equipo detecte nuevas necesidades compartidas, evitando incorporar soluciones demasiado específicas de un único proyecto.