Git & CI/CD Manager

Expert skill for automating Git workflows, setting up CI/CD pipelines, managing conventional commits, and implementing release automation. Specializes in GitHub Actions, Husky hooks, semantic versioning, and PR management.

Core Capabilities

1. Conventional Commits

Commitizen: Interactive commit message generation
Commitlint: Enforce commit message conventions
Semantic Commit Types: feat, fix, docs, style, refactor, test, chore
Scopes: Component-based scopes (@scope/package)
Breaking Changes: BREAKING CHANGE footer
Auto-linking: Link to issues and PRs

2. GitHub Actions CI/CD

Test Pipeline: Run tests on PR and push
Build Pipeline: Build and verify artifacts
Deploy Pipeline: Automated deployment (staging, production)
Release Pipeline: Automated semantic releases
PR Automation: Auto-label, auto-assign, auto-review
Scheduled Jobs: Dependency updates, security scans
Matrix Builds: Test across multiple Node versions, OS

3. Git Hooks (Husky)

Pre-commit: Lint staged files, run type check
Commit-msg: Validate commit message format
Pre-push: Run tests before push
Post-merge: Install dependencies if package.json changed
Post-checkout: Clean build artifacts
Custom Hooks: Project-specific automation

4. Lint-Staged

ESLint: Auto-fix linting errors
Prettier: Auto-format code
TypeScript: Type check only changed files
Tests: Run tests for changed files only
Custom Commands: Project-specific linting

5. Release Management

Semantic Release: Automated versioning based on commits
Changelog Generation: Auto-generate from commits
Git Tags: Create and push version tags
NPM Publishing: Automated package publishing
GitHub Releases: Create release notes
Version Bumping: Update package.json, lockfiles

6. Branch Management

Gitflow: Main, develop, feature, hotfix branches
PR Templates: Standardized PR descriptions
Branch Protection: Required reviews, status checks
Auto-merge: Merge when checks pass
Conflict Detection: Early conflict warnings

7. PR Automation

Auto-labeling: Based on changed files or PR title
Auto-assignment: Assign reviewers by code ownership
Size Labeling: Small, medium, large, xlarge
Status Checks: Required checks before merge
Comment Templates: Review guidelines

Workflow

Phase 1: Initial Setup

Configure Git
- Set up user info
- Configure line endings
- Set up .gitignore
- Configure Git aliases
Install Tools
- Husky for Git hooks
- Commitizen for commit messages
- Commitlint for validation
- Lint-staged for pre-commit
- Semantic Release for automation
Create Templates
- GitHub Actions workflows
- PR templates
- Issue templates
- Contributing guidelines

Phase 2: GitHub Actions Setup

Create Workflows
- Test workflow (on PR, push)
- Build workflow
- Deploy workflow (staging, production)
- Release workflow
- Scheduled workflows
Configure Secrets
- NPM_TOKEN for publishing
- DEPLOY_TOKEN for deployments
- Other service credentials
Set Up Environments
- Staging environment
- Production environment
- Environment protection rules

Phase 3: Automation

Configure Hooks
- Pre-commit: lint + type check
- Commit-msg: validate format
- Pre-push: run tests
Set Up PR Automation
- Auto-labeling workflow
- Auto-assignment
- Size labeling
- Stale PR management
Release Automation
- Semantic release configuration
- Changelog generation
- NPM publishing
- GitHub release creation

Conventional Commits Guide

Commit Message Format

<type>(<scope>): <subject>

<body>

<footer>

Types

| Type | Description | Version Bump | |------|-------------|--------------| | feat | New feature | Minor (0.x.0) | | fix | Bug fix | Patch (0.0.x) | | docs | Documentation only | None | | style | Code style (formatting, etc.) | None | | refactor | Code refactoring | None | | perf | Performance improvement | Patch | | test | Add or update tests | None | | chore | Maintenance tasks | None | | ci | CI/CD changes | None | | build | Build system changes | None | | revert | Revert previous commit | Depends |

Examples

# Feature with scope
feat(button): add loading state

Adds isLoading prop to Button component
Shows spinner when loading is true

Closes #123

# Breaking change
feat(forms)!: change validation API

BREAKING CHANGE: The validateForm function now returns a Promise
instead of synchronous validation result.

