Developer Productivity Skill

A Claude Code skill for accelerating development workflows — covering project scaffolding, code generation, debugging strategies, testing patterns, and developer tooling configuration for modern full-stack development.

When to Use This Skill

Choose this skill when:

• Setting up a new development project from scratch
• Configuring development tools (linters, formatters, debuggers)
• Establishing development workflows and conventions
• Debugging complex issues across the full stack
• Generating boilerplate code from templates and patterns
• Optimizing development environment for productivity

Consider alternatives when:

• You need deployment procedures (use a deployment skill)
• You need database design specifically (use a database skill)
• You need framework-specific guidance (use a React/Next.js/Express skill)

Quick Start

Copy
# Add to your Claude Code project
claude mcp add developer-toolkit

# Set up a full development environment
claude "set up a TypeScript Node.js project with ESLint, Prettier, and Jest"

# Generate project scaffolding
claude "scaffold a REST API with authentication, CRUD operations, and tests"

Copy
// .vscode/settings.json - Optimized developer settings
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "editor.suggestSelection": "first",
  "files.exclude": { "node_modules": true, ".next": true, "dist": true }
}

Core Concepts

Development Workflow

Phase	Tools	Output
Scaffold	Project generator, templates	Project structure with config
Develop	Hot reload, TypeScript, linting	Working code with type safety
Debug	Source maps, debugger, logging	Root cause identification
Test	Jest, Vitest, Playwright	Verified correctness
Review	ESLint, Prettier, git hooks	Clean, consistent code
Build	Bundler, compiler, optimizer	Production artifacts

Debugging Strategy

Copy
// 1. Reproduce: Create a minimal failing case
const result = processOrder({ items: [], userId: null });
// Expected: Error, Got: undefined

// 2. Isolate: Binary search through the call stack
console.log('Before validation:', input);
const validated = validateOrder(input);  // <-- Problem is here
console.log('After validation:', validated);

// 3. Fix: Address root cause, not symptoms
function validateOrder(order: Order) {
  if (!order.userId) {
    throw new ValidationError('userId is required');  // Guard clause
  }
  if (order.items.length === 0) {
    throw new ValidationError('Order must have at least one item');
  }
  return order;
}

// 4. Verify: Add a test to prevent regression
test('rejects order without userId', () => {
  expect(() => validateOrder({ items: [], userId: null }))
    .toThrow('userId is required');
});

Project Structure Pattern

project/
├── src/
│   ├── config/          # Environment and app config
│   ├── controllers/     # Request handlers
│   ├── services/        # Business logic
│   ├── models/          # Data models and types
│   ├── middleware/       # Express/Koa middleware
│   ├── utils/           # Shared utility functions
│   └── index.ts         # App entry point
├── tests/
│   ├── unit/            # Unit tests mirror src/ structure
│   ├── integration/     # API and database tests
│   └── fixtures/        # Test data and mocks
├── scripts/             # Build, deploy, seed scripts
├── .eslintrc.js         # Linting configuration
├── .prettierrc          # Formatting configuration
├── tsconfig.json        # TypeScript configuration
└── jest.config.ts       # Test configuration

Configuration

Parameter	Type	Default	Description
language	string	"typescript"	Primary language: typescript, javascript, python
runtime	string	"node"	Runtime environment: node, deno, bun, browser
framework	string	"express"	Web framework: express, fastify, hono, koa
test_framework	string	"vitest"	Testing: vitest, jest, mocha
linter	string	"eslint"	Linting: eslint, biome
formatter	string	"prettier"	Formatting: prettier, biome
package_manager	string	"npm"	Package manager: npm, pnpm, yarn, bun

Best Practices

1. Configure linting and formatting before writing code — set up ESLint and Prettier (or Biome) on day one with a pre-commit hook; fixing formatting after 10,000 lines of code creates massive diffs.

2. Use TypeScript strict mode from the start — enable strict: true in tsconfig.json; adding strict mode to an existing project requires fixing hundreds of type errors, but starting strict costs nothing.

3. Write tests alongside implementation, not after — tests written after the code tend to test the implementation rather than the behavior; concurrent development catches more bugs.

4. Debug systematically, not randomly — follow reproduce → isolate → hypothesize → verify → fix; adding random console.log statements wastes time compared to structured debugging.

5. Automate repetitive tasks with scripts — if you run the same commands more than three times, put them in a script in the scripts/ directory or package.json scripts section.

Common Issues

TypeScript compilation is slow — Use tsc --incremental for faster rebuilds and ts-node --transpileOnly for development. Enable skipLibCheck: true in tsconfig to skip type-checking node_modules.

ESLint and Prettier conflict on formatting rules — Install eslint-config-prettier to disable ESLint's formatting rules and let Prettier handle formatting exclusively. This eliminates all conflicts between the two tools.

Hot reload doesn't detect file changes — This usually happens on Linux or inside Docker containers. Increase the file watcher limit (fs.inotify.max_user_watches) or switch to polling mode in your dev server configuration.