constellai 0.3.0

package/skills/stacks/styling/unocss/SKILL.md

@@ -0,0 +1,64 @@
+---
+name: unocss
+description: Instant on-demand atomic CSS engine with no core utilities, fully customizable via presets and rules; consult when building atomic CSS fast and small.
+domain: stack
+category: styling
+tags: [unocss, atomic-css, presets, vite, utility]
+official_sources:
+  - https://unocss.dev/
+  - https://github.com/unocss/unocss
+verified: 2026-06-16
+---
+
+# UnoCSS
+
+## Overview
+UnoCSS is an instant, on-demand atomic CSS engine. Unlike opinionated frameworks, its core ships no utilities; you define behavior through presets and rules, and it generates only the CSS your code uses. It is built for speed and a tiny footprint. Read this when you want a customizable atomic-CSS workflow or to bring your own design-system presets.
+
+## Official sources
+- Docs: https://unocss.dev/
+- Repo: https://github.com/unocss/unocss
+- Install / download: https://unocss.dev/integrations/vite
+
+## Install / setup
+```bash
+npm install -D unocss
+```
+The Vite plugin ships in the main `unocss` package and is imported from `unocss/vite` (per the Vite integration docs).
+
+## Core concepts
+- **On-demand atomic CSS**: utilities are generated only when used in your source, keeping output minimal.
+- **Rules**: define utilities as static entries (`m-1`) or dynamic RegExp matchers that accept arbitrary values.
+- **Presets**: bundled collections of rules, variants, and shortcuts that can be shared across projects or teams.
+- **Shortcuts**: combine multiple utilities into a single reusable class name.
+- **Variants**: transform or conditionally apply utilities (states, breakpoints, custom logic).
+- **Unopinionated core**: no built-in utilities by default — behavior comes entirely from your configured presets/rules.
+
+## Best practices
+- Compose your styling from presets (official or your own) rather than re-implementing common utilities by hand.
+- Use shortcuts to name and reuse recurring utility combinations instead of repeating long class strings.
+- Encapsulate a design system as a custom preset so it is shareable and versionable across projects.
+- Define dynamic rules with RegExp matchers to support arbitrary values without exploding your config.
+
+## Common pitfalls
+- Expecting utilities out of the box → the core is intentionally empty; add a preset (or define rules) or nothing is generated.
+- Building class names dynamically the engine can't scan → unused or unseen classes won't be generated; keep classes statically discoverable.
+
+## Examples
+```ts
+// uno.config.ts
+import { defineConfig, presetUno } from 'unocss';
+
+export default defineConfig({
+  presets: [presetUno()],
+  shortcuts: { btn: 'px-4 py-1 rounded inline-block' },
+});
+```
+
+## Further reading
+- https://unocss.dev/guide/ — concepts and configuration
+- https://unocss.dev/presets/ — official presets
+
+## Related skills
+- ../tailwind — utility-first framework that inspired UnoCSS
+- ../css-modules — alternative scoping-based styling approach

package/skills/stacks/styling/vanilla-extract/SKILL.md