Migration guide available at docs/migration/v2.md

# Bug fix
fix(input): prevent double onChange call

Fixed issue where onChange was called twice on blur

Fixes #456

# Multiple changes
feat(components): add new Card variants

- Add 'elevated' variant with shadow
- Add 'outlined' variant with border
- Update Storybook stories

# Simple fix
fix: typo in README

Commitizen Interactive

# Run commitizen
npm run commit

# Interactive prompts:
? Select the type of change: feat
? What is the scope?: button
? Write a short description: add loading state
? Provide a longer description: (press enter to skip)
? Are there any breaking changes? No
? Does this change affect any open issues? Yes
? Add issue references: Closes #123

# Generated commit:
feat(button): add loading state

Closes #123

GitHub Actions Templates

Test Workflow

# .github/workflows/test.yml
name: Test

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main, develop]

jobs:
  test:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x, 20.x]

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Type check
        run: npm run type-check

      - name: Run tests
        run: npm test -- --coverage

      - name: Upload coverage
        uses: codecov/codecov-action@v3
        if: matrix.node-version == '20.x'
        with:
          file: ./coverage/lcov.info
          fail_ci_if_error: true

  build:
    runs-on: ubuntu-latest
    needs: test

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Check bundle size
        run: npm run size-check

Release Workflow

# .github/workflows/release.yml
name: Release

on:
  push:
    branches: [main]

permissions:
  contents: write
  issues: write
  pull-requests: write
  id-token: write

jobs:
  release:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
          persist-credentials: false

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          registry-url: 'https://registry.npmjs.org'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Run tests
        run: npm test

      - name: Semantic Release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npx semantic-release

Deploy Workflow

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]
  workflow_dispatch:
    inputs:
      environment:
        description: 'Environment to deploy to'
        required: true
        type: choice
        options:
          - staging
          - production

jobs:
  deploy-staging:
    if: github.event_name == 'push' || github.event.inputs.environment == 'staging'
    runs-on: ubuntu-latest
    environment:
      name: staging
      url: https://staging.example.com

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build
        env:
          NODE_ENV: production
          VITE_API_URL: ${{ secrets.STAGING_API_URL }}

      - name: Deploy to Staging
        run: npm run deploy:staging
        env:
          DEPLOY_TOKEN: ${{ secrets.STAGING_DEPLOY_TOKEN }}

  deploy-production:
    if: github.event.inputs.environment == 'production'
    runs-on: ubuntu-latest
    environment:
      name: production
      url: https://example.com

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build
        env:
          NODE_ENV: production
          VITE_API_URL: ${{ secrets.PRODUCTION_API_URL }}

      - name: Deploy to Production
        run: npm run deploy:production
        env:
          DEPLOY_TOKEN: ${{ secrets.PRODUCTION_DEPLOY_TOKEN }}

      - name: Notify Slack
        if: success()
        uses: slackapi/slack-github-action@v1
        with:
          payload: |
            {
              "text": "🚀 Production deployment successful!"
            }
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}

PR Automation Workflow

# .github/workflows/pr-automation.yml
name: PR Automation

on:
  pull_request:
    types: [opened, edited, synchronize]

permissions:
  contents: read
  pull-requests: write

jobs:
  auto-label:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Label based on size
        uses: codelytv/pr-size-labeler@v1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          xs_label: 'size/xs'
          xs_max_size: '10'
          s_label: 'size/s'
          s_max_size: '100'
          m_label: 'size/m'
          m_max_size: '500'
          l_label: 'size/l'
          l_max_size: '1000'
          xl_label: 'size/xl'

      - name: Label based on files
        uses: actions/labeler@v5
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          configuration-path: .github/labeler.yml

  auto-assign:
    runs-on: ubuntu-latest

    steps:
      - name: Auto-assign reviewers
        uses: kentaro-m/auto-assign-action@v1
        with:
          configuration-path: .github/auto-assign.yml

Husky Configuration

Setup Husky

# Install Husky
npm install --save-dev husky

# Initialize Husky
npx husky init

# Creates .husky/ directory with pre-commit hook

Pre-commit Hook

# .husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Run lint-staged
npx lint-staged

# Run type check (optional, can be slow)
# npm run type-check

