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:

## Developer Experience Improvements

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

### Improvements

**1. Setup Script**

#!/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**

{ "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**

.husky/pre-commit

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

### Example 2: Workflow Automation

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

**Output**:

Development Shortcuts

Makefile Commands

.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

# 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

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

Developer Onboarding Guide

Project: {{PROJECT_NAME}} Last Updated: {{DATE}} Version: {{VERSION}}

---

Welcome

{{BRIEF_PROJECT_DESCRIPTION}}

Quick Links

---

Day 1: Environment Setup

Prerequisites

• [ ] {{PREREQUISITE_1}} (version {{VERSION}})
• [ ] {{PREREQUISITE_2}}
• [ ] Access to {{SYSTEM}}

Clone & Install

git clone {{REPO_URL}}
cd {{PROJECT_NAME}}
{{INSTALL_COMMAND}}

Environment Variables

Copy the example environment file:

cp .env.example .env

Required variables:

Verify Setup

{{VERIFY_COMMAND}}

Expected output:

{{EXPECTED_OUTPUT}}

---

Day 2: Codebase Orientation

Project Structure

{{PROJECT_NAME}}/
├── {{DIR_1}}/        # {{DESCRIPTION}}
├── {{DIR_2}}/        # {{DESCRIPTION}}
├── {{DIR_3}}/        # {{DESCRIPTION}}
└── {{CONFIG_FILE}}   # {{DESCRIPTION}}

Key Files

Architecture Overview

{{ARCHITECTURE_DESCRIPTION}}

{{ARCHITECTURE_DIAGRAM}}

---

Day 3: Development Workflow

Running Locally

{{DEV_COMMAND}}

Access at: http://localhost:{{PORT}}

Running Tests

{{TEST_COMMAND}}

Code Style

We use {{LINTER/FORMATTER}}:

{{LINT_COMMAND}}
{{FORMAT_COMMAND}}

Git Workflow

1. Create branch: {{BRANCH_NAMING_CONVENTION}} 2. Make changes 3. Run tests: {{TEST_COMMAND}} 4. Commit: Follow Conventional Commits 5. Push and create PR

---

Week 1: First Tasks

Starter Tasks

Good first issues to tackle:

1. {{STARTER_TASK_1}} 2. {{STARTER_TASK_2}} 3. {{STARTER_TASK_3}}

Code Review Process

1. Create PR with description 2. Request review from {{REVIEWER}} 3. Address feedback 4. Merge when approved

---

Key Concepts

{{CONCEPT_1}}

{{EXPLANATION}}

{{CONCEPT_2}}

{{EXPLANATION}}

{{CONCEPT_3}}

{{EXPLANATION}}

---

Common Tasks

Adding a New {{COMPONENT}}

1. {{STEP_1}} 2. {{STEP_2}} 3. {{STEP_3}}

Debugging

{{DEBUG_COMMAND}}

Database Operations

{{DB_COMMAND}}

---

Troubleshooting

{{COMMON_ISSUE_1}}

Symptom: {{SYMPTOM}}

Solution:

{{SOLUTION}}

{{COMMON_ISSUE_2}}

Symptom: {{SYMPTOM}}

Solution: {{SOLUTION}}

---

Team & Communication

Key Contacts

Meetings

Communication Norms

• {{NORM_1}}
• {{NORM_2}}

---

Resources

Documentation

• {{DOC_1}}
• {{DOC_2}}

Learning Resources

• {{RESOURCE_1}}
• {{RESOURCE_2}}

---

Checklist

Setup Complete

• [ ] Repository cloned
• [ ] Dependencies installed
• [ ] Environment configured
• [ ] Application runs locally
• [ ] Tests pass

Orientation Complete

• [ ] Codebase structure understood
• [ ] Key files reviewed
• [ ] Architecture overview read
• [ ] First PR submitted

Fully Onboarded

• [ ] Completed first task independently
• [ ] Participated in code review
• [ ] Attended team meetings
• [ ] Questions answered