Nextjingjing

E2e Playground — Development skill for Claude Code

Development community

Claude Code skills: followable guides, annotated screenshots, flake-free E2E tests, real-app demo videos and human-factors numbers.

How to install E2e Playground

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Nextjingjing/e2e-playground and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What E2e Playground does

Claude Code skills: followable guides, annotated screenshots, flake-free E2E tests, real-app demo videos and human-factors numbers.

Alternatives in Development

E2e Devcontainer — Run E2E tests in a dev container (isolated environment) 1.6k ★
Shortcuts Playground Plugin — Shortcuts Playground: A Claude Code and Codex plugin for building, validating, signing, and remixing macOS/iOS 1.1k ★
WP Playground — WordPress Playground development 902 ★

README

e2e-playground

Claude Code skills for **guides anyone can follow**, **screenshots**, **demo videos**, **tests that don't flake** and **numbers about people** — five kids in one end-to-end playground.

Demo

![show-and-tell touring nextjingjing.github.io: search, open a post, dark mode, archives](docs/demo.gif)

Recorded by `show-and-tell` from one prompt: a real browser on the live site, real mouse and keyboard, highlights, captions, a title card, fast-forwarded waiting and an original synthesized music bed (no copyright).

A SQLBolt tutorial with Thai captions, also from one prompt ("ทำคลิปสอนใช้ sqlbolt"):

[![show-and-tell teaching sqlbolt.com: read a lesson, type a query, get every task ticked, continue](https://img.youtube.com/vi/hNvjIyoIa-8/hqdefault.jpg)](https://youtu.be/hNvjIyoIa-8)

Made by another AI (Qwen) with these skills

The skills are plain [Agent Skills](https://agentskills.io) folders, so they are not tied to Claude. These two videos were recorded by **Qwen** following `show-and-tell`:

[![test my skill 01 — demo recorded by Qwen](https://img.youtube.com/vi/Jf53DOyJzww/hqdefault.jpg)](https://www.youtube.com/watch?v=Jf53DOyJzww) [![test skill 02 — demo recorded by Qwen](https://img.youtube.com/vi/EHDntvZT6Xc/hqdefault.jpg)](https://www.youtube.com/watch?v=EHDntvZT6Xc)

Skills

skill	what it does
`hold-my-hand` (จูงมือ)	Writes a click-by-click HTML guide a first-time, non-technical reader can follow alone: where to go, the exact button text, what you should see (with a picture), and real annotated screenshots. You review the page with Claude round after round until it reads right.
`paparazzi` (แคปทุกมุม)	Captures real screenshots of your running app with outlines and numbered badges ①②③. Uses Playwright with its open-source Chromium by default unless you ask for another browser.
`show-and-tell` (เอาของมาอวด)	Records an mp4 demo on the real running app, clicked like a person: visible cursor, real