Commit-msg Hook

# .husky/commit-msg
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Validate commit message with commitlint
npx --no -- commitlint --edit $1

Pre-push Hook

# .husky/pre-push
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Run tests before push
npm test

# Check if build succeeds
npm run build

Post-merge Hook

# .husky/post-merge
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Check if package.json changed
changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"

if echo "$changed_files" | grep --quiet "package.json"; then
  echo "📦 package.json changed, running npm install..."
  npm install
fi

Configuration Files

Commitlint Configuration

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',     // New feature
        'fix',      // Bug fix
        'docs',     // Documentation
        'style',    // Formatting
        'refactor', // Code refactoring
        'perf',     // Performance
        'test',     // Tests
        'chore',    // Maintenance
        'ci',       // CI/CD
        'build',    // Build system
        'revert',   // Revert commit
      ],
    ],
    'scope-enum': [
      2,
      'always',
      [
        'button',
        'input',
        'modal',
        'form',
        'layout',
        'theme',
        'deps',
        'config',
        // Add your component scopes
      ],
    ],
    'subject-case': [2, 'always', 'lower-case'],
    'subject-empty': [2, 'never'],
    'subject-full-stop': [2, 'never', '.'],
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [2, 'always'],
    'header-max-length': [2, 'always', 100],
  },
}

Lint-Staged Configuration

// lint-staged.config.js
module.exports = {
  '*.{ts,tsx}': [
    'eslint --fix',
    'prettier --write',
    // Type check only staged files (faster than full type check)
    () => 'tsc --noEmit',
  ],
  '*.{js,jsx}': ['eslint --fix', 'prettier --write'],
  '*.{json,md,yml,yaml}': ['prettier --write'],
  '*.{css,scss}': ['stylelint --fix', 'prettier --write'],
  // Run tests for changed files
  '*.{ts,tsx,js,jsx}': ['npm test -- --findRelatedTests --passWithNoTests'],
}

Semantic Release Configuration

// release.config.js
module.exports = {
  branches: ['main'],
  plugins: [
    '@semantic-release/commit-analyzer',
    '@semantic-release/release-notes-generator',
    '@semantic-release/changelog',
    '@semantic-release/npm',
    '@semantic-release/github',
    [
      '@semantic-release/git',
      {
        assets: ['package.json', 'CHANGELOG.md'],
        message:
          'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
      },
    ],
  ],
}

Labeler Configuration

# .github/labeler.yml
'type: feature':
  - 'src/**/*.{ts,tsx}'

'type: fix':
  - 'src/**/*.{ts,tsx}'

'type: docs':
  - '*.md'
  - 'docs/**/*'

'type: tests':
  - '**/*.test.{ts,tsx}'
  - '**/*.spec.{ts,tsx}'

'type: ci':
  - '.github/**/*'

'area: components':
  - 'src/components/**/*'

'area: utils':
  - 'src/utils/**/*'

'area: styles':
  - 'src/styles/**/*'
  - '**/*.css'
  - '**/*.scss'

Auto-assign Configuration

# .github/auto-assign.yml
addReviewers: true
addAssignees: false

reviewers:
  - reviewer1
  - reviewer2
  - reviewer3

numberOfReviewers: 2

# Assign based on file patterns
filePathAssignments:
  - patterns:
      - 'src/components/**'
    reviewers:
      - component-expert
  - patterns:
      - '**/*.test.ts'
    reviewers:
      - testing-expert

Package.json Scripts

{
  "scripts": {
    "commit": "cz",
    "prepare": "husky",

    "lint": "eslint src --ext .ts,.tsx",
    "lint:fix": "eslint src --ext .ts,.tsx --fix",

    "type-check": "tsc --noEmit",

    "test": "vitest",
    "test:ci": "vitest run --coverage",

    "build": "tsup",
    "build:check": "npm run build && npm run size-check",

    "size-check": "size-limit",

    "release": "semantic-release",
    "release:dry": "semantic-release --dry-run"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }
}

PR Template

<!-- .github/pull_request_template.md -->
## Description

<!-- Describe your changes in detail -->

## Type of Change

<!-- Mark with an 'x' -->

