Agent skill

typescript

Use when configuring dev containers for TypeScript or Node.js projects. Covers the Node feature, package managers, ESLint/Prettier extensions, and frontend dev server setup. USE FOR: TypeScript/Node.js dev container setup, Node feature, npm/pnpm/yarn configuration, ESLint/Prettier extensions, frontend dev servers DO NOT USE FOR: Python dev containers (use python), .NET dev containers (use dotnet), general devcontainer.json (use devcontainer)

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/typescript-tyler-r-kendrick-agent-skills

Metadata

Additional technical details for this skill

author
Tyler-R-Kendrick
displayName
Dev Container — TypeScript

SKILL.md

Dev Container — TypeScript

Overview

Configure a dev container for TypeScript and Node.js development using the official Node feature or base image. Supports version selection, package manager configuration (npm, pnpm, yarn), and frontend tooling.

Node Feature

jsonc
{
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "22"
    }
  }
}

Feature Options

Option Default Description
version lts Node.js version (22, 20, lts, latest, none)
nodeGypDependencies true Install native build dependencies for node-gyp
pnpmVersion none Install pnpm (latest, 9, specific version, none)
nvmVersion latest nvm version

Full Example

jsonc
{
  "name": "TypeScript Development",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
  "forwardPorts": [3000, 5173],
  "portsAttributes": {
    "3000": { "label": "API", "onAutoForward": "notify" },
    "5173": { "label": "Vite Dev Server", "onAutoForward": "openBrowser" }
  },
  "postCreateCommand": "npm ci",
  "postStartCommand": "npm run dev",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss"
      ],
      "settings": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit"
        },
        "typescript.tsdk": "node_modules/typescript/lib"
      }
    }
  }
}

Using the Base Image vs Feature

Approach When to Use
"image": "mcr.microsoft.com/devcontainers/javascript-node:22" Node/TS-only projects
"image": "mcr.microsoft.com/devcontainers/typescript-node:22" TypeScript-specific image
Base image + ghcr.io/devcontainers/features/node:1 Multi-language projects

Package Managers

pnpm

jsonc
{
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "22",
      "pnpmVersion": "latest"
    }
  },
  "postCreateCommand": "pnpm install --frozen-lockfile"
}

Yarn

jsonc
{
  "postCreateCommand": "corepack enable && yarn install --immutable"
}

Monorepo Setup (Turborepo / Nx)

jsonc
{
  "name": "Monorepo",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "pnpmVersion": "latest"
    }
  },
  "postCreateCommand": "pnpm install --frozen-lockfile",
  "postStartCommand": "pnpm dev",
  "forwardPorts": [3000, 3001, 5173]
}

Frontend Framework Ports

Framework Default Port
Vite 5173
Next.js 3000
Angular 4200
Create React App 3000
Remix 5173
Astro 4321

Best Practices

  • Use npm ci or pnpm install --frozen-lockfile in postCreateCommand for deterministic installs.
  • Use postStartCommand for dev servers so they restart on Codespace resume.
  • Forward the dev server port and set "onAutoForward": "openBrowser" for quick feedback.
  • Set typescript.tsdk to the workspace TypeScript for consistent version behavior.
  • Add both ESLint and Prettier extensions and configure formatOnSave for consistent code style.
  • Pin Node.js to a major version (22, 20) rather than lts for reproducibility.
  • Use corepack enable for Yarn v2+ to use the project-local version.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results