New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Cypress Demo

by ambient-code in ambient-code/platform

Create a Cypress-based video demo for a feature branch with cursor, click effects, and captions.

MITAuto-check: notesTesting & QA

Install Cypress Demo

skills CLI
$ npx skills add ambient-code/platform --skill cypress-demo -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ambient-code/platform cypress-demo --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ambient-code/platform.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend/cypress-demo .claude/skills/cypress-demo && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
cypress-demo
GitHub stars
131
Token cost
~879 tokens
SKILL.md length
377 words
Files
2
Skills in repo
18
Repo updated
First seen
Licence
MIT

At a glance

Create a Cypress-based video demo for a feature branch with cursor, click effects, and captions.

  • Works in 6 steps: Determine what to demo → Check prerequisites → Create the demo test file → …
  • Recording feature demos
  • SKILL.md covers Usage, User Input and Behavior
  • Calls npx, git and kubectl; needs TEST_TOKEN and ANTHROPIC_API_KEY

What it does

Cypress Demo is an agent skill from ambient-code/platform. 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".

Its SKILL.md is about 880 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `evals/evals.json`).

It sits in Testing & QA, covering End-to-end testing and Video production. It works with Cypress. The repository describes itself as: Vision/Mission https://ambient-code.ai : Virtual team management and collaboration platform. User guides: https://ambient-code.github.io/platform/. The licence is MIT.

When your agent uses it

  • Recording feature demos
  • Creating PR videos
  • Showcasing UI changes
  • Generating visual walkthroughs

Example prompts

  • “record demo”
  • “create demo video”
  • “cypress demo”
  • “/cypress-demo”

Requirements

  • Node.js
  • A credential in TEST_TOKEN
  • A credential in ANTHROPIC_API_KEY

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Determine what to demo
  2. Check prerequisites
  3. Create the demo test file
  4. Key patterns
  5. Run the demo
  6. Reference implementation

What it can do on your machine

Read from SKILL.md and the folder at commit e15afd3. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • git
    • kubectl
    • curl

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, git, kubectl and curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • TEST_TOKEN
    • ANTHROPIC_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Cypress Demo loads about 879 tokens when it runs. Until then it costs about 85 tokens; SKILL.md has 377 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~85
When it runs · the whole SKILL.md, loaded when a task matches
~879

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:47
    - Verify `e2e/.env.test` or `e2e/.env` exists with `TEST_TOKEN`

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ambient-code/platform at commit e15afd3, republished under its MIT licence (© ambient-code). 377 words, ~879 tokens.

Download SKILL.mdSave it as .claude/skills/cypress-demo/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
cypress-demo
description
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".

Cypress Demo

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

Usage

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

User Input

text
$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.

Show full SKILL.md (120 more words)Show less
4. Key patterns
PatternRule
Dual layoutSession page renders desktop + mobile. Always use .first()
Caption scopingScope cy.contains to a tag to avoid matching caption overlay
Workspace setupCreate workspace, poll /api/projects/:name until 200
Caption positionAlways top:0 — bottom obscures chat toolbar
TimingAim for ~2 min total. Adjust constants if too fast/slow
Video outpute2e/cypress/videos/<name>.cy.ts.mp4 at 2560x1440
5. Run the demo
bash
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.

© ambient-code, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in skills/frontend/cypress-demo of ambient-code/platform.

  • SKILL.md
  • evals/evals.json

Open the folder on GitHubat commit e15afd3

Compare with similar skills

Cypress Demo next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Cypress Demo compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Cypress Demo this skillambient-code/platform131—~879Automated safety check: NotesMIT
E2E Testing Patternstry-works/role-model11713 repos~990Automated safety check: PassCustom licence
Verdaccio Change Testing Selectorverdaccio/verdaccio18k—~1.6kAutomated safety check: WarnMIT
Playwright Testingchongdashu/vibejam-starter-pack149—~2.1kAutomated safety check: PassNone
Open BrowserJasonHonKL/Openbrowser114—~1.6kAutomated safety check: PassMIT
Create a Verification Skillcursor/plugins10k8 repos~1.5kAutomated safety check: PassNone

