Node.js Development
Expert knowledge for modern JavaScript/TypeScript development with focus on high-performance tooling and frameworks.
When to Use This Skill
| Scenario |
Use this skill |
Alternative |
| Setting up a Vue 3/Vite/TypeScript project |
Yes |
N/A |
| Configuring Vite build and dev server |
Yes |
N/A |
| Working with Vue 3 Composition API and Pinia |
Yes |
N/A |
| General Node.js/Bun runtime guidance |
Yes |
bun-development for Bun-specific features |
| Running Bun scripts, tests, or builds |
No - use bun-development |
bun-test, bun-build for quick invocations |
| Managing npm/Bun dependencies |
No - use bun-package-manager |
bun-add for quick additions |
| Debugging TypeScript/JS applications |
No - use typescript-debugging |
N/A |
| Error monitoring with Sentry |
No - use typescript-sentry |
N/A |
Core Expertise
Modern JavaScript Tooling
- Bun: Primary JavaScript runtime and package manager (25x faster than npm)
- Vite: Lightning-fast build tool with HMR and optimized production builds
- TypeScript: Type-safe development with modern configurations
- ESM: Modern module syntax and tree-shaking optimization
Key Capabilities
Bun Runtime & Package Management
- Use
bun install for dependency installation and bun.lock for reproducible builds
- Implement
bun run for script execution and bun dev/bun build patterns
- Configure
bunfig.toml for project-specific Bun settings
- Leverage Bun's native TypeScript support and built-in bundler
Vue 3 & Modern Frontend
- Vue 3: Composition API, script setup, and reactive patterns
- Pinia: State management with TypeScript support
- Vuetify: Material Design components
- Vite: Fast development server with instant HMR
TypeScript Excellence
- Configure TypeScript with strict mode and modern target settings
- Implement comprehensive type definitions for Vue components and stores
- Use TypeScript with Vite for optimal development experience
- Apply advanced TypeScript patterns for robust applications
Testing & Quality Assurance
- Vitest: Fast unit testing framework with native TypeScript support
- Playwright: End-to-end testing with browser automation
- Biome: Code quality and formatting (unified, fast)
Debugging
- Chrome DevTools: Advanced debugging for browser and Node.js
- Node.js Inspector: Built-in debugging with breakpoints and profiling
- Heap Snapshots: Memory leak detection and heap analysis
- Performance Profiling: CPU profiling, flame graphs, bottleneck identification
- Vue DevTools: Component tree, state inspection, performance monitoring
Essential Commands
# Bun-first workflow
bun create vite my-app --template vue-ts # Create Vue 3 + TypeScript project
cd my-app && bun install # Install dependencies
# Development
bun dev # Start dev server
bun build # Build for production
bun run check # Run Biome lint + format
bun run test # Run tests
# Debugging
node --inspect script.js # Node.js debugging
bun --inspect script.ts # Bun debugging
node --prof script.js # CPU profiling
Best Practices
Project Structure
- Organize Vue 3 projects with clear component, store, and router separation
- Configure
vite.config.ts with optimizations
- Implement proper error boundaries and loading states
- Use Vue 3's Teleport and Suspense for advanced UI patterns
Performance & Security
- Implement proper CSP headers and security configurations
- Optimize images and assets with Vite's asset handling
- Use lazy loading and code splitting
- Apply proper form validation and sanitization
Type Safety
// Modern type annotations (TypeScript 5.0+)
function processData(
items: string[],
config: Record<string, number>,
optional?: string | null
): [boolean, string] {
return [true, "success"];
}
For detailed debugging patterns, Vue 3 component structure, Vite configuration, production debugging, and framework integration, see REFERENCE.md.
1---2name: nodejs-development3description: Node.js development with Bun, Vite, Vue 3, Pinia, TypeScript. Use when the user mentions Node.js, Bun, Vite, Vue, Pinia, npm, pnpm, or modern JS/TS frameworks.4---5
6# Node.js Development
7
8Expert knowledge for modern JavaScript/TypeScript development with focus on high-performance tooling and frameworks.
9
10## When to Use This Skill
11
12| Scenario | Use this skill | Alternative |
13|----------|---------------|-------------|
14| Setting up a Vue 3/Vite/TypeScript project | Yes | N/A |
15| Configuring Vite build and dev server | Yes | N/A |
16| Working with Vue 3 Composition API and Pinia | Yes | N/A |
17| General Node.js/Bun runtime guidance | Yes | `bun-development` for Bun-specific features |
18| Running Bun scripts, tests, or builds | No - use `bun-development` | `bun-test`, `bun-build` for quick invocations |
19| Managing npm/Bun dependencies | No - use `bun-package-manager` | `bun-add` for quick additions |
20| Debugging TypeScript/JS applications | No - use `typescript-debugging` | N/A |
21| Error monitoring with Sentry | No - use `typescript-sentry` | N/A |
22
23## Core Expertise
24
25**Modern JavaScript Tooling**
26- **Bun**: Primary JavaScript runtime and package manager (25x faster than npm)
27- **Vite**: Lightning-fast build tool with HMR and optimized production builds
28- **TypeScript**: Type-safe development with modern configurations
29- **ESM**: Modern module syntax and tree-shaking optimization
30
31## Key Capabilities
32
33**Bun Runtime & Package Management**
34- Use `bun install` for dependency installation and `bun.lock` for reproducible builds
35- Implement `bun run` for script execution and `bun dev`/`bun build` patterns
36- Configure `bunfig.toml` for project-specific Bun settings
37- Leverage Bun's native TypeScript support and built-in bundler
38
39**Vue 3 & Modern Frontend**
40- **Vue 3**: Composition API, script setup, and reactive patterns
41- **Pinia**: State management with TypeScript support
42- **Vuetify**: Material Design components
43- **Vite**: Fast development server with instant HMR
44
45**TypeScript Excellence**
46- Configure TypeScript with strict mode and modern target settings
47- Implement comprehensive type definitions for Vue components and stores
48- Use TypeScript with Vite for optimal development experience
49- Apply advanced TypeScript patterns for robust applications
50
51**Testing & Quality Assurance**
52- **Vitest**: Fast unit testing framework with native TypeScript support
53- **Playwright**: End-to-end testing with browser automation
54- **Biome**: Code quality and formatting (unified, fast)
55
56**Debugging**
57- **Chrome DevTools**: Advanced debugging for browser and Node.js
58- **Node.js Inspector**: Built-in debugging with breakpoints and profiling
59- **Heap Snapshots**: Memory leak detection and heap analysis
60- **Performance Profiling**: CPU profiling, flame graphs, bottleneck identification
61- **Vue DevTools**: Component tree, state inspection, performance monitoring
62
63## Essential Commands
64
65```bash
66# Bun-first workflow
67bun create vite my-app --template vue-ts # Create Vue 3 + TypeScript project
68cd my-app && bun install # Install dependencies
69
70# Development
71bun dev # Start dev server
72bun build # Build for production
73bun run check # Run Biome lint + format
74bun run test # Run tests
75
76# Debugging
77node --inspect script.js # Node.js debugging
78bun --inspect script.ts # Bun debugging
79node --prof script.js # CPU profiling
80```
81
82## Best Practices
83
84**Project Structure**
85- Organize Vue 3 projects with clear component, store, and router separation
86- Configure `vite.config.ts` with optimizations
87- Implement proper error boundaries and loading states
88- Use Vue 3's Teleport and Suspense for advanced UI patterns
89
90**Performance & Security**
91- Implement proper CSP headers and security configurations
92- Optimize images and assets with Vite's asset handling
93- Use lazy loading and code splitting
94- Apply proper form validation and sanitization
95
96**Type Safety**
97```typescript
98// Modern type annotations (TypeScript 5.0+)
99function processData(
100 items: string[],
101 config: Record<string, number>,
102 optional?: string | null
103): [boolean, string] {
104 return [true, "success"];
105}
106```
107
108For detailed debugging patterns, Vue 3 component structure, Vite configuration, production debugging, and framework integration, see REFERENCE.md.