Developer & Engineer Templates
Workflow templates designed for software engineers and developers who want to automate deployment pipelines, testing workflows, and development operations from the terminal.
CI/CD Pipeline with Vercel Deploy
Automate your deployment pipeline with CLI-based Vercel deployments, notifications, and status checks.
Use Case
Trigger Vercel deployments from the terminal, monitor build status, and send notifications to Slack when deploys complete.
Workflow Configuration
name: vercel-deploy-pipeline
description: Automated Vercel deployment with notifications
trigger:
type: manual
steps:
- name: trigger_vercel_deploy
type: http
config:
method: POST
url: https://api.vercel.com/v13/deployments
headers:
Authorization: Bearer ${VERCEL_TOKEN}
Content-Type: application/json
body: |
{
"name": "my-project",
"gitSource": {
"type": "github",
"repo": "username/repo",
"ref": "main"
}
}
output: deployment
- name: wait_for_completion
type: http
config:
method: GET
url: https://api.vercel.com/v13/deployments/${deployment.id}
headers:
Authorization: Bearer ${VERCEL_TOKEN}
retry:
max_attempts: 10
interval_seconds: 30
output: status
- name: notify_slack
type: http
config:
method: POST
url: ${SLACK_WEBHOOK_URL}
headers:
Content-Type: application/json
body: |
{
"text": "✅ Vercel deployment complete",
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*Deployment Status*\n• URL: ${status.url}\n• State: ${status.readyState}\n• Duration: ${status.buildingAt}"
}
}
]
}
Setup Instructions
-
Create the workflow:
loopcli loop create vercel-deploy-pipeline -
Set your secrets:
loopcli loop secrets set VERCEL_TOKEN loopcli loop secrets set SLACK_WEBHOOK_URL -
Run locally to test:
loopcli loop run vercel-deploy-pipeline -
Deploy for scheduled runs:
loopcli loop deploy vercel-deploy-pipeline --schedule "0 2 * * *" --activate
Playwright Screenshot & Visual Regression
Automate visual regression testing with Playwright screenshots, comparing against baselines, and sending alerts on changes.
Use Case
Capture screenshots of production pages, compare with baseline images, and alert the team when visual changes are detected.
Workflow Configuration
name: visual-regression-check
description: Automated screenshot capture and comparison
trigger:
type: schedule
cron: "0 */6 * * *" # Every 6 hours
steps:
- name: capture_homepage
type: cli
config:
command: npx playwright screenshot https://myapp.com ./screenshots/homepage-latest.png --viewport-size=1920,1080
- name: capture_dashboard
type: cli
config:
command: npx playwright screenshot https://myapp.com/dashboard ./screenshots/dashboard-latest.png --viewport-size=1920,1080
- name: compare_screenshots
type: cli
config:
command: |
npx pixelmatch ./screenshots/homepage-baseline.png ./screenshots/homepage-latest.png ./screenshots/diff.png 0.1
output: comparison
- name: upload_to_storage
type: http
config:
method: POST
url: https://api.supabase.co/storage/v1/object/screenshots/diff-${timestamp}.png
headers:
Authorization: Bearer ${SUPABASE_KEY}
Content-Type: image/png
body_file: ./screenshots/diff.png
output: upload
- name: notify_on_changes
type: http
condition: comparison.exit_code != 0
config:
method: POST
url: ${SLACK_WEBHOOK_URL}
headers:
Content-Type: application/json
body: |
{
"text": "⚠️ Visual changes detected",
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*Visual Regression Alert*\n• Page: Homepage\n• Diff: ${upload.url}\n• Time: ${timestamp}"
}
}
]
}
Setup Instructions
-
Install dependencies locally:
npm install -D playwright pixelmatch npx playwright install -
Capture baseline screenshots:
npx playwright screenshot https://myapp.com ./screenshots/homepage-baseline.png -
Create the workflow:
loopcli loop create visual-regression-check -
Deploy with scheduling:
loopcli loop deploy visual-regression-check --activate
GitHub PR Status Checks
Automate GitHub PR checks, running linting and tests, then updating PR status.
Workflow Configuration
name: github-pr-checks
description: Automated PR status checks via CLI
trigger:
type: webhook
path: /webhooks/github-pr
steps:
- name: clone_repository
type: cli
config:
command: git clone ${webhook.repository.clone_url} /tmp/repo && cd /tmp/repo && git checkout ${webhook.pull_request.head.sha}
- name: run_linter
type: cli
config:
command: cd /tmp/repo && npm install && npm run lint
output: lint_result
- name: run_tests
type: cli
config:
command: cd /tmp/repo && npm test
output: test_result
- name: update_pr_status
type: http
config:
method: POST
url: https://api.github.com/repos/${webhook.repository.full_name}/statuses/${webhook.pull_request.head.sha}
headers:
Authorization: token ${GITHUB_TOKEN}
Content-Type: application/json
body: |
{
"state": "${test_result.exit_code == 0 ? 'success' : 'failure'}",
"description": "Lint: ${lint_result.exit_code == 0 ? 'passed' : 'failed'} | Tests: ${test_result.exit_code == 0 ? 'passed' : 'failed'}",
"context": "LoopCLI/checks"
}
Database Migration Runner
Automate database migrations after deployments complete.
Workflow Configuration
name: run-migrations
description: Run database migrations automatically
trigger:
type: webhook
path: /webhooks/deploy-complete
steps:
- name: run_migration
type: cli
config:
command: DATABASE_URL=${DATABASE_URL} npx prisma migrate deploy
output: migration
- name: notify_team
type: http
config:
method: POST
url: ${SLACK_WEBHOOK_URL}
body: |
{
"text": "Database migration completed: ${migration.stdout}"
}
Getting Started
-
Install LoopCLI:
npm install -g loopcli -
Initialize your project:
loopcli project init -
Copy a template: Choose a workflow above, copy the YAML into
loops/my-workflow.yaml -
Test locally:
loopcli loop run my-workflow -
Deploy to cloud:
loopcli loop deploy my-workflow --activate