sickn33/antigravity-awesome-skills/javascript-typescript-typescript-scaffold

Claude Code and agent skill by sickn33/antigravity-awesome-skills

Trust tier 2
  • community
LLM review pending
Source check pending

Checking that the SKILL.md file is still in the repository.

Scaffold TypeScript projects with build tooling, type checking, testing, and configuration.

Install

npx vskill@latest install sickn33/antigravity-awesome-skills/javascript-typescript-typescript-scaffold

SKILL.md

TypeScript Project Scaffolding

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.

Use this skill when

  • Working on typescript project scaffolding tasks or workflows
  • Needing guidance, best practices, or checklists for typescript project scaffolding

Do not use this skill when

  • The task is unrelated to typescript project scaffolding
  • You need a different domain or tool outside this scope

Context

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.

Requirements

$ARGUMENTS

Instructions

1. Analyze Project Type

Determine the project type from user requirements:

  • Next.js: Full-stack React applications, SSR/SSG, API routes
  • React + Vite: SPA applications, component libraries
  • Node.js API: Express/Fastify backends, microservices
  • Library: Reusable packages, utilities, tools
  • CLI: Command-line tools, automation scripts
2. Initialize Project with pnpm

Choose one scaffold path. For Next/Vite, run the chosen generator in a new empty directory rather than pre-running pnpm init and then overwriting it. Inspect the actual generated package/lockfile and supported Node version; the package versions below are historical examples, not current security-approved pins. Do not globally install tooling or overwrite an existing project without authorization. Ignore .env* secrets while explicitly allowing a sanitized .env.example.

bash
# 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
3. Generate Next.js Project Structure
bash
# 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:

json
{
"name": "nextjs-project",
"version": "0.1.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint .",
"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:

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"]
}
4. Generate React + Vite Project Structure
bash
# Create Vite project
pnpm create vite . --template react-ts

vite.config.ts:

typescript
import { defineConfig } from 'vitest/config'
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',
},
})
5. Generate Node.js API Project Structure
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:

json
{
"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:

typescript
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
}
6. Generate TypeScript Library Structure
library-name/
├── package.json
├── tsconfig.json
├── tsconfig.build.json
├── src/
│ ├── index.ts
│ └── core.ts
├── tests/
│ └── core.test.ts
└── dist/

package.json for Library:

json
{
"name": "@scope/library-name",
"version": "0.1.0",
"type": "module",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
}
},
"files": ["dist"],
"scripts": {
"build": "tsc -p tsconfig.build.json",
"test": "vitest",
"prepublishOnly": "pnpm build"
},
"devDependencies": {
"typescript": "^5.3.0",
"vitest": "^1.2.0"
}
}
7. Configure Development Tools

.env.example:

env
NODE_ENV=development
PORT=3000
DATABASE_URL=postgresql://user:pass@localhost:5432/db
JWT_SECRET=your-secret-key

vitest.config.ts:

typescript
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
globals: true,
environment: 'node',
coverage: {
provider: 'v8',
reporter: ['text', 'json', 'html'],
},
},
})

.eslintrc.json:

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"
}
}

Output Format

  1. Project Structure: Complete directory tree with all necessary files
  2. Configuration: package.json, tsconfig.json, build tooling
  3. Entry Point: Main application file with type-safe setup
  4. Tests: Test structure with Vitest configuration
  5. Documentation: README with setup and usage instructions
  6. Development Tools: .env.example, .gitignore, linting config

Focus on creating production-ready TypeScript projects with modern tooling, strict type safety, and comprehensive testing setup.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewNot runA model review is scheduled for the next rescan.

Quality evaluation

  • Task evaluationWarning, 83 of 100Marginal. 1 run. Evaluated 8 months ago.

Source

Popularity

Repository stars
27,591
Repository forks
4,643
Repository npm downloads, 7 days
6,951
7-day trend score
72

Stars and forks are for the whole GitHub repository, not this skill alone. Downloads are for the repository's npm package. Refreshed 21 Mar 2026, 7 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/sickn33/antigravity-awesome-skills/javascript-typescript-typescript-scaffold/badge)](https://verified-skill.com/skills/sickn33/antigravity-awesome-skills/javascript-typescript-typescript-scaffold)

Something wrong with this skill or its page? Tell us.