Git & CI/CD Manager

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

1. Configure Git

   • Set up user info
   • Configure line endings
   • Set up .gitignore
   • Configure Git aliases

2. Install Tools

   • Husky for Git hooks
   • Commitizen for commit messages
   • Commitlint for validation
   • Lint-staged for pre-commit
   • Semantic Release for automation

3. Create Templates

   • GitHub Actions workflows
   • PR templates
   • Issue templates
   • Contributing guidelines

Phase 2: GitHub Actions Setup

1. Create Workflows

   • Test workflow (on PR, push)
   • Build workflow
   • Deploy workflow (staging, production)
   • Release workflow
   • Scheduled workflows

2. Configure Secrets

   • NPM_TOKEN for publishing
   • DEPLOY_TOKEN for deployments
   • Other service credentials

3. Set Up Environments

   • Staging environment
   • Production environment
   • Environment protection rules

Phase 3: Automation

1. Configure Hooks

   • Pre-commit: lint + type check
   • Commit-msg: validate format
   • Pre-push: run tests

2. Set Up PR Automation

   • Auto-labeling workflow
   • Auto-assignment
   • Size labeling
   • Stale PR management

3. Release Automation

   • Semantic release configuration
   • Changelog generation
   • NPM publishing
   • GitHub release creation

Conventional Commits Guide

Commit Message Format

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

<body>

<footer>

Types

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

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

Branching Strategy

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

CI/​CD

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

Pull Requests

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

Releases

1. Semantic Versioning: Follow semver strictly
2. Changelog: Auto-generate from commits
3. Release Notes: Highlight breaking changes
4. Pre-releases: Use for beta testing
5. 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:

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

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