Back to Details

developer-experience

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Developer Experience

开发者体验

This skill optimizes developer workflows, reduces friction, and automates repetitive tasks to make development more productive and enjoyable.
本技能可优化开发者工作流、减少开发阻碍，并自动化重复任务，让开发过程更高效、更愉悦。

When to Use This Skill

适用场景

  • When setting up new projects or onboarding developers
  • When identifying and eliminating repetitive tasks
  • When improving build and test execution times
  • When optimizing development workflows
  • When creating helpful aliases and shortcuts
  • When setting up IDE configurations and tooling
  • 初始化新项目或开发者入职时
  • 识别并消除重复任务时
  • 提升构建与测试执行速度时
  • 优化开发工作流时
  • 创建实用别名与快捷方式时
  • 配置IDE与开发工具时

What This Skill Does

技能功能

  1. Environment Setup: Simplifies onboarding to under 5 minutes
  2. Workflow Optimization: Identifies and automates repetitive tasks
  3. Tooling Enhancement: Configures IDE settings, git hooks, and CLI commands
  4. Documentation: Creates setup guides and troubleshooting documentation
  5. Automation: Creates scripts and commands for common tasks
  6. Friction Reduction: Eliminates manual steps and improves feedback loops
  1. 环境搭建：将入职流程简化至5分钟以内
  2. 工作流优化：识别并自动化重复任务
  3. 工具增强：配置IDE设置、Git钩子与CLI命令
  4. 文档编写：创建搭建指南与故障排查文档
  5. 自动化实现：为常见任务编写脚本与命令
  6. 减少阻碍：消除手动步骤，改进反馈循环

How to Use

使用方法

Optimize Workflow

优化工作流

Analyze the development workflow and suggest improvements
Set up this project for optimal developer experience
Analyze the development workflow and suggest improvements
Set up this project for optimal developer experience

Specific Improvements

针对性优化

Create helpful npm scripts for common tasks
Set up git hooks for code quality checks
Create helpful npm scripts for common tasks
Set up git hooks for code quality checks

Optimization Areas

优化方向

Environment Setup

环境搭建

Goals:
  • Onboarding in under 5 minutes
  • Intelligent defaults
  • Automated dependency installation
  • Helpful error messages
  • Clear setup instructions
Deliverables:
  • README with clear setup steps
  • Setup scripts (setup.sh, setup.ps1)
  • Environment validation
  • Dependency checking
  • Configuration templates
目标：
  • 入职流程控制在5分钟以内
  • 智能默认配置
  • 自动化依赖安装
  • 实用的错误提示
  • 清晰的搭建说明
交付物：
  • 包含清晰搭建步骤的README
  • 搭建脚本（setup.sh、setup.ps1）
  • 环境验证机制
  • 依赖检查工具
  • 配置模板

Development Workflows

开发工作流

Identify Repetitive Tasks:
  • Code generation
  • Database migrations
  • Test running
  • Build processes
  • Deployment steps
Create Automation:
  • npm/yarn scripts
  • Makefile commands
  • Shell aliases
  • Custom CLI tools
  • Task runners
识别重复任务：
  • 代码生成
  • 数据库迁移
  • 测试执行
  • 构建流程
  • 部署步骤
实现自动化：
  • npm/yarn脚本
  • Makefile命令
  • Shell别名
  • 自定义CLI工具
  • 任务运行器

Tooling Enhancement

工具增强

IDE Configuration:
  • EditorConfig
  • ESLint/Prettier configs
  • VS Code settings
  • Debug configurations
  • Snippet libraries
Git Hooks:
  • Pre-commit hooks (linting, formatting)
  • Commit message validation
  • Pre-push hooks (tests)
  • Post-merge hooks (dependency updates)
CLI Commands:
  • Project-specific commands
  • Development shortcuts
  • Database utilities
  • Testing helpers
IDE配置：
  • EditorConfig
  • ESLint/Prettier配置
  • VS Code设置
  • 调试配置
  • 代码片段库
Git钩子：
  • 提交前钩子（代码检查、格式化）
  • 提交信息验证
  • 推送前钩子（测试执行）
  • 合并后钩子（依赖更新）
CLI命令：
  • 项目专属命令
  • 开发快捷方式
  • 数据库工具
  • 测试辅助工具

Examples

示例

Example 1: Project Setup Optimization

示例1：项目搭建优化

Input: Optimize the setup process for this project
Output:
markdown
undefined
输入：优化本项目的搭建流程
输出：
markdown
undefined

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
1. 搭建脚本
bash
#!/bin/bash

setup.sh

setup.sh

echo "Setting up development environment..."
echo "Setting up development environment..."

Check Node.js version

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
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

Install dependencies

npm install
npm install

Setup environment

Setup environment

cp .env.example .env
cp .env.example .env

Run database migrations

Run database migrations

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

**2. Enhanced package.json Scripts**

```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 Hooks
bash
undefined
npm run db:migrate
echo "Setup complete! Run 'npm run dev' to start."

**2. 增强package.json脚本**

```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钩子
bash
undefined

.husky/pre-commit

.husky/pre-commit

#!/bin/sh npm run lint npm run test
undefined
#!/bin/sh npm run lint npm run test
undefined

Example 2: Workflow Automation

示例2：工作流自动化

Input: Create shortcuts for common development tasks
Output:
markdown
undefined
输入：为常见开发任务创建快捷方式
输出：
markdown
undefined

Development Shortcuts

开发快捷方式

Makefile Commands

Makefile命令

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
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 Aliases

Shell别名

bash
undefined
bash
undefined

Add to ~/.zshrc or ~/.bashrc

Add to ~/.zshrc or ~/.bashrc

alias dev="npm run dev" alias test="npm test" alias lint="npm run lint" alias format="npm run format"
undefined
alias dev="npm run dev" alias test="npm test" alias lint="npm run lint" alias format="npm run format"
undefined

VS Code Tasks

VS Code任务

json
// .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
    }
  ]
}
undefined
json
// .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
    }
  ]
}
undefined

Best Practices

最佳实践

DX Principles

开发者体验（DX）原则

  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
  1. 正常工作时隐形：优秀的DX在正常运行时是无缝的
  2. 故障时直观：出现问题时提供清晰的错误提示
  3. 快速反馈：缩短构建/测试周期
  4. 清晰文档：切实可用的搭建指南
  5. 实用默认配置：开箱即用的合理配置

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
  • references/ONBOARDING_GUIDE.template.md
     - 开发者入职指南模板，包含环境搭建、每日任务与故障排查内容

Related Use Cases

相关用例

  • Project setup optimization
  • Workflow automation
  • Tooling configuration
  • Developer onboarding
  • Reducing development friction
  • Improving build/test times
  • 项目搭建优化
  • 工作流自动化
  • 工具配置
  • 开发者入职
  • 减少开发阻碍
  • 提升构建/测试速度