Javascript Typescript Typescript Scaffold

1---
2name: javascript-typescript-typescript-scaffold
3description: "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, N"
4---
5 
6# TypeScript Project Scaffolding
7 
8You 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.
9 
10## Use this skill when
11 
12- Working on typescript project scaffolding tasks or workflows
13- Needing guidance, best practices, or checklists for typescript project scaffolding
14 
15## Do not use this skill when
16 
17- The task is unrelated to typescript project scaffolding
18- You need a different domain or tool outside this scope
19 
20## Context
21 
22The 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.
23 
24## Requirements
25 
26$ARGUMENTS
27 
28## Instructions
29 
30### 1. Analyze Project Type
31 
32Determine the project type from user requirements:
33- **Next.js**: Full-stack React applications, SSR/SSG, API routes
34- **React + Vite**: SPA applications, component libraries
35- **Node.js API**: Express/Fastify backends, microservices
36- **Library**: Reusable packages, utilities, tools
37- **CLI**: Command-line tools, automation scripts
38 
39### 2. Initialize Project with pnpm
40 
41```bash
42# Install pnpm if needed
43npm install -g pnpm
44 
45# Initialize project
46mkdir project-name && cd project-name
47pnpm init
48 
49# Initialize git
50git init
51echo "node_modules/" >> .gitignore
52echo "dist/" >> .gitignore
53echo ".env" >> .gitignore
54```
55 
56### 3. Generate Next.js Project Structure
57 
58```bash
59# Create Next.js project with TypeScript
60pnpm create next-app@latest . --typescript --tailwind --app --src-dir --import-alias "@/*"
61```
62 
63```
64nextjs-project/
65├── package.json
66├── tsconfig.json
67├── next.config.js
68├── .env.example
69├── src/
70│   ├── app/
71│   │   ├── layout.tsx
72│   │   ├── page.tsx
73│   │   ├── api/
74│   │   │   └── health/
75│   │   │       └── route.ts
76│   │   └── (routes)/
77│   │       └── dashboard/
78│   │           └── page.tsx
79│   ├── components/
80│   │   ├── ui/
81│   │   │   ├── Button.tsx
82│   │   │   └── Card.tsx
83│   │   └── layout/
84│   │       ├── Header.tsx
85│   │       └── Footer.tsx
86│   ├── lib/
87│   │   ├── api.ts
88│   │   ├── utils.ts
89│   │   └── types.ts
90│   └── hooks/
91│       ├── useAuth.ts
92│       └── useFetch.ts
93└── tests/
94    ├── setup.ts
95    └── components/
96        └── Button.test.tsx
97```
98 
99**package.json**:
100```json
101{
102  "name": "nextjs-project",
103  "version": "0.1.0",
104  "scripts": {
105    "dev": "next dev",
106    "build": "next build",
107    "start": "next start",
108    "lint": "next lint",
109    "test": "vitest",
110    "type-check": "tsc --noEmit"
111  },
112  "dependencies": {
113    "next": "^14.1.0",
114    "react": "^18.2.0",
115    "react-dom": "^18.2.0"
116  },
117  "devDependencies": {
118    "@types/node": "^20.11.0",
119    "@types/react": "^18.2.0",
120    "typescript": "^5.3.0",
121    "vitest": "^1.2.0",
122    "@vitejs/plugin-react": "^4.2.0",
123    "eslint": "^8.56.0",
124    "eslint-config-next": "^14.1.0"
125  }
126}
127```
128 
129**tsconfig.json**:
130```json
131{
132  "compilerOptions": {
133    "target": "ES2022",
134    "lib": ["ES2022", "DOM", "DOM.Iterable"],
135    "jsx": "preserve",
136    "module": "ESNext",
137    "moduleResolution": "bundler",
138    "resolveJsonModule": true,
139    "allowJs": true,
140    "strict": true,
141    "noEmit": true,
142    "esModuleInterop": true,
143    "skipLibCheck": true,
144    "forceConsistentCasingInFileNames": true,
145    "incremental": true,
146    "paths": {
147      "@/*": ["./src/*"]
148    },
149    "plugins": [{"name": "next"}]
150  },
151  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
152  "exclude": ["node_modules"]
153}
154```
155 
156### 4. Generate React + Vite Project Structure
157 
158```bash
159# Create Vite project
160pnpm create vite . --template react-ts
161```
162 
163**vite.config.ts**:
164```typescript
165import { defineConfig } from 'vite'
166import react from '@vitejs/plugin-react'
167import path from 'path'
168 
169export default defineConfig({
170  plugins: [react()],
171  resolve: {
172    alias: {
173      '@': path.resolve(__dirname, './src'),
174    },
175  },
176  server: {
177    port: 3000,
178  },
179  test: {
180    globals: true,
181    environment: 'jsdom',
182    setupFiles: './tests/setup.ts',
183  },
184})
185```
186 
187### 5. Generate Node.js API Project Structure
188 
189```
190nodejs-api/
191├── package.json
192├── tsconfig.json
193├── src/
194│   ├── index.ts
195│   ├── app.ts
196│   ├── config/
197│   │   ├── database.ts
198│   │   └── env.ts
199│   ├── routes/
200│   │   ├── index.ts
201│   │   ├── users.ts
202│   │   └── health.ts
203│   ├── controllers/
204│   │   └── userController.ts
205│   ├── services/
206│   │   └── userService.ts
207│   ├── models/
208│   │   └── User.ts
209│   ├── middleware/
210│   │   ├── auth.ts
211│   │   └── errorHandler.ts
212│   └── types/
213│       └── express.d.ts
214└── tests/
215    └── routes/
216        └── users.test.ts
217```
218 
219**package.json for Node.js API**:
220```json
221{
222  "name": "nodejs-api",
223  "version": "0.1.0",
224  "type": "module",
225  "scripts": {
226    "dev": "tsx watch src/index.ts",
227    "build": "tsc",
228    "start": "node dist/index.js",
229    "test": "vitest",
230    "lint": "eslint src --ext .ts"
231  },
232  "dependencies": {
233    "express": "^4.18.2",
234    "dotenv": "^16.4.0",
235    "zod": "^3.22.0"
236  },
237  "devDependencies": {
238    "@types/express": "^4.17.21",
239    "@types/node": "^20.11.0",
240    "typescript": "^5.3.0",
241    "tsx": "^4.7.0",
242    "vitest": "^1.2.0",
243    "eslint": "^8.56.0",
244    "@typescript-eslint/parser": "^6.19.0",
245    "@typescript-eslint/eslint-plugin": "^6.19.0"
246  }
247}
248```
249 
250**src/app.ts**:
251```typescript
252import express, { Express } from 'express'
253import { healthRouter } from './routes/health.js'
254import { userRouter } from './routes/users.js'
255import { errorHandler } from './middleware/errorHandler.js'
256 
257export function createApp(): Express {
258  const app = express()
259 
260  app.use(express.json())
261  app.use('/health', healthRouter)
262  app.use('/api/users', userRouter)
263  app.use(errorHandler)
264 
265  return app
266}
267```
268 
269### 6. Generate TypeScript Library Structure
270 
271```
272library-name/
273├── package.json
274├── tsconfig.json
275├── tsconfig.build.json
276├── src/
277│   ├── index.ts
278│   └── core.ts
279├── tests/
280│   └── core.test.ts
281└── dist/
282```
283 
284**package.json for Library**:
285```json
286{
287  "name": "@scope/library-name",
288  "version": "0.1.0",
289  "type": "module",
290  "main": "./dist/index.js",
291  "types": "./dist/index.d.ts",
292  "exports": {
293    ".": {
294      "import": "./dist/index.js",
295      "types": "./dist/index.d.ts"
296    }
297  },
298  "files": ["dist"],
299  "scripts": {
300    "build": "tsc -p tsconfig.build.json",
301    "test": "vitest",
302    "prepublishOnly": "pnpm build"
303  },
304  "devDependencies": {
305    "typescript": "^5.3.0",
306    "vitest": "^1.2.0"
307  }
308}
309```
310 
311### 7. Configure Development Tools
312 
313**.env.example**:
314```env
315NODE_ENV=development
316PORT=3000
317DATABASE_URL=postgresql://user:pass@localhost:5432/db
318JWT_SECRET=your-secret-key
319```
320 
321**vitest.config.ts**:
322```typescript
323import { defineConfig } from 'vitest/config'
324 
325export default defineConfig({
326  test: {
327    globals: true,
328    environment: 'node',
329    coverage: {
330      provider: 'v8',
331      reporter: ['text', 'json', 'html'],
332    },
333  },
334})
335```
336 
337**.eslintrc.json**:
338```json
339{
340  "parser": "@typescript-eslint/parser",
341  "extends": [
342    "eslint:recommended",
343    "plugin:@typescript-eslint/recommended"
344  ],
345  "rules": {
346    "@typescript-eslint/no-explicit-any": "warn",
347    "@typescript-eslint/no-unused-vars": "error"
348  }
349}
350```
351 
352## Output Format
353 
3541. **Project Structure**: Complete directory tree with all necessary files
3552. **Configuration**: package.json, tsconfig.json, build tooling
3563. **Entry Point**: Main application file with type-safe setup
3574. **Tests**: Test structure with Vitest configuration
3585. **Documentation**: README with setup and usage instructions
3596. **Development Tools**: .env.example, .gitignore, linting config
360 
361Focus on creating production-ready TypeScript projects with modern tooling, strict type safety, and comprehensive testing setup.
362