Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

write-e2e-tests — Claude Code skill for E2E tests

Guides Playwright E2E testing for tldraw, including UI actions, menus, and canvas shapes. Use it when adding coverage for SDK examples or the tldraw.com client.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add tldraw/tldraw --skill write-e2e-tests -a claude-code
Open on GitHub

What write-e2e-tests does

This skill guides Playwright E2E work for tldraw in apps/examples/e2e/ and apps/dotcom/client/e2e/. It covers the test-<feature>.spec.ts naming pattern, fixture imports, and state preparation with setupOrReset.

It uses page.evaluate() for editor actions and points to getByTestId() or toolbar fixtures for UI controls. The guidance also covers menus, UI-event checks, data-driven cases, and differences between Mac systems and mobile viewports.

Test runs include pnpm e2e, pnpm e2e-dotcom, and pnpm e2e-ui. A shared page is only suitable where full test isolation is unnecessary, so dependent checks need scrutiny.

What it helps with

  • add a Playwright test for a drawing tool
  • verify selected shapes on the canvas
  • activate an item in a main or context menu
  • check a UI event after a keyboard action
  • handle modifier keys on Mac and mobile cases

Example prompts for the agent

  • Add an E2E test for a new tool under `apps/examples/e2e/tests/` using `setupOrReset`.
  • Check with Playwright that selecting a rectangle updates the toolbar button state.
  • Write a context-menu test and assert the UI event after a key press.

How to install write-e2e-tests

1Skills CLI (Vercel)

npx skills add tldraw/tldraw --skill write-e2e-tests -a claude-code

2Manually: put the files in place

~/.claude/skills/write-e2e-tests/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/write-e2e-tests/

From the same set7

The whole set →
write-docs tldraw Skill for writing and updating tldraw SDK documentation. Guides you through creating articles, updating existing docs, and following the project's style. Claude Code CX Codex Cursor +1 486installs skill-creator tldraw A guide the agent follows while building a skill: what belongs in SKILL.md, what goes into scripts/, references/ and assets/, and how to keep the whole thing short. Claude Code CX Codex Cursor +1 431installs write-pr tldraw Sets PR title and description standards: semantic types, structured templates, and reviewer-focused writing rules. Claude Code CX Codex Cursor +1 419installs write-issue tldraw Enforces GitHub issue formatting and triage standards based on the tldraw repository. It helps draft clear titles, structure descriptions, and manage labels. Claude Code CX Codex Cursor +1 405installs review-docs tldraw Evaluates and iterates on tldraw SDK documentation against style guides and actual code. Useful for auditing articles and catching inaccurate API references. Claude Code CX Codex Cursor +1 390installs write-release-notes tldraw Creates and reviews tldraw SDK release-note articles from merged PRs, with migration guidance for breaking changes. Claude Code CX Codex Cursor +1 327installs

Similar

review-and-ship cursor This skill automates code review before shipping: checks for bugs, tests, and intent fit, then commits and opens a PR. Use it to verify your work is ready before merge. Claude Code CX Codex Cursor +1 2,500installs prek j178 Guides agents in configuring and running Git hooks with prek, a Rust alternative to pre-commit. Useful when you need speed, workspace support, or native TOML configuration. Claude Code CX Codex Cursor +1 728installs testing-setup Google LLC Analyzes your Android app's testing strategy and installs libraries, infrastructure, and frameworks for unit tests, UI tests, screenshot tests, and end-to-end tests. Claude Code CX Codex Cursor +1 2,500installs phoenix-evals official [email protected] Build and run evaluators for AI and LLM applications with Phoenix. Use it to investigate failures, evaluate RAG systems, and check model output. GitHub Copilot 1,000installs phoenix-cli official arize-ai A GitHub Copilot skill that drives the Phoenix CLI to pull traces, spans and sessions, then turns what it finds into a failure taxonomy for your LLM app. GitHub Copilot 1,000installs dart-generate-test-mocks dart-lang A Dart testing skill: the agent injects external services through constructors, generates mock classes with mockito and build_runner, then writes the unit test. Claude Code CX Codex Cursor +1 18,200installs improve-codebase-architecture Matt Pocock This skill scans a codebase for architectural friction, then builds a visual HTML report with refactoring candidates. Use it before a deeper architecture review. Claude Code 1,163,035installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about write-e2e-tests

How do I install write-e2e-tests in Claude Code?

Run npx skills add tldraw/tldraw --skill write-e2e-tests -a claude-code, then run npx skills add tldraw/tldraw --skill write-e2e-tests -a claude-code again. The skill file is at ~/.claude/skills/write-e2e-tests/SKILL.md.

What does write-e2e-tests do?

It guides Playwright E2E tests for tldraw. The skill covers fixtures, canvas interaction, menus, UI events, and state assertions.

What is needed to use editor in page.evaluate()?

Import Editor from tldraw and declare editor. UI-event checks also require a declaration for __tldraw_ui_event.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor