mcpField
D
dx-optimizer

dx-optimizer

github.com/htlin222Development7837 installsUpdated 3w ago
Repository

About dx-optimizer

dx-optimizer is a developer-experience skill with guidance and examples for improving project setup, tooling, and workflows. It covers configuration for scripts, Git hooks, VS Code, Makefiles, and environment checks.

Key features

  1. 01Project script recommendations
  2. 02Git hooks configuration examples
  3. 03VS Code settings and extensions
  4. 04Makefile workflow examples
  5. 05Environment variable checks

Use cases

  1. 01Streamline new project setup
  2. 02Improve developer onboarding
  3. 03Automate quality checks and formatting
  4. 04Review build and tooling workflows

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/htlin222/dotfiles --skill dx-optimizer

After installing, type/dx-optimizerin Claude Code to confirm it loaded.

Details

From the project README

Developer Experience

Optimize tooling and workflows for productivity.

When to use

  • New project setup
  • Onboarding improvements
  • Build time optimization
  • Workflow automation
  • Tooling configuration

Quick wins

Package.json scripts
{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --fix",
    "format": "prettier --write .",
    "typecheck": "tsc --noEmit",
    "test": "vitest",
    "test:watch": "vitest --watch",
    "test:coverage": "vitest --coverage",
    "prepare": "husky",
    "validate": "npm run typecheck && npm run lint && npm run test"
  }
}
Git hooks (husky + lint-staged)
// package.json
{
  "lint-staged": {
    "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,yml}": ["prettier --write"]
  }
}

# .husky/pre-commit
npm run lint-staged

# .husky/commit-msg
npx commitlint --edit $1
VS Code settings
// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next"
  ]
}

Makefile

.PHONY: help dev build test clean

help: ## Show this help
	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-15s\033[0m %s\n", $$1, $$2}'

dev: ## Start development server
	npm run dev

build: ## Build for production
	npm run build

test: ## Run tests
	npm run test

lint: ## Run linter
	npm run lint

clean: ## Clean build artifacts
	rm -rf .next node_modules/.cache

setup: ## Initial project setup
	npm install
	cp .env.example .env.local
	@echo "Setup complete! Run 'make dev' to start."

Environment setup

# .env.example (template)
DATABASE_URL=postgresql://localhost:5432/myapp
REDIS_URL=redis://localhost:6379
API_KEY=your-api-key-here

# Check for required env vars
check_env() {
  local missing=()
  for var in DATABASE_URL API_KEY; do
    if [[ -z "${!var}" ]]; then
      missing+=("$var")
    fi
  done
  if [[ ${#missing[@]} -gt 0 ]]; then
    echo "Missing env vars: ${missing[*]}"
    exit 1
  fi
}

Success metrics

  • Clone to running: <5 minutes
  • Build time: <30 seconds
  • Test suite: <60 seconds
  • Hot reload: <500ms

Checklist

  • One-command setup (make setup)
  • Automatic formatting on save
  • Pre-commit hooks for quality
  • Clear error messages
  • Up-to-date README

Examples

Input: "Speed up our dev workflow" Action: Add parallel tasks, caching, incremental builds

Input: "New developer can't set up project" Action: Simplify setup, add better docs, create setup script

Comments

Markdown supported