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