Nextjs project init

Skill dor-rondel/agent-skills-mcp/resources/frontend/nextjs-project-init

mcp server serving coding agent skills with helper tools

Install

npx -y skills add dor-rondel/agent-skills-mcp --skill nextjs-project-init

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use this skill when initializing a brand new Next.js web application from scratch. Covers pnpm setup, boilerplate structure configuration, quality tool validation, and writing the wildcard PR validation GitHub Actions workflow.

SKILL.md

3.0 KB, as published. Nobody here has run it

Next.js Project Initialization & CI Setup

This skill provides an automated scaffolding script to initialize a Next.js web application using your preferred local ecosystem (pnpm, TypeScript, Tailwind CSS) alongside a rigorous PR validation GitHub Action pipeline.

🏃‍♂️ Step-by-Step Initialization Workflow

1. Scaffold Next.js Boilerplate

Run the native initializer utilizing pnpm. Configure the project prompt choices with TypeScript, ESLint, Tailwind CSS, src/ directory, and App Router as needed:

pnpm create next-app@latest my-web-app
cd my-web-app

2. Configure Quality Automation Scripts

Ensure your local package.json contains matching scripts for your validation pipeline (Lint, Typecheck, Unit Tests, and Prettier checks):

pnpm add --save-dev prettier eslint-config-prettier

Ensure the following block exists or is updated inside your package.json scripts block:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "typecheck": "tsc --noEmit",
  "test:unit": "vitest run",
  "format:check": "prettier --check ."
}

3. Establish GitHub Actions PR Validation Workflow

Create the workflow directory structure and inject the wildcard branch validation workflow. This pipeline ensures every inbound PR passes formatting, typing, testing, and production compilation limits before landing:

mkdir -p .github/workflows

then in .github/workflows/ci.yml add the following YAML:

name: Assert New PR Is Valid Action

    on:
      pull_request:
        branches:
          - '*'

    jobs:
      validate:
        name: Validate Project
        runs-on: ubuntu-latest

        steps:
          - name: Checkout repository
            uses: actions/checkout@v6

          - name: Setup pnpm
            uses: pnpm/action-setup@v4
            with:
              version: 10

          - name: Setup Node.js
            uses: actions/setup-node@v4
            with:
              node-version: '20.x'
              cache: 'pnpm'

          - name: Install dependencies
            run: pnpm install --frozen-lockfile

          - name: Lint
            run: pnpm lint

          - name: Typecheck
            run: pnpm typecheck

          - name: Unit tests
            run: pnpm test:unit

          - name: Prettier check
            run: pnpm format:check

          - name: Build
            run: pnpm build

🛠️ Baseline Verification Run

Before pushing the new initialization branch upstream, run your entire local quality pipeline sequence using the frozen lockfile context to confirm full compliance:

pnpm install
pnpm format:check && pnpm lint && pnpm typecheck && pnpm build