Skip to main content Home Creators plugin87 full-stack-design-skills deployment-devops-workflow
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.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/plugin87/full-stack-design-skills --skill deployment-devops-workflowThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Master universal design principles for UI, web, and applications. Use this skill whenever you need to apply color theory, typography, layout systems, spacing, visual hierarchy, or contrast guidelines. Triggers include design critiques, UI specs, accessibility concerns, design system foundations, responsive layout problems, and questions about why something doesn't look right. Essential for both designers and frontend developers building pixel-perfect, accessible interfaces.
design-systems-architecture Build scalable, maintainable design systems that grow with your product. Use this skill for design system foundations, component architecture, token strategies, governance decisions, scaling patterns, documentation standards, versioning, and cross-team collaboration. Triggers include: design system audits, component library structure, design token organization, system governance questions, scaling decisions, component versioning, breaking changes, documentation strategy, multi-brand support, and system health metrics. Essential for anyone architecting or maintaining a design system serving multiple teams or products.
Build accessible web experiences that work for everyone. Use this skill whenever dealing with WCAG compliance, semantic HTML, ARIA patterns, screen reader testing, keyboard navigation, contrast ratios, accessibility audits, or inclusive design patterns. Triggers include: accessibility concerns, form design, modal dialogs, focus management, live regions, color-only differentiation, keyboard shortcuts, keyboard traps, link/button semantics, landmark navigation, heading hierarchy, skip links, and alt text strategy. Essential for designers, developers, and QA ensuring digital products are usable by people with disabilities.
Related occupations SOC
Based on SOC occupation classification
name deployment-devops-workflow description 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.
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
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 on:
push:
branches: [main ]
paths: ['src/**' , 'package.json' ]
pull_request:
types: [opened , synchronize ]
release:
types: [published ]
Build & Test Pipeline
Lint & Type Check jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- run: npm ci
- run: npm run lint
- run: npm run type-check
Unit Tests 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 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 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 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 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) 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 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 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
npm unpublish @company/component-library@1.2.0
npm publish --tag latest
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 name: Deploy Pipeline
on:
push:
branches: [main , develop ]
pull_request:
release:
types: [published ]
jobs:
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 }}
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
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 }}
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! 🚀
