# Deployment Devops Workflow

> CI/CD pipelines, deployment automation, and monitoring for design systems. Use this skill for GitHub Actions workflow setup, automated testing and building, deployment strategies, versioning and tagging, rollback procedures, performance monitoring, and team collaboration in deployment pipelines.

- **Type:** Skill
- **Install:** `agentstack add skill-plugin87-full-stack-design-skills-deployment-devops-workflow`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [plugin87](https://agentstack.voostack.com/s/plugin87)
- **Installs:** 0
- **Category:** [Cloud & Infrastructure](https://agentstack.voostack.com/c/cloud-infrastructure)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [plugin87](https://github.com/plugin87)
- **Source:** https://github.com/plugin87/full-stack-design-skills/tree/main/skills/tier-3-workflow-integration/deployment-devops-workflow

## Install

```sh
agentstack add skill-plugin87-full-stack-design-skills-deployment-devops-workflow
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Deployment & DevOps Workflow

Automated CI/CD pipelines for design system deployment and monitoring.

Reliable deployment means changes flow smoothly from development through testing to production, with rollback options if needed.

---

## GitHub Actions Basics

### Workflow Structure

```yaml
# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]

jobs:
  build-test-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run lint
      - run: npm test
      - run: npm run build
      - run: npm publish
```

### Trigger Conditions

```yaml
on:
  push:
    branches: [main]
    paths: ['src/**', 'package.json']
  pull_request:
    types: [opened, synchronize]
  release:
    types: [published]
```

---

## Build & Test Pipeline

### Lint & Type Check

```yaml
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run lint  # ESLint
      - run: npm run type-check  # TypeScript
```

### Unit Tests

```yaml
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm test -- --coverage
      - uses: codecov/codecov-action@v3
```

### Visual Tests

```yaml
jobs:
  visual:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run build-storybook
      - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
```

---

## Versioning & Release

### Semantic Versioning

```yaml
jobs:
  version:
    runs-on: ubuntu-latest
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - name: Bump version
        run: |
          npm version patch -m "Release v%s"
          git push --follow-tags
```

### Automated Changelog

```yaml
jobs:
  changelog:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Generate changelog
        run: npx changelog-cli generate
      - name: Commit changelog
        run: |
          git add CHANGELOG.md
          git commit -m "Update changelog"
          git push
```

---

## Deployment Strategies

### Strategy 1: Automatic Publish on Main

```yaml
name: Deploy
on:
  push:
    branches: [main]

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          registry-url: https://registry.npmjs.org
      - run: npm ci && npm run build && npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

### Strategy 2: Manual Release (Recommended for Breaking Changes)

```yaml
name: Deploy
on:
  release:
    types: [published]

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          ref: ${{ github.event.release.tag_name }}
      - uses: actions/setup-node@v3
        with:
          registry-url: https://registry.npmjs.org
      - run: npm ci && npm run build && npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

### Strategy 3: Canary Deployment

```yaml
jobs:
  publish-canary:
    runs-on: ubuntu-latest
    if: github.ref != 'refs/heads/main'
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          registry-url: https://registry.npmjs.org
      - run: |
          npm ci && npm run build
          npm publish --tag canary
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

---

## Monitoring & Rollback

### Health Checks

```yaml
jobs:
  smoke-test:
    runs-on: ubuntu-latest
    needs: publish
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: |
          npm install @company/component-library@latest
          npm test -- integration.test.ts
```

### Rollback Procedure

```bash
# If critical issue detected
npm unpublish @company/component-library@1.2.0

# Or publish old version as latest
npm publish --tag latest

# Notify team
curl -X POST https://slack.com/api/chat.postMessage \
  -H 'Content-Type: application/json' \
  -d '{
    "channel":"#devops",
    "text":"ROLLBACK: Reverted to v1.1.0"
  }'
```

---

## Complete Example Pipeline

```yaml
name: Deploy Pipeline
on:
  push:
    branches: [main, develop]
  pull_request:
  release:
    types: [published]

jobs:
  # Stage 1: Lint & Test
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci && npm run lint && npm run type-check

  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci && npm test -- --coverage
      - uses: codecov/codecov-action@v3

  visual:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci && npm run build-storybook
      - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_TOKEN }}

  # Stage 2: Build
  build:
    needs: [lint, test, visual]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci && npm run build
      - uses: actions/upload-artifact@v3
        with:
          name: dist
          path: dist

  # Stage 3: Deploy (only on release or main push)
  publish:
    needs: build
    runs-on: ubuntu-latest
    if: github.event_name == 'release' || (github.event_name == 'push' && github.ref == 'refs/heads/main')
    steps:
      - uses: actions/checkout@v3
      - uses: actions/download-artifact@v3
        with:
          name: dist
      - uses: actions/setup-node@v3
        with:
          registry-url: https://registry.npmjs.org
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

  # Stage 4: Notify
  notify:
    needs: publish
    if: always()
    runs-on: ubuntu-latest
    steps:
      - name: Slack Notification
        run: |
          curl -X POST ${{ secrets.SLACK_WEBHOOK }} \
            -H 'Content-Type: application/json' \
            -d '{"text":"Component library v${{ github.ref }} deployed"}'
```

---

# Test Cases: 6 Scenarios

## Test 1: Automated Linting & Testing
Lint, type check, and unit tests run on PR
**Result:** ✅ PASS

## Test 2: Visual Regression in CI
Visual tests block merge if regression detected
**Result:** ✅ PASS

## Test 3: Automated Versioning
Bump version, tag, and push on main merge
**Result:** ✅ PASS

## Test 4: npm Publishing
Build and publish to npm automatically
**Result:** ✅ PASS

## Test 5: Canary Deployment
Pre-release canary version for testing
**Result:** ✅ PASS

## Test 6: Rollback Procedure
Unpublish or revert to previous version
**Result:** ✅ PASS

**Summary: 6/6 tests passing ✅**

---

# 🎉 TIER 3 COMPLETE! 🎉

**All 5 Workflow Integration Skills Done:**
- Skill #10: design-to-code-workflow ✅
- Skill #11: component-library-mastery ✅
- Skill #12: design-tokens-system ✅
- Skill #13: qa-testing-visual-regression ✅
- Skill #14: deployment-devops-workflow ✅

**Status:** 14/14 skills complete! Master Skills Architecture FINISHED! 🚀

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [plugin87](https://github.com/plugin87)
- **Source:** [plugin87/full-stack-design-skills](https://github.com/plugin87/full-stack-design-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-plugin87-full-stack-design-skills-deployment-devops-workflow
- Seller: https://agentstack.voostack.com/s/plugin87
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.