@@ -0,0 +1,64 @@
+---
+name: vanilla-extract
+description: Zero-runtime stylesheets authored in TypeScript that compile to static CSS with locally-scoped, type-safe styles; consult for type-safe CSS in builds.
+domain: stack
+category: styling
+tags: [vanilla-extract, css-in-js, typescript, zero-runtime, scoped]
+official_sources:
+  - https://vanilla-extract.style/documentation/getting-started/
+  - https://github.com/vanilla-extract-css/vanilla-extract
+verified: 2026-06-16
+---
+
+# vanilla-extract
+
+## Overview
+vanilla-extract lets you write styles in TypeScript (or JavaScript) using `.css.ts` files, generating static CSS at build time with zero runtime cost. Class names are locally scoped (like CSS Modules) and the whole API is type-safe. Read this when you want CSS-in-TS authoring without shipping a styling runtime.
+
+## Official sources
+- Docs: https://vanilla-extract.style/documentation/getting-started/
+- Repo: https://github.com/vanilla-extract-css/vanilla-extract
+- Install / download: https://vanilla-extract.style/documentation/getting-started/
+
+## Install / setup
+```bash
+npm install @vanilla-extract/css
+```
+Then add a bundler integration (Vite, esbuild, webpack, Next.js, Parcel, Rollup, or Gatsby) per the getting-started guide.
+
+## Core concepts
+- **Styles as `.css.ts` files**: author styles in TypeScript; the bundler extracts them into static CSS during build.
+- **Locally-scoped class names**: the `style` function returns a unique class name, isolating styles per file like CSS Modules.
+- **Zero runtime**: no styling library is shipped to the browser; output is plain CSS.
+- **Scoped CSS variables**: `createVar`/theme APIs produce scoped custom properties for theming.
+- **Type safety**: styles are typed via CSSType, so invalid properties and values are caught at compile time.
+- **Bundler integration required**: a build plugin transforms `.css.ts` files into emitted CSS.
+
+## Best practices
+- Reference the value returned by `style` as your class name rather than hardcoding generated names.
+- Use the theming/CSS-variable APIs (`createTheme`, `createVar`) to centralize design tokens type-safely.
+- Keep style definitions in `.css.ts` files so the bundler can statically extract them at build time.
+- Lean on the type checker to validate property names and values instead of relying on runtime checks.
+
+## Common pitfalls
+- Skipping the bundler integration → `.css.ts` files won't be transformed into CSS; install the matching plugin for your build tool.
+- Expecting runtime dynamic styling like traditional CSS-in-JS → styles are extracted at build time, so prefer variables/variants for dynamic values.
+
+## Examples
+```ts
+// styles.css.ts
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  padding: 10,
+  display: 'flex',
+});
+```
+
+## Further reading
+- https://vanilla-extract.style/documentation/getting-started/ — setup and bundler guides
+- https://vanilla-extract.style/documentation/styling/ — styling API reference
+
+## Related skills
+- ../css-modules — the locally-scoped CSS model vanilla-extract builds on
+- ../styled-components — runtime CSS-in-JS alternative

package/skills/stacks/styling/vuetify/SKILL.md

