Run any Skill in Manus with one click

nextjs-project-setup

Stars0

Forks0

UpdatedJune 23, 2026 at 02:43

Set up a new Next.js project with best practices, configured development environment, TypeScript support, and production-ready structure. Use when starting a new Next.js project, initializing a web application, or setting up a project with recommended folder structure and tooling.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

JoseCortezz25

JoseCortezz25/skills-kit

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	nextjs-project-setup
version	1.0.0
description	Set up a new Next.js project with best practices, configured development environment, TypeScript support, and production-ready structure. Use when starting a new Next.js project, initializing a web application, or setting up a project with recommended folder structure and tooling.

Next.js Project Setup

Este Skill te ayuda a crear un nuevo proyecto Next.js con mejores prácticas, configuración de desarrollo optimizada y estructura lista para producción.

Instructions

Para crear un nuevo proyecto Next.js con mis mejores prácticas, sigue estos pasos:

Clonar el template:

   git clone https://github.com/JoseCortezz25/template-starter-nextjs.git tu-nombre-proyecto
   cd tu-nombre-proyecto

Limpiar el historial de git:

   rm -rf .git
   git init

Instalar dependencias con pnpm:

   pnpm install

Iniciar el servidor de desarrollo:

   pnpm dev
   # Luego abre http://localhost:3000 en tu navegador

Estructura del proyecto:
- /app - Rutas y componentes usando App Router
- /public - Archivos estáticos
- /components - Componentes reutilizables
- next.config.ts - Configuración de Next.js
- tsconfig.json - Configuración de TypeScript

Características incluidas

Next.js con App Router
TypeScript configurado
Fuente Geist optimizada con next/font
Estructura lista para producción
Soporte para desarrollo rápido con hot reload
Gestión de dependencias con pnpm

Ejemplos

Crear un nuevo proyecto desde cero

"Necesito iniciar un nuevo proyecto Next.js con mis mejores prácticas"

Clonar y configurar el template

"Clona el template starter de Next.js y configura todo para empezar a trabajar"

Instalar y verificar la instalación

"Configura el template de Next.js con pnpm e inicia el servidor de desarrollo"

Comandos útiles con pnpm

pnpm dev - Inicia servidor de desarrollo
pnpm build - Compila para producción
pnpm start - Ejecuta servidor de producción
pnpm lint - Ejecuta el linter

Siguientes pasos

Después de crear el proyecto, puedes:

Crear nuevas rutas en /app
Agregar componentes a /components
Personalizar estilos según tus necesidades
Desplegar en Vercel u otro hosting

More from this repository

same repository

atomic-design

JoseCortezz25/skills-kit

Guide for creating, componentizing, and refactoring UI components following Atomic Design. Use this skill whenever the user is actively building a new component, breaking down a UI into components, or refactoring an existing component. Trigger when the user shares a design/screenshot/code to componentize, when they are writing a new component from scratch, when they are splitting a large component into smaller ones, or when they are refactoring a component's structure or responsibilities. Do NOT trigger for general questions about Atomic Design theory — only when there is a concrete component being created, split, or refactored.

2026-06-230

commit-conventions

JoseCortezz25/skills-kit

Enforce project-specific Git commit message conventions compatible with commitlint and pre-commit hooks. Use this skill whenever the user asks to write a commit message, create a git commit, stage and commit changes, suggest a commit for their changes, or review/fix an existing commit message. Also trigger when the user says "commitea esto", "hazme un commit", "qué mensaje de commit uso", or any variation of committing code changes.

2026-06-230

forms

JoseCortezz25/skills-kit

Forms with React Hook Form + Zod. Use this skill whenever the user is building a form, adding a form field, writing a Zod schema for a form, creating a form hook, wiring a Server Action to a form, or handling form validation. Trigger when the user creates a new form component, asks how to validate a field, wants to handle form submission, or needs to show server-side errors. Do NOT trigger for general Zod schema questions unrelated to forms.

2026-06-230

goal-prompting

JoseCortezz25/skills-kit

Use when creating, rewriting, reviewing, or optimizing prompts for /goal, goal mode, Codex goal mode, long-running coding agents, autonomous coding tasks, or concrete agent milestones. This skill turns vague work requests into short, verifiable, measurable /goal prompts with guidance, constraints, progress tracking, and cleanup criteria. Trigger even when the user says "make this a goal", "goal prompt", "optimize this prompt for an agent", "run this with /goal", or asks how to structure work for a coding agent.

2026-06-230

react-19

JoseCortezz25/skills-kit

React 19 patterns with React Compiler. Trigger: When writing React components - no useMemo/useCallback needed.

2026-06-230

tailwind-4

JoseCortezz25/skills-kit

Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.

2026-06-230

name	nextjs-project-setup
version	1.0.0
description	Set up a new Next.js project with best practices, configured development environment, TypeScript support, and production-ready structure. Use when starting a new Next.js project, initializing a web application, or setting up a project with recommended folder structure and tooling.

Next.js Project Setup

Este Skill te ayuda a crear un nuevo proyecto Next.js con mejores prácticas, configuración de desarrollo optimizada y estructura lista para producción.

Instructions

Para crear un nuevo proyecto Next.js con mis mejores prácticas, sigue estos pasos:

Clonar el template:

   git clone https://github.com/JoseCortezz25/template-starter-nextjs.git tu-nombre-proyecto
   cd tu-nombre-proyecto

Limpiar el historial de git:

   rm -rf .git
   git init

Instalar dependencias con pnpm:

   pnpm install

Iniciar el servidor de desarrollo:

   pnpm dev
   # Luego abre http://localhost:3000 en tu navegador

Estructura del proyecto:
- /app - Rutas y componentes usando App Router
- /public - Archivos estáticos
- /components - Componentes reutilizables
- next.config.ts - Configuración de Next.js
- tsconfig.json - Configuración de TypeScript

Características incluidas

Next.js con App Router
TypeScript configurado
Fuente Geist optimizada con next/font
Estructura lista para producción
Soporte para desarrollo rápido con hot reload
Gestión de dependencias con pnpm

Ejemplos

Crear un nuevo proyecto desde cero

"Necesito iniciar un nuevo proyecto Next.js con mis mejores prácticas"

Clonar y configurar el template

"Clona el template starter de Next.js y configura todo para empezar a trabajar"

Instalar y verificar la instalación

"Configura el template de Next.js con pnpm e inicia el servidor de desarrollo"

Comandos útiles con pnpm

pnpm dev - Inicia servidor de desarrollo
pnpm build - Compila para producción
pnpm start - Ejecuta servidor de producción
pnpm lint - Ejecuta el linter

Siguientes pasos

Después de crear el proyecto, puedes:

Crear nuevas rutas en /app
Agregar componentes a /components
Personalizar estilos según tus necesidades
Desplegar en Vercel u otro hosting