mcpField
D
dx-optimizer

dx-optimizer

github.com/htlin222開発7837 回インストール3 週間前に更新
リポジトリ

dx-optimizer について

dx-optimizer は、プロジェクトのセットアップやツール、ワークフローの改善例を示す開発体験向けスキルです。スクリプト、Git hooks、VS Code、Makefile、環境変数チェックを扱います。

主な機能

  1. 01プロジェクトスクリプトの提案
  2. 02Git hooks の設定例
  3. 03VS Code の設定と拡張機能
  4. 04Makefile ワークフローの例
  5. 05環境変数チェック

活用シーン

  1. 01新規プロジェクトのセットアップ簡略化
  2. 02開発者のオンボーディング改善
  3. 03品質チェックと整形の自動化
  4. 04ビルドとツール構成の見直し

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/dx-optimizerを入力して読み込まれたか確認します。

詳細

開発者エクスペリエンス

生産性を高めるため、ツールとワークフローを最適化します。

使用する場面

  • 新しいプロジェクトのセットアップ
  • オンボーディングの改善
  • ビルド時間の最適化
  • ワークフローの自動化
  • ツールの設定

すぐにできる改善

Package.json のスクリプト
{
  "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 フック（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 の設定
// .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."

環境のセットアップ

# .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
}

成功指標

  • クローンから実行まで：5 分未満
  • ビルド時間：30 秒未満
  • テストスイート：60 秒未満
  • ホットリロード：500ms 未満

チェックリスト

  • 1 つのコマンドでセットアップ（make setup）
  • 保存時の自動フォーマット
  • 品質を保つためのコミット前フック
  • わかりやすいエラーメッセージ
  • 最新の README

例

入力：「開発ワークフローを高速化したい」 **アクション：**並列タスク、キャッシュ、インクリメンタルビルドを追加

入力：「新しい開発者がプロジェクトをセットアップできない」 **アクション：**セットアップを簡素化し、ドキュメントを改善して、セットアップスクリプトを作成

コメント

Markdown 対応