@@ -0,0 +1,89 @@
+---
+name: vuetify
+description: Vuetify is a Vue component framework implementing Material Design with 80+ prebuilt components, a responsive grid, and a theming system; consult when scaffolding a Vue+Vuetify app, registering it with createVuetify, using v-* components like v-btn/v-data-table, configuring themes, or enabling tree-shaking via vite-plugin-vuetify.
+domain: stack
+category: styling
+tags: [vuetify, vue, material-design, components, frontend, sass, typescript]
+official_sources:
+  - https://vuetifyjs.com/en/getting-started/installation/
+  - https://github.com/vuetifyjs/vuetify
+  - https://www.npmjs.com/package/create-vuetify
+verified: 2026-06-17
+---
+
+# Vuetify
+
+## Overview
+Vuetify is an open-source Vue 3 component framework that implements Google's Material Design spec. It provides 80+ ready-made `v-*` components, a 12-column responsive grid, a configurable theme/color system, and SASS variables for customization. Read this when scaffolding a new Vue + Vuetify project, registering the plugin with `createVuetify`, composing UIs from Vuetify components, theming, or setting up auto-import/tree-shaking with the Vite plugin.
+
+## Official sources
+- Docs: https://vuetifyjs.com/en/getting-started/installation/
+- Repo: https://github.com/vuetifyjs/vuetify
+- Install: https://www.npmjs.com/package/create-vuetify
+
+## Install / setup
+```bash
+npm create vuetify@latest
+```
+Scaffolding command from the official installation guide (https://vuetifyjs.com/en/getting-started/installation/). To add to an existing app: `npm i vuetify`.
+
+## Core concepts
+- **createVuetify plugin** — instantiate with `createVuetify({ components, directives })` and register via `app.use(vuetify)`.
+- **Components** — 80+ `v-*` components (`v-btn`, `v-card`, `v-text-field`, `v-data-table`, `v-app-bar`) following Material Design.
+- **v-app / layout** — `<v-app>` is the required root; layout components (`v-app-bar`, `v-navigation-drawer`, `v-main`) compose the shell.
+- **Grid system** — `v-container` > `v-row` > `v-col` with breakpoint props (`cols`, `sm`, `md`, `lg`, `xl`).
+- **Theming** — light/dark themes and named color palettes configured in `createVuetify({ theme: {...} })`.
+- **Display/breakpoints** — `useDisplay()` composable and responsive props react to xs–xxl breakpoints.
+- **Directives** — opt-in directives (`v-ripple`, `v-intersect`) registered alongside components.
+- **Tree-shaking** — `vite-plugin-vuetify` auto-imports only used components and SASS for smaller bundles.
+
+## Best practices
+- Use `npm create vuetify@latest` to scaffold; it wires Vite, the plugin, and tree-shaking for you (https://vuetifyjs.com/en/getting-started/installation/).
+- Enable automatic component import + on-demand styles with `vite-plugin-vuetify` rather than importing everything (https://vuetifyjs.com/en/features/treeshaking/).
+- Define themes and brand colors centrally in `createVuetify({ theme })`, not per-component overrides (https://vuetifyjs.com/en/features/theme/).
+- Wrap the app in a single `<v-app>` and use `v-main` for routed content so layout components position correctly (https://vuetifyjs.com/en/features/application-layout/).
+
+## Common pitfalls
+- Components render unstyled / overlays mis-position → app not wrapped in `<v-app>`, or `vuetify/styles` not imported.
+- Bundle is huge → globally registering all components; switch to `vite-plugin-vuetify` auto-import.
+- Theme colors not applying → set them in `createVuetify({ theme })` config, not ad-hoc CSS, and reference via `color="primary"`.
+
+## Examples
+```js
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+const vuetify = createVuetify({
+  components,
+  directives,
+  theme: { defaultTheme: 'dark' },
+})
+
+createApp(App).use(vuetify).mount('#app')
+```
+```vue
+<!-- App.vue -->
+<template>
+  <v-app>
+    <v-main>
+      <v-container>
+        <v-btn color="primary">Click me</v-btn>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+```
+
+## Further reading
+- https://vuetifyjs.com/en/components/all/ — full component API reference
+- https://vuetifyjs.com/en/features/theme/ — theme and color configuration
+- https://vuetifyjs.com/en/features/treeshaking/ — auto-import and bundle optimization
+
+## Related skills
+- ../bootstrap — non-Vue component framework alternative
+- ../tailwind — utility-first CSS often paired with Vue

package/skills/stacks/testing/cypress/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: cypress
+description: Cypress is a JavaScript end-to-end and component testing tool that runs in a real browser with a time-travel debugger, automatic waiting, and network stubbing; consult when writing E2E or component tests, using cy commands and fixtures, intercepting network requests, or configuring cypress.config.
+domain: stack
+category: testing
+tags: [cypress, e2e, javascript, browser-testing, component-testing, automation, web]
+official_sources:
+  - https://docs.cypress.io/app/get-started/why-cypress
+  - https://github.com/cypress-io/cypress
+  - https://www.npmjs.com/package/cypress
+verified: 2026-06-17
+---
+
+# Cypress
+
+## Overview
+Cypress is an open-source, JavaScript-based testing tool that runs end-to-end, component, and integration tests directly inside the browser alongside your app. It executes in the same run loop as the page, giving automatic waiting, time-travel snapshots, and direct DOM/network control. Read this when writing E2E or component tests, stubbing network calls, debugging flaky selectors, or configuring the Cypress runner.
+
+## Official sources
+- Docs: https://docs.cypress.io/app/get-started/why-cypress
+- Repo: https://github.com/cypress-io/cypress
+- Install: https://www.npmjs.com/package/cypress
+
+## Install / setup
+```bash
+npm install cypress --save-dev
+```
+Source: https://docs.cypress.io/app/get-started/install-cypress (open the runner with `npx cypress open`; requires Node.js 20.x, 22.x, or >=24.x).
+
+## Core concepts
+- **`cy` commands** — chained, retriable async actions like `cy.visit()`, `cy.get()`, `cy.click()`.
+- **Automatic retry/waiting** — queries retry until assertions pass, removing most manual waits.
+- **Selectors** — prefer `data-*` attributes via `cy.get('[data-cy=...]')` for stable targeting.
+- **Fixtures** — load static JSON test data with `cy.fixture()`.
+- **Network control** — `cy.intercept()` stubs, spies on, and asserts HTTP requests/responses.
+- **Component testing** — mount framework components in isolation (React, Vue, Angular, Svelte).
+- **Time-travel** — the runner snapshots each command for step-by-step DOM inspection.
+- **Config** — `cypress.config.js` defines `baseUrl`, specs, viewport, and env per testing type.
+
+## Best practices
+- Target elements with dedicated `data-*` attributes, not CSS/text (https://docs.cypress.io/app/core-concepts/best-practices).
+- Do not assign command return values to vars; chain or use aliases (https://docs.cypress.io/app/core-concepts/variables-and-aliases).
+- Set state via API/`cy.request` or tasks rather than UI for speed (https://docs.cypress.io/app/core-concepts/best-practices).
+- Avoid arbitrary `cy.wait(ms)`; wait on aliased routes instead (https://docs.cypress.io/api/commands/wait).
+
+## Common pitfalls
+- Mixing async/await with `cy` chains → use Cypress's command queue and `.then()`, not promises.
+- Tests depend on prior test state → make each spec independent and reset between tests.
+- Flaky `cy.wait(5000)` sleeps → `cy.intercept` a route, alias it, and `cy.wait('@alias')`.
+
+## Examples
+```js
+describe('home page', () => {
+  it('loads and shows the heading', () => {
+    cy.visit('/');
+    cy.get('[data-cy=heading]').should('contain', 'Welcome');
+  });
+});
+```
+
+## Further reading
+- https://docs.cypress.io/api/table-of-contents — full command and assertion API
+- https://docs.cypress.io/app/core-concepts/best-practices — official best-practices guide
+
+## Related skills
+- ../playwright — alternative cross-browser E2E framework with multi-context support
+- ../selenium — WebDriver-based browser automation across languages
+- ../puppeteer — lower-level Chrome/Firefox automation library

package/skills/stacks/testing/jasmine/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: jasmine
+description: Jasmine is a dependency-free behavior-driven JavaScript testing framework for browsers and Node.js with built-in matchers, spies, and async support; consult when writing describe/it specs, using expect matchers and spies, testing async code, or running standalone browser and Node suites.
+domain: stack
+category: testing
+tags: [jasmine, javascript, bdd, node, browser-testing, spies, unit-testing]
+official_sources:
+  - https://jasmine.github.io/
+  - https://github.com/jasmine/jasmine
+  - https://jasmine.github.io/pages/getting_started.html
+verified: 2026-06-17
+---
+
+# Jasmine
+
+## Overview
+Jasmine is a behavior-driven development (BDD) framework for testing JavaScript that has no dependencies on any other framework and needs no DOM. It runs in browsers and Node.js with the same clean `describe`/`it`/`expect` syntax, bundling matchers, spies, clocks, and async helpers out of the box. Read this when writing unit specs, spying on functions, controlling time, or testing asynchronous code without extra assertion libraries.
+
+## Official sources
+- Docs: https://jasmine.github.io/
+- Repo: https://github.com/jasmine/jasmine
+- Install: https://jasmine.github.io/pages/getting_started.html
+
+## Install / setup
+```bash
+npm install --save-dev jasmine
+```
+Source: https://jasmine.github.io/setup/nodejs.html (run `npx jasmine init` to scaffold config, then `npx jasmine`).
+
+## Core concepts
+- **`describe` / `it`** — group specs and define expectations in readable BDD style.
+- **`expect` + matchers** — built-in `toBe`, `toEqual`, `toContain`, `toThrow`, and custom matchers.
+- **Spies** — `spyOn` and `jasmine.createSpy` stub and record function calls and returns.
+- **Setup/teardown** — `beforeEach`/`afterEach`/`beforeAll`/`afterAll` manage shared state.
+- **Async support** — return a promise, `await`, or use the `done` callback.
+- **Clock** — `jasmine.clock()` fakes `setTimeout`/`Date` for deterministic timing.
+- **Configuration** — `spec/support/jasmine.json` defines spec dirs, helpers, and patterns.
+- **Standalone runner** — a browser distribution runs specs without Node tooling.
+
+## Best practices
+- Use `beforeEach` to reset state so specs stay independent (https://jasmine.github.io/tutorials/your_first_suite).
+- Prefer specific matchers and write custom ones for clarity (https://jasmine.github.io/tutorials/custom_matchers).
+- Spy on collaborators rather than calling real side effects (https://jasmine.github.io/tutorials/your_first_suite).
+- Use the clock for time-dependent code instead of real delays (https://jasmine.github.io/tutorials/your_first_suite).
+
+## Common pitfalls
+- Async spec finishes before assertions run → return the promise or call `done()`.
+- Forgetting to install the clock makes timer tests flaky → `jasmine.clock().install()`/`uninstall()`.
+- Shared mutable state leaks across specs → re-initialize in `beforeEach`.
+
+## Examples
+```js
+describe('A suite', () => {
+  it('contains a spec with an expectation', () => {
+    expect(true).toBe(true);
+  });
+});
+```
+
+## Further reading
+- https://jasmine.github.io/tutorials/your_first_suite — first suite walkthrough
+- https://jasmine.github.io/api/edge/global — global matcher and spy API
+
+## Related skills
+- ../mocha — flexible runner needing a separate assertion library
+- ../jest — Jasmine-derived framework with snapshots and built-in mocking
+- ../vitest — Vite-native runner with a Jest-style API

package/skills/stacks/testing/jest/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: jest
+description: Jest is a zero-config JavaScript/TypeScript testing framework with a built-in runner, assertions, mocking, snapshots, and coverage; consult when writing or debugging unit tests, mocking modules, snapshot testing, or configuring jest.config for Babel/TS/React/Vue/Node projects.
+domain: stack
+category: testing
+tags: [jest, javascript, typescript, unit-testing, mocking, snapshot, node]
+official_sources:
+  - https://jestjs.io/docs/getting-started
+  - https://github.com/jestjs/jest
+  - https://www.npmjs.com/package/jest
+verified: 2026-06-17
+---
+
+# Jest
+
+## Overview
+Jest is a JavaScript testing framework focused on simplicity that works out of the box on most projects (Babel, TypeScript, Node, React, Angular, Vue). It bundles a test runner, `expect` assertions, mocking, snapshot testing, and coverage in one tool. Read this when writing unit/integration tests, mocking modules or timers, debugging snapshot mismatches, or configuring Jest for a JS/TS codebase.
+
+## Official sources
+- Docs: https://jestjs.io/docs/getting-started
+- Repo: https://github.com/jestjs/jest
+- Install: https://www.npmjs.com/package/jest
+
+## Install / setup
+```bash
+npm install --save-dev jest
+```
+Source: https://jestjs.io/docs/getting-started (install via your package manager, then run with `npx jest`).
+
+## Core concepts
+- **`test` / `it`** — declare a test; pair with a `describe` block to group related cases.
+- **`expect` matchers** — `toBe`, `toEqual`, `toContain`, `toThrow`, etc. drive assertions.
+- **Snapshot testing** — `toMatchSnapshot()` serializes output to `__snapshots__` and diffs on rerun.
+- **Mock functions** — `jest.fn()`, `jest.spyOn()`, and `jest.mock()` replace dependencies and record calls.
+- **Setup/teardown** — `beforeEach`/`afterEach`/`beforeAll`/`afterAll` manage shared fixtures.
+- **Fake timers** — `jest.useFakeTimers()` controls `setTimeout`/`Date` for deterministic time-based tests.
+- **Parallelism** — tests run in isolated worker processes; use `--runInBand` to debug serially.
+- **Coverage** — add `--coverage` to emit reports with no extra setup.
+
+## Best practices
+- Keep tests isolated and deterministic; reset mocks with `clearMocks: true` (https://jestjs.io/docs/configuration).
+- Prefer explicit matchers over generic `toBe` so failures read clearly (https://jestjs.io/docs/expect).
+- Review snapshots in code review and regenerate intentionally with `--ci`/`-u` (https://jestjs.io/docs/snapshot-testing).
+- Mock only external boundaries (network, fs, time); test real logic (https://jestjs.io/docs/mock-functions).
+
+## Common pitfalls
+- Async test passes despite a failed promise → `return`/`await` the promise or use `resolves`/`rejects`.
+- Stale snapshots hide regressions → run `jest -u` only after verifying the change is intended.
+- Leaked timers/handles hang the run → use fake timers and `--detectOpenHandles`.
+
+## Examples
+```js
+const sum = require('./sum');
+
+test('adds 1 + 2 to equal 3', () => {
+  expect(sum(1, 2)).toBe(3);
+});
+```
+
+## Further reading
+- https://jestjs.io/docs/cli — full CLI flag reference
+- https://jestjs.io/docs/configuration — `jest.config.js` options
+
+## Related skills
+- ../vitest — Vite-native alternative with a Jest-compatible API
+- ../mocha — flexible runner often paired with a separate assertion library
+- ../jasmine — BDD framework Jest's API descends from

package/skills/stacks/testing/mocha/SKILL.md

@@ -0,0 +1,71 @@
+---
+name: mocha
+description: Mocha is a flexible JavaScript test framework for Node.js and the browser that runs tests serially with rich async support and pluggable assertions/reporters; consult when structuring describe/it suites, choosing an assertion library like Chai, testing async code, or configuring .mocharc.
+domain: stack
+category: testing
+tags: [mocha, javascript, node, test-runner, bdd, async, chai]
+official_sources:
+  - https://mochajs.org/
+  - https://github.com/mochajs/mocha
+  - https://mochajs.org/getting-started/
+verified: 2026-06-17
+---
+
+# Mocha
+
+## Overview
+Mocha is a feature-rich JavaScript test framework that runs on Node.js and in the browser, making asynchronous testing simple. It provides the test structure (`describe`/`it`), hooks, and reporters but leaves assertions to a library of your choice (commonly Chai). Tests run serially for accurate reporting and correct mapping of uncaught exceptions. Read this when organizing suites, testing promises/callbacks, picking reporters, or configuring Mocha.
+
+## Official sources
+- Docs: https://mochajs.org/
+- Repo: https://github.com/mochajs/mocha
+- Install: https://mochajs.org/getting-started/
+
+## Install / setup
+```bash
+npm install --save-dev mocha
+```
+Source: https://mochajs.org/getting-started/ (Mocha 11.x — current latest, 11.7.x — requires Node.js `^18.18.0 || ^20.9.0 || >=21.1.0`; the upcoming v12, still in beta, will require `^20.19.0 || >=22.12.0`; run with `npx mocha`).
+
+## Core concepts
+- **`describe` / `it`** — group suites and declare individual test cases (BDD-style).
+- **Hooks** — `before`, `after`, `beforeEach`, `afterEach` set up and tear down state.
+- **Async support** — return a promise, `await`, or call the `done` callback to test async code.
+- **Pluggable assertions** — bring Chai, Node's `assert`, or another library; Mocha ships none.
+- **Reporters** — `spec`, `dot`, `tap`, `json`, etc. format results via `--reporter`.
+- **Exclusivity/skip** — `.only` and `.skip` focus or omit suites and tests.
+- **Configuration** — `.mocharc.{js,json,yml}` sets specs, timeouts, requires, and flags.
+- **Browser support** — runs the same tests in browsers alongside Node.
+
+## Best practices
+- Use `--require` to load Babel/TS or setup hooks consistently (https://mochajs.org/interfaces/require/).
+- Set realistic timeouts per slow test rather than globally inflating them (https://mochajs.org/features/timeouts/).
+- Avoid arrow functions when you need Mocha's `this` context for timeouts (https://mochajs.org/features/arrow-functions/).
+- Return promises instead of mixing `done` with async/await (https://mochajs.org/features/asynchronous-code/).
+
+## Common pitfalls
+- Calling `done()` and returning a promise both → pick one async style, not both.
+- Arrow-function tests break `this.timeout()` → use `function () { ... }`.
+- Unhandled rejection passes silently → always `await`/return the async assertion.
+
+## Examples
+```js
+const assert = require('assert');
+
+describe('Array', () => {
+  describe('#indexOf()', () => {
+    it('returns -1 when the value is not present', () => {
+      assert.equal([1, 2, 3].indexOf(4), -1);
+    });
+  });
+});
+```
+
+## Further reading
+- https://mochajs.org/running/cli/ — CLI flags and config
+- https://www.chaijs.com/ — Chai assertion library commonly paired with Mocha
+
+## Related skills
+- ../jasmine — batteries-included BDD framework with built-in assertions
+- ../jest — all-in-one runner with bundled assertions and mocking
+- ../vitest — Vite-native runner with a Jest-style API

package/skills/stacks/testing/playwright/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: playwright
+description: Playwright is a Microsoft framework for cross-browser web testing and automation across Chromium, Firefox, and WebKit with auto-waiting, tracing, and parallel execution; consult when writing E2E tests, using locators and web-first assertions, generating tests with codegen, or configuring playwright.config.
+domain: stack
+category: testing
+tags: [playwright, e2e, cross-browser, automation, typescript, web-testing, microsoft]
+official_sources:
+  - https://playwright.dev/docs/intro
+  - https://github.com/microsoft/playwright
+  - https://www.npmjs.com/package/playwright
+verified: 2026-06-17
+---
+
+# Playwright
+
+## Overview
+Playwright is a framework for web testing and automation that drives Chromium, Firefox, and WebKit through a single API, with bindings for Node.js, Python, Java, and .NET. Its test runner adds auto-waiting locators, web-first assertions, isolated browser contexts, tracing, and parallelism. Read this when writing cross-browser E2E tests, recording tests with codegen, debugging flakiness with traces, or configuring projects/devices.
+
+## Official sources
+- Docs: https://playwright.dev/docs/intro
+- Repo: https://github.com/microsoft/playwright
+- Install: https://www.npmjs.com/package/playwright
+
+## Install / setup
+```bash
+npm init playwright@latest
+```
+Source: https://playwright.dev/docs/intro (scaffolds config, examples, and installs browsers; add browsers later with `npx playwright install --with-deps`).
+
+## Core concepts
+- **Locators** — `page.getByRole`/`getByText`/`locator()` are lazy and auto-retry until actionable.
+- **Web-first assertions** — `expect(locator).toBeVisible()` polls until the condition holds or times out.
+- **Browser contexts** — lightweight isolated sessions give each test fresh cookies/storage in parallel.
+- **Fixtures** — the test runner injects `page`, `context`, `request`, and custom fixtures per test.
+- **Auto-waiting** — actions wait for elements to be visible, stable, and enabled before acting.
+- **Trace viewer** — `--trace on` records DOM, network, and actions for post-mortem debugging.
+- **Codegen** — `npx playwright codegen` records interactions into runnable test code.
+- **Projects** — config matrix runs the same suite across browsers, devices, and viewports.
+
+## Best practices
+- Prefer role/label/text locators over CSS/XPath for resilient, user-facing tests (https://playwright.dev/docs/locators).
+- Use web-first `expect` assertions instead of manual waits (https://playwright.dev/docs/test-assertions).
+- Keep tests isolated via contexts; share auth state with `storageState` (https://playwright.dev/docs/auth).
+- Enable traces/retries in CI to triage flakes (https://playwright.dev/docs/test-retries).
+
+## Common pitfalls
+- Manual `waitForTimeout` sleeps → rely on auto-waiting locators and `expect` polling.
+- Brittle CSS selectors break on markup changes → use `getByRole`/`getByTestId`.
+- Forgetting `await` on actions/assertions → every Playwright call returns a promise.
+
+## Examples
+```ts
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+  await expect(page).toHaveTitle(/Playwright/);
+});
+```
+
+## Further reading
+- https://playwright.dev/docs/test-configuration — `playwright.config` and projects
+- https://playwright.dev/docs/trace-viewer — debugging with traces
+
+## Related skills
+- ../cypress — in-browser E2E alternative with a time-travel debugger
+- ../selenium — WebDriver-standard automation across many languages
+- ../puppeteer — lower-level Chrome/Firefox control library

package/skills/stacks/testing/puppeteer/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: puppeteer
+description: Puppeteer is a Node.js library providing a high-level API to control Chrome or Firefox via DevTools Protocol or WebDriver BiDi for automation, scraping, PDFs, and headless testing; consult when launching browsers, navigating pages, evaluating DOM, intercepting requests, or capturing screenshots.
+domain: stack
+category: testing
+tags: [puppeteer, headless-chrome, automation, node, scraping, devtools-protocol, screenshots]
+official_sources:
+  - https://pptr.dev/guides/getting-started
+  - https://github.com/puppeteer/puppeteer
+  - https://pptr.dev/guides/installation
+verified: 2026-06-17
+---
+
+# Puppeteer
+
+## Overview
+Puppeteer is a JavaScript library that provides a high-level API to control Chrome or Firefox over the DevTools Protocol or WebDriver BiDi. It runs headless by default and is used for browser automation, end-to-end testing, scraping, generating PDFs/screenshots, and pre-rendering. Read this when launching and driving a browser, navigating and evaluating pages, intercepting network traffic, or capturing rendered output from Node.js.
+
+## Official sources
+- Docs: https://pptr.dev/guides/getting-started
+- Repo: https://github.com/puppeteer/puppeteer
+- Install: https://pptr.dev/guides/installation
+
+## Install / setup
+```bash
+npm i puppeteer
+```
+Source: https://pptr.dev/guides/installation (downloads a compatible Chrome for Testing; use `puppeteer-core` to skip the browser download).
+
+## Core concepts
+- **Browser / Page** — `puppeteer.launch()` opens a browser; `browser.newPage()` creates tabs.
+- **Navigation** — `page.goto()` with `waitUntil` controls load completion.
+- **`page.evaluate`** — runs functions in the page context to read or manipulate the DOM.
+- **Selectors & waits** — `page.waitForSelector()`, `$`, and `$$` locate elements reliably.
+- **Request interception** — `page.setRequestInterception(true)` to block, mock, or modify requests.
+- **Screenshots & PDFs** — `page.screenshot()` and `page.pdf()` capture rendered output.
+- **Headless modes** — runs headless by default; pass `headless: false` to watch interactively.
+- **Chrome for Testing** — a pinned browser auto-downloaded for reproducible automation.
+
+## Best practices
+- Always `await browser.close()` (use try/finally) to avoid leaked processes (https://pptr.dev/guides/getting-started).
+- Wait on selectors/network, not arbitrary timeouts, before interacting (https://pptr.dev/guides/page-interactions).
+- Use `puppeteer-core` plus a managed browser in CI/Docker (https://pptr.dev/guides/installation).
+- Keep page-context code in `evaluate` pure; it is serialized and cannot close over Node vars (https://pptr.dev/guides/evaluate-javascript).
+
+## Common pitfalls
+- `evaluate` callback can't see outer variables → pass them as `evaluate` arguments.
+- Acting before the element exists → `await page.waitForSelector()` first.
+- Forgetting to close the browser leaks Chrome processes → close in a `finally` block.
+
+## Examples
+```js
+import puppeteer from 'puppeteer';
+
+const browser = await puppeteer.launch();
+const page = await browser.newPage();
+await page.goto('https://example.com');
+const title = await page.title();
+console.log(title);
+await browser.close();
+```
+
+## Further reading
+- https://pptr.dev/api — full Page/Browser API reference
+- https://pptr.dev/guides/request-interception — mocking and blocking requests
+
+## Related skills
+- ../playwright — multi-browser successor with a built-in test runner and auto-waiting
+- ../selenium — WebDriver-standard automation across many languages
+- ../cypress — in-browser E2E testing framework