What does the preview URL look like?

Preview URLs follow the pattern preview-{branch}.staging.example.com, with the branch name sanitized (slashes become hyphens) if needed.

How long do previews stay active?

Previews expire after 7 days, and only one preview exists per branch; re-deploy replaces the previous URL.

Which environment variables are used for previews?

Previews use staging environment variables, not production, to mirror the staging setup.

deploy-preview

Scanned

npx machina-cli add skill zakelfassi/skills-driven-development/deploy-preview --openclaw

Files (1)

SKILL.md

1.7 KB

Deploy Preview

Deploy the current branch to a preview URL for review before merging.

Inputs

Branch name (defaults to current branch)
Environment (defaults to staging)

Steps

Verify branch is clean
```
git status --porcelain
```
If dirty, commit or stash before proceeding.
Run tests locally
```
npm test
```
Do not deploy if tests fail.
Push to remote
```
git push origin HEAD
```
Trigger preview deploy
```
scripts/deploy-preview.sh
```
This builds, uploads, and returns a preview URL.
Verify the preview
- Open the preview URL
- Check: page loads, no console errors, key feature works
- If broken: fix locally, re-push, re-deploy
Share the preview URL
- Post in the PR description
- Or share in the team channel

Conventions

Preview URLs follow the pattern: preview-{branch}.staging.example.com
Preview deploys expire after 7 days
Only one preview per branch (re-deploying replaces the previous)

Edge Cases

Branch name has slashes: The deploy script sanitizes / to -
Large assets: Preview deploys skip video files >50MB
Environment variables: Preview uses staging env vars, not production

Source

git clone https://github.com/zakelfassi/skills-driven-development/blob/main/examples/webapp-starter/skills/deploy-preview/SKILL.md

View on GitHub

Overview

Deploy Preview creates a temporary preview URL for the current branch in the staging environment for visual review. It enables teammates to see changes before merging and simplifies feedback collection. The process emphasizes a clean branch, local tests, and sharing a link in PRs or chats.

How This Skill Works

The workflow checks for a clean working tree, runs local tests, pushes the branch, and triggers a preview deployment script. The script builds the app, uploads assets, and returns a URL patterned as preview-{branch}.staging.example.com; previews expire after seven days and re-deploys replace the previous preview.

When to Use It

A feature branch is ready for visual review by teammates
Someone asks to deploy this for review in a PR or chat
Before opening or updating a pull request
UI/UX QA sessions with stakeholders
Quick stakeholder demo or feedback cycle

Quick Start

Step 1: Ensure the branch is clean with git status --porcelain; commit or stash as needed
Step 2: Run tests locally with npm test and proceed only if they pass
Step 3: Push to remote and trigger the preview deploy: git push origin HEAD; scripts/deploy-preview.sh; verify URL and share

Best Practices

Start from a clean git working tree; commit or stash changes before deploy
Run tests locally with npm test and do not deploy if tests fail
Push the branch to origin before triggering the deploy
Use the preview URL pattern: preview-{branch}.staging.example.com
Remember previews expire after 7 days and only one preview per branch; re-deploy replaces

Example Use Cases

Deploy preview for feature/search-ui to collect UI feedback
Publish preview for feature/checkout-flow to validate the checkout experience
Pre-PR demo using a preview URL to show changes to the team
QA team verifies responsive layout on preview-mobile branch
Stakeholder demo using preview-issue-123 to gather early feedback

Frequently Asked Questions

Add this skill to your agents