skills/laurigates/claude-plugins/nodejs-development

nodejs-development

Installation
SKILL.md

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

Agentic Optimizations

Context Command
Create Vue+TS project bun create vite my-app --template vue-ts
Dev server bun dev
Production build bun build
Lint and format bun run check
Run tests bun run test
Node.js debug node --inspect script.js
Bun debug bun --inspect script.ts
CPU profile node --prof script.js

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.

Weekly Installs
69
GitHub Stars
29
First Seen
1 day ago