How do I install the Write Spec skill?

Run npx skillmds@latest add liberatedpixelcup/write-spec in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Write Spec safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Write Spec?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Write Spec free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Write Spec?

liberatedpixelcup (@liberatedpixelcup) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Write Spec by liberatedpixelcup — Agent Skill

Name: Write Spec
Author: liberatedpixelcup

Write Spec

Write a browser Mocha, Node, or Playwright visual spec for this repo. Use when adding a test, covering new production lines, or the user asks for a spec. New specs are TypeScript. Register browser specs in tests/tests.js.

File contents

Write a spec

New specs are TypeScript (*_spec.ts). Do not add a new .js spec.

Browser (Testem + Mocha + Chai)

Import describe / it / hooks from "mocha-globals" (Vite alias to tests/bdd-globals.js) and assert or expect from "chai". Render with global m.
Thread catalog: CatalogReader and state: State. Use createCatalog(), createState(), and tests/browser-catalog-fixture.js (seedCatalog / seedCatalogWithGeneratedContext). Do not depend on the production catalog or bootstrap state. See catalog.
seedCatalogWithGeneratedContext pulls in generated metadata, so run npm run dev or npm run build first or it resolves nothing.
beforeEach / afterEach should create and remove DOM hosts.
Import the new file from tests/tests.js. If you skip this, Mocha never runs the spec and Codecov patch fails with no test failure. A .ts spec is registered with its real extension (import "./foo_spec.ts";) — see typescript.

New .ts specs are type-checked: tests is in tsconfig.json include under @tsconfig/strictest, so run npm run type-check as well.

Example: Unit and component specs.

Node

Put the file under tests/node/. Import the implementation (.ts, or leftover .js). The runner collects *_spec.js and *_spec.ts automatically — no registry file.

How to run one file: run-one-spec.

Visual (Playwright)

Add cases under tests/visual/. Reuse waits in home-helpers.ts. Do not import the file from tests/tests.js. Visual tests are not Codecov-instrumented; Argos needs ARGOS_TOKEN. When a layout or CSS change warrants a run, and how to write one: visual-test. Isolated run: run-one-spec.

Confirm the new lines are hit

This is a full-suite run, not isolation. Skip if the path is in codecov.yml ignore:.

sources/ → npm run test:browser:coverage, then coverage/browser/index.html (or the terminal report).

scripts/ → npm run test:node:coverage, then coverage/node/index.html.

Which command, what the gates mean, and why comment-only diffs still pass: coverage. PR gates: CONTRIBUTING.md.

---name: write-specdescription: Write a browser Mocha, Node, or Playwright visual spec for this repo. Use when adding a test, covering new production lines, or the user asks for a spec. New specs are TypeScript. Register browser specs in tests/tests.js.---# Write a specNew specs are TypeScript (`*_spec.ts`). Do not add a new `.js` spec.## Browser (Testem + Mocha + Chai)- Import `describe` / `it` / hooks from `"mocha-globals"` (Vite alias to [`tests/bdd-globals.js`](../../../tests/bdd-globals.js)) and `assert` or `expect` from `"chai"`. Render with global `m`.- Thread `catalog: CatalogReader` and `state: State`. Use `createCatalog()`, `createState()`, and [`tests/browser-catalog-fixture.js`](../../../tests/browser-catalog-fixture.js) (`seedCatalog` / `seedCatalogWithGeneratedContext`). Do not depend on the production catalog or bootstrap state. See [catalog](../catalog/SKILL.md).- `seedCatalogWithGeneratedContext` pulls in generated metadata, so run `npm run dev` or `npm run build` first or it resolves nothing.- `beforeEach` / `afterEach` should create and remove DOM hosts.- Import the new file from [`tests/tests.js`](../../../tests/tests.js). If you skip this, Mocha never runs the spec and Codecov patch fails with no test failure. A `.ts` spec is registered with its real extension (`import "./foo_spec.ts";`) — see [typescript](../typescript/SKILL.md#adding-a-ts-browser-spec).New `.ts` specs are type-checked: `tests` is in `tsconfig.json` `include` under`@tsconfig/strictest`, so run `npm run type-check` as well.Example: [Unit and component specs](../../../CONTRIBUTING.md#unit-and-component-specs).## NodePut the file under `tests/node/`. Import the implementation (`.ts`, or leftover`.js`). The runner collects `*_spec.js` and `*_spec.ts` automatically — noregistry file.How to run one file: [run-one-spec](../run-one-spec/SKILL.md).## Visual (Playwright)Add cases under [`tests/visual/`](../../../tests/visual/). Reuse waits in[`home-helpers.ts`](../../../tests/visual/home-helpers.ts). Do not import thefile from `tests/tests.js`. Visual tests are not Codecov-instrumented; Argosneeds `ARGOS_TOKEN`. When a layout or CSS change warrants a run, and how towrite one: [visual-test](../visual-test/SKILL.md). Isolated run:[run-one-spec](../run-one-spec/SKILL.md).## Confirm the new lines are hitThis is a full-suite run, not isolation. Skip if the path is in[`codecov.yml`](../../../codecov.yml) `ignore:`.`sources/` → `npm run test:browser:coverage`, then`coverage/browser/index.html` (or the terminal report).`scripts/` → `npm run test:node:coverage`, then `coverage/node/index.html`.Which command, what the gates mean, and why comment-only diffs still pass:[coverage](../coverage/SKILL.md). PR gates:[CONTRIBUTING.md](../../../CONTRIBUTING.md#unit-test-coverage).

Frequently asked questions