Similar skills

  • E2E Testing Patterns

    try-works/role-model

    Master end-to-end testing with Playwright and Cypress to build reliable test suites that catch bugs, improve confidence, and enable fast deployment.

    117 GitHub starsUsed in 13 repos~990 tokens
    Testing & QAAuto-check passed

  • Verdaccio Change Testing Selector

    verdaccio/verdaccio

    Figures out which rebuild and test suites actually cover a change in the verdaccio monorepo, instead of a scoped run that passes untested.

    18k GitHub stars~1.6k tokensUpdated yesterday
    Testing & QAAuto-check: warnings

  • Playwright Testing

    chongdashu/vibejam-starter-pack

    Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.

    149 GitHub stars~2.1k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed

  • Open Browser

    JasonHonKL/Openbrowser

    A skill your agent uses whenever the task involves browsing web pages, extracting page content, clicking forms, or completing web workflows.

    114 GitHub stars~1.6k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed

  • Create a Verification Skill

    cursor/plugins

    Official

    Generates a project-local skill that launches your app, exercises a feature the way a user would and captures evidence, for web, CLI, API or desktop projects.

    10k GitHub starsUsed in 8 repos~1.5k tokens
    Testing & QAAuto-check passed

  • Bmad Testarch Framework

    bmad-code-org/bmad-method-test-architecture-enterprise

    Initialize test framework with Playwright or Cypress. An agent skill from bmad-code-org/bmad-method-test-architecture-enterprise.

    104 GitHub starsUsed in 3 repos~893 tokens
    Testing & QAAuto-check passed

More from ambient-code/platform

All 18 skills in this repo

  • Align

    ambient-code/platform

    Run a convention alignment check across the codebase to measure adherence to documented standards.

    131 GitHub stars~754 tokensUpdated yesterday
    Auto-check passed

  • Amber Review

    ambient-code/platform

    Perform a comprehensive code review using repository-specific standards.

    131 GitHub stars~1.4k tokensUpdated yesterday
    Auto-check passed

  • Deploy

    ambient-code/platform

    Deploy, update manifests, and troubleshoot the ambient-ui component.

    131 GitHub stars~2.6k tokensUpdated yesterday
    Auto-check passed

  • Discover

    ambient-code/platform

    Discover domain-specific skills and context before starting any coding or spec work.

    131 GitHub stars~747 tokensUpdated yesterday
    Auto-check passed

  • Frontend Development

    ambient-code/platform

    Required context for all frontend work. An agent skill from ambient-code/platform.

    131 GitHub stars~525 tokensUpdated yesterday
    Auto-check passed

  • Gerrit Create

    ambient-code/platform

    A skill your agent uses when creating or updating Gerrit changes — pushing code for review, amending patch sets, setting reviewers and topics.

    131 GitHub stars~662 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Cypress Demo

What does Cypress Demo do?

Create a Cypress-based video demo for a feature branch with cursor, click effects, and captions. Cypress Demo is an agent skill from ambient-code/platform. Create a Cypress-based video demo for a feature branch with cursor, click effects, and captions.

When should I use Cypress Demo?

Cypress Demo fits situations like: recording feature demos; creating PR videos; showcasing UI changes; generating visual walkthroughs.

How do I install Cypress Demo in Claude Code?

Run `npx skills add ambient-code/platform --skill cypress-demo -a claude-code`. Or copy the skill folder (skills/frontend/cypress-demo in ambient-code/platform) into .claude/skills/cypress-demo in your project. Claude Code loads it when a task matches its description.

How do I install Cypress Demo in Codex?

Run `npx skills add ambient-code/platform --skill cypress-demo -a codex`. Or copy the skill folder (skills/frontend/cypress-demo in ambient-code/platform) into .agents/skills/cypress-demo in your project. Codex loads it when a task matches its description.

Can I use Cypress Demo in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ambient-code/platform --skill cypress-demo -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/cypress-demo, .gemini/skills/cypress-demo, .github/skills/cypress-demo and .opencode/skills/cypress-demo in your project.

What does Cypress Demo need to run?

Going by SKILL.md and its folder, Cypress Demo needs the command-line tools its instructions call (npx, git, kubectl and curl) and credentials named TEST_TOKEN and ANTHROPIC_API_KEY. Our summary lists: Node.js; A credential in TEST_TOKEN; A credential in ANTHROPIC_API_KEY.

Does Cypress Demo access the network?

SKILL.md contains no URLs. Its commands use npx, git and curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Cypress Demo safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Cypress Demo use?

Cypress Demo is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Cypress Demo use?

About 879 tokens (SKILL.md is roughly 3.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Cypress Demo?

Skills that share tags, products or a category with Cypress Demo: E2E Testing Patterns (try-works/role-model, 117 stars), Verdaccio Change Testing Selector (verdaccio/verdaccio, 18k stars), Playwright Testing (chongdashu/vibejam-starter-pack, 149 stars) and Open Browser (JasonHonKL/Openbrowser, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Cypress Demo?

ambient-code (a GitHub organization) maintains it in ambient-code/platform, which has 131 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on October 6, 2026.

Source: ambient-code/platform on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.