Skip to Content
CTRL K
DocumentaciónCM docs

Introducción

En esta sección encontrarás la configuración base y el flujo recomendado para iniciar y mantener proyectos de Creative Minds.

Actualmente ofrecemos dos opciones de stack:

  • Next.js (disponible)
  • Astro (próximamente)

Nota: Por ahora, la plantilla disponible desde el CLI es Next.js. La opción de Astro se documenta como referencia y estará habilitada en una versión futura.

Inicio de proyecto con el CLI de Creative Minds

Para iniciar un proyecto utilizando los starter templates y mantener versiones actualizadas del esqueleto del proyecto, instala el CLI de Creative Minds como dependencia de desarrollo y crea tu proyecto con el comando build.

# Instala el CLI como devDependency para obtener siempre la última versión
npm install --save-dev @crtv-mnds/cli
 
# Ejecuta el generador e inicia tu proyecto
npx cm build

Durante la ejecución de npx cm build podrás:

  • Elegir el template (por ahora: Next.js)
  • Seleccionar nombre del proyecto y opciones base
  • Inicializar configuraciones recomendadas

Si eliges un Starter Kit, la mayoría de los archivos y configuraciones descritas en esta página ya vendrán preconfigurados.

Configuraciones base comunes en Creative Minds

Todos los proyectos mantienen una base consistente que incluye:

  • shadcn/ui para el sistema de componentes y estilos (sobre Tailwind CSS)
  • Prettier para formateo de código
  • ESLint para linting
  • Husky y lint-staged para hooks de Git y validación en commits

A continuación se describen los comandos y archivos de configuración recomendados. Siempre valida versiones actuales en la documentación oficial de cada herramienta.

Next.js — Setup recomendado (Next.js 15)

Puedes crear apps Next.js con el CLI oficial si lo necesitas (fuera del CLI de Creative Minds):

npx create-next-app@latest

Referencias:

ESLint para Next.js 15

Desde Next.js 15 se recomienda configurar ESLint de manera explícita. Instala:

npm i -D eslint eslint-config-next

Ejemplo de eslint.config.mjs (formato plano moderno):

// eslint.config.mjs
import next from 'eslint-config-next'
 
export default [
  ...next,
  {
    rules: {
      // Reglas adicionales del equipo (opcional)
      'no-console': ['warn', { allow: ['warn', 'error'] }]
    }
  }
]

Si utilizas TypeScript, Next.js ya lo soporta nativamente al incluir un tsconfig.json. Si partes de cero, instala tipos básicos:

npm i -D typescript @types/node

En Next.js 15, next lint muestra deprecación y se retirará en Next.js 16. Usa eslint directamente en scripts.

shadcn/ui en Next.js

Sigue la guía oficial para Next.js:

# Inicializa shadcn/ui
npx shadcn@latest init
 
# (Opcional) Agrega componentes cuando los necesites
npx shadcn@latest add button card input

Documentación: https://ui.shadcn.com/docs/installation/next 

Esto configurará Tailwind CSS (si aún no está presente) y las utilidades necesarias. Revisa tailwind.config.ts/tailwind.config.js y postcss.config.js generados.

Prettier

Instala Prettier y la integración con ESLint (para desactivar reglas en conflicto):

npm i -D prettier eslint-config-prettier

Archivo .prettierrc recomendado:

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "all",
  "tabWidth": 2,
  "arrowParens": "always",
  "endOfLine": "lf"
}

Archivo .prettierignore recomendado:

.next
build
out
coverage
node_modules
**/*.min.*
**/dist/**

Scripts en package.json:

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Documentación: https://prettier.io/docs/install.html 

Husky y lint-staged

Husky permite ejecutar scripts antes de un commit para asegurar calidad. Configuración mínima con lint-staged:

# Instala dependencias
npm i -D husky lint-staged
 
# Configura el script prepare para Husky
npm pkg set scripts.prepare="husky"
 
# Inicializa Husky (crea .husky/)
npx husky init
 
# Crea hook pre-commit que ejecuta lint-staged
echo "npx lint-staged" > .husky/pre-commit

Agrega a package.json tu configuración de lint-staged:

{
  "lint-staged": {
    "*.{ts,tsx,js,jsx,css,md,mdx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}

Documentación:

Astro (próximamente)

La plantilla de Astro aún no está disponible en el CLI, pero cuando lo esté, la base de configuración se mantendrá consistente con:

  • Prettier + ESLint configurados desde el inicio
  • Husky + lint-staged para validaciones en commits
  • Sistema de componentes (según soporte del proyecto) y estilos consistentes

En cuanto se libere el Starter Kit de Astro, podrás elegirlo al correr npx cm build y estos archivos vendrán listos.

Resumen

  • Utiliza @crtv-mnds/cli para generar y mantener plantillas actualizadas.
  • Next.js es el stack disponible hoy; Astro estará disponible próximamente.
  • shadcn/ui, Prettier, ESLint, Husky y lint-staged forman la base del ecosistema.
  • Si eliges un Starter Kit, estas configuraciones vendrán ya listas para usar.
Last updated on
InicioStarter Kit