["Creates/modifies configuration files","Installs dev dependencies","Modifies git hooks"]
Dev Workflow
Purpose
Optimize the developer experience loop: write code, get instant feedback, catch errors early, ship confidently. This skill covers the essential DX tooling stack organized in tiers, from individual essentials to team-scale infrastructure.
DX Stack Tiers
Tier 1: Every Project (Solo + Team)
Essential DX tools for any project, regardless of size.
main (production)
├── feat/feature-name (short-lived, 1-3 days max)
├── fix/bug-description (short-lived)
└── chore/task-name (short-lived)
Rules:
- Branch from main, merge to main
- Squash merge PRs (clean linear history)
- No long-lived feature branches
- Feature flags for incomplete features in production
Git Flow (Larger Teams / Release Cycles)
main (production)
└── develop (integration)
├── feature/xyz (from develop)
├── release/v1.2 (from develop, merge to main + develop)
└── hotfix/urgent (from main, merge to main + develop)
Branch Naming Convention
feat/short-description New features
fix/short-description Bug fixes
chore/short-description Maintenance, refactoring
docs/short-description Documentation only
test/short-description Test additions/changes
perf/short-description Performance improvements
ci/short-description CI/CD changes
Renovation (Dependency Updates)
Renovate Config
// renovate.json{"$schema":"https://docs.renovatebot.com/renovate-schema.json","extends":["config:recommended",":automergeMinor",":automergePatch","group:allNonMajor"],"labels":["dependencies"],"schedule":["before 9am on monday"],"packageRules":[{"matchPackagePatterns":["eslint","prettier","typescript"],"groupName":"tooling","automerge":true},{"matchUpdateTypes":["major"],"automerge":false,"labels":["dependencies","breaking-change"]}]}
DX Setup Checklist
Tier 1 (Every Project):
[ ] TypeScript strict mode enabled
[ ] ESLint flat config with strict type checking
[ ] Prettier with Tailwind plugin
[ ] .editorconfig for consistent editor settings
[ ] Husky + lint-staged pre-commit hooks
[ ] .gitignore comprehensive and up-to-date
Tier 2 (Team Projects):
[ ] Commitlint enforcing conventional commits
[ ] PR template in .github/
[ ] Path aliases configured (@/ imports)
[ ] Changesets for versioning (if library/package)
[ ] Branch protection rules on main
Tier 3 (Monorepo):
[ ] Turborepo or Nx configured
[ ] Shared configs in packages/config
[ ] Package boundaries respected (no circular deps)
[ ] Remote caching enabled
[ ] Renovate for automated dependency updates
Pitfalls
ESLint legacy config — Always use flat config (eslint.config.js), not .eslintrc. Legacy config is deprecated in ESLint 9+.
Prettier + ESLint conflicts — Don't use ESLint for formatting. Let Prettier handle formatting, ESLint handle logic. Use eslint-config-prettier if needed.
Over-strict TSConfig — Enable strict settings incrementally on existing projects. For new projects, start with full strict from day one.
Missing lint-staged — Running lint on the entire codebase in pre-commit is too slow. Only lint staged files.
Barrel file performance — index.ts re-exports import everything in the barrel. Use direct imports for Next.js/Webpack projects.
Turbo task graph mistakes — If tasks depend on each other (e.g., lint needs build output for types), declare dependsOn: ["^build"] or you get stale type errors.
pnpm phantom dependencies — pnpm's strict hoisting catches undeclared dependencies. Add missing deps to package.json rather than loosening hoisting rules.
Husky not running — Ensure .husky/pre-commit is executable (chmod +x) and husky is initialized (pnpm exec husky).
