From antigravity-awesome-skills
Scaffolds production-ready TypeScript projects for Next.js full-stack apps, React+Vite SPAs, Node.js APIs, libraries, and CLIs using pnpm, Vite, testing, and type safety.
How this skill is triggered — by the user, by Claude, or both
Slash command
/antigravity-awesome-skills:javascript-typescript-typescript-scaffoldThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, Next.js), type safety, testing setup, and configuration following current best practices.
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, Next.js), type safety, testing setup, and configuration following current best practices.
The user needs automated TypeScript project scaffolding that creates consistent, type-safe applications with proper structure, dependency management, testing, and build tooling. Focus on modern TypeScript patterns and scalable architecture.
$ARGUMENTS
Determine the project type from user requirements:
# Install pnpm if needed
npm install -g pnpm
# Initialize project
mkdir project-name && cd project-name
pnpm init
# Initialize git
git init
echo "node_modules/" >> .gitignore
echo "dist/" >> .gitignore
echo ".env" >> .gitignore
# Create Next.js project with TypeScript
pnpm create next-app@latest . --typescript --tailwind --app --src-dir --import-alias "@/*"
nextjs-project/
├── package.json
├── tsconfig.json
├── next.config.js
├── .env.example
├── src/
│ ├── app/
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── api/
│ │ │ └── health/
│ │ │ └── route.ts
│ │ └── (routes)/
│ │ └── dashboard/
│ │ └── page.tsx
│ ├── components/
│ │ ├── ui/
│ │ │ ├── Button.tsx
│ │ │ └── Card.tsx
│ │ └── layout/
│ │ ├── Header.tsx
│ │ └── Footer.tsx
│ ├── lib/
│ │ ├── api.ts
│ │ ├── utils.ts
│ │ └── types.ts
│ └── hooks/
│ ├── useAuth.ts
│ └── useFetch.ts
└── tests/
├── setup.ts
└── components/
└── Button.test.tsx
package.json:
{
"name": "nextjs-project",
"version": "0.1.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "vitest",
"type-check": "tsc --noEmit"
},
"dependencies": {
"next": "^14.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "^20.11.0",
"@types/react": "^18.2.0",
"typescript": "^5.3.0",
"vitest": "^1.2.0",
"@vitejs/plugin-react": "^4.2.0",
"eslint": "^8.56.0",
"eslint-config-next": "^14.1.0"
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"jsx": "preserve",
"module": "ESNext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"allowJs": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"incremental": true,
"paths": {
"@/*": ["./src/*"]
},
"plugins": [{"name": "next"}]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
# Create Vite project
pnpm create vite . --template react-ts
vite.config.ts:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: {
port: 3000,
},
test: {
globals: true,
environment: 'jsdom',
setupFiles: './tests/setup.ts',
},
})
nodejs-api/
├── package.json
├── tsconfig.json
├── src/
│ ├── index.ts
│ ├── app.ts
│ ├── config/
│ │ ├── database.ts
│ │ └── env.ts
│ ├── routes/
│ │ ├── index.ts
│ │ ├── users.ts
│ │ └── health.ts
│ ├── controllers/
│ │ └── userController.ts
│ ├── services/
│ │ └── userService.ts
│ ├── models/
│ │ └── User.ts
│ ├── middleware/
│ │ ├── auth.ts
│ │ └── errorHandler.ts
│ └── types/
│ └── express.d.ts
└── tests/
└── routes/
└── users.test.ts
package.json for Node.js API:
{
"name": "nodejs-api",
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "tsx watch src/index.ts",
"build": "tsc",
"start": "node dist/index.js",
"test": "vitest",
"lint": "eslint src --ext .ts"
},
"dependencies": {
"express": "^4.18.2",
"dotenv": "^16.4.0",
"zod": "^3.22.0"
},
"devDependencies": {
"@types/express": "^4.17.21",
"@types/node": "^20.11.0",
"typescript": "^5.3.0",
"tsx": "^4.7.0",
"vitest": "^1.2.0",
"eslint": "^8.56.0",
"@typescript-eslint/parser": "^6.19.0",
"@typescript-eslint/eslint-plugin": "^6.19.0"
}
}
src/app.ts:
import express, { Express } from 'express'
import { healthRouter } from './routes/health.js'
import { userRouter } from './routes/users.js'
import { errorHandler } from './middleware/errorHandler.js'
export function createApp(): Express {
const app = express()
app.use(express.json())
app.use('/health', healthRouter)
app.use('/api/users', userRouter)
app.use(errorHandler)
return app
}
library-name/
├── package.json
├── tsconfig.json
├── tsconfig.build.json
├── src/
│ ├── index.ts
│ └── core.ts
├── tests/
│ └── core.test.ts
└── dist/
package.json for Library:
{
"name": "@scope/library-name",
"version": "0.1.0",
"type": "module",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": "./dist/index.js",
"types": "./dist/index.d.ts"
}
},
"files": ["dist"],
"scripts": {
"build": "tsc -p tsconfig.build.json",
"test": "vitest",
"prepublishOnly": "pnpm build"
},
"devDependencies": {
"typescript": "^5.3.0",
"vitest": "^1.2.0"
}
}
.env.example:
NODE_ENV=development
PORT=3000
DATABASE_URL=postgresql://user:pass@localhost:5432/db
JWT_SECRET=your-secret-key
vitest.config.ts:
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
globals: true,
environment: 'node',
coverage: {
provider: 'v8',
reporter: ['text', 'json', 'html'],
},
},
})
.eslintrc.json:
{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": {
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/no-unused-vars": "error"
}
}
Focus on creating production-ready TypeScript projects with modern tooling, strict type safety, and comprehensive testing setup.
npx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-awesome-skillsGenerates production-ready TypeScript project structures for Node.js and frontend apps using pnpm, Vite, Next.js, with type safety and testing setup.
Scaffolds a new Next.js application with App Router, TypeScript, Tailwind CSS, and ESLint. Use when starting a new web app, creating a React frontend with SSR, or building a full-stack project with API routes.
Scaffolds projects with directory structures, configs, dependencies, linting, testing, CI/CD basics, and docs for frontend, backend, mobile, CLI, libraries, and monorepos.