developer-experience

开发者体验

此技能可优化开发者工作流、减少摩擦，并自动执行重复任务，让开发更高效、更愉快。

何时使用此技能

• 设置新项目或帮助开发者入门时
• 识别并消除重复任务时
• 改善构建和测试的执行时间时
• 优化开发工作流时
• 创建实用的别名和快捷方式时
• 设置 IDE 配置和工具时

此技能的功能

1. 环境设置：将入门时间缩短至 5 分钟以内
2. 工作流优化：识别并自动执行重复任务
3. 工具增强：配置 IDE 设置、git 钩子和 CLI 命令
4. 文档：创建设置指南和故障排除文档
5. 自动化：为常见任务创建脚本和命令
6. 减少摩擦：消除手动步骤并改善反馈循环

使用方法

优化工作流

Analyze the development workflow and suggest improvements

Set up this project for optimal developer experience

具体改进

Create helpful npm scripts for common tasks

Set up git hooks for code quality checks

优化领域

环境设置

目标：

• 在 5 分钟内完成入门
• 智能默认值
• 自动安装依赖项
• 清晰易懂的错误消息
• 明确的设置说明

交付内容：

• 包含清晰设置步骤的 README
• 设置脚本（setup.sh、setup.ps1）
• 环境验证
• 依赖项检查
• 配置模板

开发工作流

识别重复任务：

• 代码生成
• 数据库迁移
• 运行测试
• 构建流程
• 部署步骤

创建自动化：

• npm/yarn 脚本
• Makefile 命令
• Shell 别名
• 自定义 CLI 工具
• 任务运行器

工具增强

IDE 配置：

• EditorConfig
• ESLint/Prettier 配置
• VS Code 设置
• 调试配置
• 代码片段库

Git 钩子：

• 提交前钩子（代码检查、格式化）
• 提交消息验证
• 推送前钩子（测试）
• 合并后钩子（依赖项更新）

CLI 命令：

• 项目专用命令
• 开发快捷方式
• 数据库实用工具
• 测试辅助工具

示例

示例 1：优化项目设置

输入：优化此项目的设置流程

输出：

## Developer Experience Improvements

### Current Setup Issues
- Manual dependency installation
- No environment validation
- Unclear setup instructions
- Missing development tools

### Improvements

**1. Setup Script**
```bash
#!/bin/bash
# setup.sh
echo "Setting up development environment..."

# Check Node.js version
node_version=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
if [ "$node_version" -lt 18 ]; then
  echo "Error: Node.js 18+ required"
  exit 1
fi

# Install dependencies
npm install

# Setup environment
cp .env.example .env

# Run database migrations
npm run db:migrate

echo "Setup complete! Run 'npm run dev' to start."

2. 增强 package.json 脚本

{
  "scripts": {
    "dev": "nodemon src/index.js",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "db:migrate": "knex migrate:latest",
    "db:seed": "knex seed:run",
    "setup": "bash setup.sh"
  }
}

3. Git 钩子

# .husky/pre-commit
#!/bin/sh
npm run lint
npm run test

示例 2：工作流自动化

输入：为常见开发任务创建快捷方式

输出：

## Development Shortcuts

### Makefile Commands
```makefile
.PHONY: dev test lint format db-setup

dev:
 npm run dev

test:
 npm test

lint:
 npm run lint

format:
 npm run format

db-setup:
 npm run db:migrate
 npm run db:seed

clean:
 rm -rf node_modules dist .next

install:
 npm install

Shell 别名

# Add to ~/.zshrc or ~/.bashrc
alias dev="npm run dev"
alias test="npm test"
alias lint="npm run lint"
alias format="npm run format"

VS Code 任务

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Tests",
      "type": "shell",
      "command": "npm test",
      "group": "test"
    },
    {
      "label": "Start Dev Server",
      "type": "shell",
      "command": "npm run dev",
      "group": "build",
      "isBackground": true
    }
  ]
}

## Best Practices

### DX Principles

1. **Invisible When Working**: Great DX is seamless when it works
2. **Obvious When Broken**: Clear error messages when something fails
3. **Fast Feedback**: Quick build/test cycles
4. **Clear Documentation**: Setup guides that actually work
5. **Helpful Defaults**: Sensible configurations out of the box

### Success Metrics

- **Time to First Success**: How long until a new developer runs the app?
- **Manual Steps**: Count of manual steps eliminated
- **Build/Test Time**: Execution time for common tasks
- **Developer Satisfaction**: Feedback on workflow improvements

### Common Improvements

**Fast Feedback:**
- Hot reload for development
- Fast test execution
- Quick build times
- Instant linting feedback

**Clear Errors:**
- Helpful error messages
- Stack traces with context
- Setup validation
- Dependency checking

**Automation:**
- One-command setup
- Automated testing
- Code generation
- Deployment automation

## Reference Files

- **`references/ONBOARDING_GUIDE.template.md`** - Developer onboarding guide template with environment setup, day-by-day tasks, and troubleshooting

## Related Use Cases

- Project setup optimization
- Workflow automation
- Tooling configuration
- Developer onboarding
- Reducing development friction
- Improving build/test times