developer-experience

# 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

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

## How to Use

### Optimize Workflow

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

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

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

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

## Examples

### Example 1: Project Setup Optimization

**Input**: Optimize the setup process for this project

**Output**:

```markdown
## 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. 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
# .husky/pre-commit
#!/bin/sh
npm run lint
npm run test
```

### Example 2: Workflow Automation

**Input**: Create shortcuts for common development tasks

**Output**:

```markdown
## 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 Aliases

```bash
# 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 Tasks

```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
    }
  ]
}
```

```

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