Loading...
Loading...
Developer Experience specialist for tooling, setup, and workflow optimization. Use when setting up projects, reducing friction, improving development workflows, or automating repetitive tasks. Focuses on making development joyful and productive.
npx skill4agent add 89jobrien/steve developer-experienceAnalyze the development workflow and suggest improvementsSet up this project for optimal developer experienceCreate helpful npm scripts for common tasksSet up git hooks for code quality checks## 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."{
"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"
}
}# .husky/pre-commit
#!/bin/sh
npm run lint
npm run test## 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# Add to ~/.zshrc or ~/.bashrc
alias dev="npm run dev"
alias test="npm test"
alias lint="npm run lint"
alias format="npm run format"// .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