ambient-codeambient-code/platform/skills/frontend/cypress-demo/SKILL.md

cypress-demo

Skill131 starsChanged 6 months agoMITView on GitHub

Create a Cypress-based video demo for a feature branch with cursor, click effects, and captions. Use when recording feature demos, creating PR videos, showcasing UI changes, or generating visual walkthroughs. Triggers on: "demo", "record demo", "create demo video", "cypress demo", "feature walkthrough", "PR video", "showcase".

Reads credentials

In this repository19 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- alignSkill
- amber-reviewSkill
- workflowSkill
- ambient-pr-testSkill
- ambientSkill
- dev-clusterSkill
- deploySkill
- devflowSkill
- discoverSkill
- frontend-developmentSkill
- grpc-devSkill
- unleash-flagSkill
- memorySkill
- pr-fixerSkill
- scaffoldSkill
- ambient-api-serverSkill
- specSkill

The file

We split this skill into the rules it gives an agent

11 rules. About 0 are common, 4 are distinctive, and 7 are very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈4
Distinctive · estimate
This author's own choices. Worth a look.
7
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
Create a polished Cypress demo test that records a human-paced video walkthrough of UI features on the current branch.
line 13
Very specific:
When invoked, create a Cypress test file in e2e/cypress/e2e/ that records a demo video with:
line 30
Very specific:
If $ARGUMENTS is provided, use it as the demo description
line 40
Distinctive:
If empty, run git diff main..HEAD --stat to identify changed files and infer features
line 41
Distinctive:
Read the changed/new component files to understand what UI to showcase
line 42
Distinctive:
Ask the user if clarification is needed
line 43
Very specific:
Verify e2e/.env.test or e2e/.env exists with TEST_TOKEN
line 47
Very specific:
Check if ANTHROPIC_API_KEY is available (needed for Running state)
line 48
Very specific:
Verify the kind cluster is up: kubectl get pods -n ambient-code
line 49
Very specific:
Verify the frontend is accessible: curl -s -o /dev/null -w "%{http_code}" http://localhost:3000
line 50
Very specific:
Create e2e/cypress/e2e/<feature-name>-demo.cy.ts using the helpers below.
line 54

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

Cypress Demo

Create a polished Cypress demo test that records a human-paced video walkthrough of UI features on the current branch.

Usage

/cypress-demo                          # Auto-detect features from branch diff
/cypress-demo chat input refactoring   # Describe what to demo

User Input

$ARGUMENTS

Behavior

When invoked, create a Cypress test file in e2e/cypress/e2e/ that records a demo video with:

Synthetic cursor (white dot) that glides smoothly to each interaction target
Click ripple (blue expanding ring) on every click action
Caption bar (compact dark bar at top of viewport) describing each step
Human-paced timing so every action is clearly visible
--no-runner-ui flag to exclude the Cypress sidebar from the recording

1. Determine what to demo

If $ARGUMENTS is provided, use it as the demo description
If empty, run git diff main..HEAD --stat to identify changed files and infer features
Read the changed/new component files to understand what UI to showcase
Ask the user if clarification is needed

2. Check prerequisites

Verify e2e/.env.test or e2e/.env exists with TEST_TOKEN
Check if ANTHROPIC_API_KEY is available (needed for Running state)
Verify the kind cluster is up: kubectl get pods -n ambient-code
Verify the frontend is accessible: curl -s -o /dev/null -w "%{http_code}" http://localhost:3000

3. Create the demo test file

Create e2e/cypress/e2e/<feature-name>-demo.cy.ts using the helpers below.

Required helpers

Each demo file must define the following helpers inline (they are not shared utilities — embed them directly in the test file):

Functions: caption(), clearCaption(), initCursor(), moveTo(), moveToText(), clickEffect(), cursorClickText()
Timing constants: LONG, PAUSE, SHORT, TYPE_DELAY

See the patterns table below for usage. If a prior demo file already exists in e2e/cypress/e2e/, copy the helpers from there; otherwise implement them fresh using the patterns below.

4. Key patterns

Pattern	Rule
Dual layout	Session page renders desktop + mobile. Always use `.first()`
Caption scoping	Scope `cy.contains` to a tag to avoid matching caption overlay
Workspace setup	Create workspace, poll `/api/projects/:name` until 200
Caption position	Always `top:0` — bottom obscures chat toolbar
Timing	Aim for ~2 min total. Adjust constants if too fast/slow
Video output	`e2e/cypress/videos/<name>.cy.ts.mp4` at 2560x1440

5. Run the demo

cd e2e
npx cypress run --no-runner-ui --spec "cypress/e2e/<name>-demo.cy.ts"

6. Reference implementation

e2e/cypress/e2e/sessions.cy.ts is a reference for test structure and Cypress patterns in this repo. Note that sessions.cy.ts is a functional test, not a demo test — it does not contain the cursor/caption/click-ripple helpers listed above. Use it as a guide for selectors, workspace setup, and polling patterns; implement the demo-specific helpers fresh in your new file.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free