- [ ] 🐛 Bug fix (non-breaking change which fixes an issue)
- [ ] ✨ New feature (non-breaking change which adds functionality)
- [ ] 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] 📝 Documentation update
- [ ] 🎨 Style update (formatting, renaming)
- [ ] ♻️ Code refactoring (no functional changes)
- [ ] ⚡ Performance improvement
- [ ] ✅ Test update
- [ ] 🔧 Chore (updating build tasks, package manager configs, etc)

## Related Issues

<!-- Link related issues here -->

Closes #
Related to #

## Checklist

- [ ] My code follows the project's style guidelines
- [ ] I have performed a self-review of my code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published

## Screenshots (if applicable)

<!-- Add screenshots here -->

## Additional Notes

<!-- Any additional information -->

Branch Protection Rules

Main Branch Protection

# Recommended settings for main branch:

Required status checks:
  - Test (Node 18.x)
  - Test (Node 20.x)
  - Build
  - Lint

Require branches to be up to date before merging: ✓

Require pull request reviews:
  - Required approving reviews: 1
  - Dismiss stale reviews: ✓
  - Require review from Code Owners: ✓

Require signed commits: ✓ (optional)

Include administrators: ✓

Restrict who can push: Admins only

Best Practices

Commit Messages

Use Imperative Mood: "add feature" not "added feature"
Be Specific: "fix button hover state" not "fix bug"
Limit Subject Line: Max 72 characters
Use Body for Details: Explain why, not what
Reference Issues: Always link to issues

Branching Strategy

Gitflow: main (production), develop (integration), feature/* (new features)
Branch Naming: feature/add-button-component, fix/modal-close-bug, docs/update-readme
Short-lived Branches: Merge within a few days
Regular Rebase: Keep feature branches up to date
Clean History: Squash commits before merging

CI/CD

Fast Feedback: Run quick checks first (lint, type check)
Parallel Jobs: Run tests and build in parallel
Cache Dependencies: Use npm cache to speed up builds
Fail Fast: Stop pipeline on first failure
Clear Errors: Provide actionable error messages

Pull Requests

Small PRs: Easier to review, faster to merge
Self-Review: Review your own PR before requesting review
Clear Description: Explain what, why, and how
Link Issues: Always reference related issues
Tests: Add tests for new features and bug fixes

Releases

Semantic Versioning: Follow semver strictly
Changelog: Auto-generate from commits
Release Notes: Highlight breaking changes
Pre-releases: Use for beta testing
Rollback Plan: Be able to revert quickly

Troubleshooting

Husky Hooks Not Running

# Reinstall Husky
rm -rf .husky
npx husky init

# Re-add hooks
npm run prepare

# Check Git hooks directory
ls -la .git/hooks/

Commitlint Failing

# Test commit message
echo "feat: add new feature" | npx commitlint

# Check configuration
npx commitlint --print-config

# Common issues:
# - Wrong type (use feat, fix, docs, etc.)
# - Missing scope when required
# - Subject in wrong case
# - Subject ends with period

GitHub Actions Failing

# Test workflow locally
npm install -g act
act -l  # List workflows
act     # Run workflows

# Common issues:
# - Missing secrets
# - Wrong Node version
# - Dependencies not cached
# - Environment variables not set

Semantic Release Not Publishing

# Dry run to see what would be released
npm run release:dry

# Common issues:
# - No conventional commits since last release
# - NPM_TOKEN not set
# - Wrong branch (must be main/master)
# - No permissions to publish

When to Use This Skill

Activate this skill when you need to:

Set up Git workflow for new project
Configure conventional commits
Create GitHub Actions pipelines
Set up Husky pre-commit hooks
Implement lint-staged
Configure semantic release
Create PR templates
Set up branch protection rules
Automate changelog generation
Implement CI/CD pipeline
Configure auto-merge rules
Set up deployment workflows
Create custom Git hooks
Troubleshoot Git automation issues

Output Format

When setting up Git automation, provide:

Complete Configuration: All config files (commitlint, husky, etc.)
GitHub Actions Workflows: Test, build, deploy, release
Setup Scripts: Automated installation and configuration
Documentation: How to use the system
PR/Issue Templates: Standardized templates
Troubleshooting Guide: Common issues and solutions

Always create production-ready, well-documented Git automation that follows industry best practices and security guidelines.