Tooling

Tooling

How to develop, verify, and scaffold projects. Complements techstack, which decides what libraries and runtimes to use.

Domains

• Development conventions (lint, format, typecheck, CI, package managers, supply-chain gating) → domains/dev.md
• Frontend build toolchain (Vite+, Tailwind, component install) → domains/frontend.md
• Greenfield starter structures → scaffolds/README.md

npx command reference

Quick invocations for agent-focused CLI tools. For strategy on when to use each, see the domains above.

Global usage rule

• Run these tools via npx; do not install them globally unless a repo convention requires it

Browser automation adoption

Default to agent-browser for agent-driven tasks; fall back to @playwright/cli only when compatibility requires it; reserve full Playwright for CI test suites.

• Choose agent-browser when: navigating, scraping, form filling, screenshotting, or interacting with live sites as an agent. It uses compact accessibility-tree snapshots (@eN refs), supports batch commands, auth vaults, network capture, HAR recording, iOS simulator, and an MCP server.
• Choose @playwright/cli when: agent-browser fails on a specific site (e.g., due to engine differences), or a project already standardizes on Playwright and you want a token-efficient CLI with the same semantics.
• Choose full Playwright (npx playwright test / Python playwright) when: writing durable test suites, CI assertions, page-object models, or multi-browser matrices. This lives in the project codebase, not ad-hoc agent commands.
• Don't install globally: invoke via npx unless the repo pins a specific version in package.json or a CI workflow.
• Workflow pattern: open → snapshot -i → interact by @eN ref → re-snapshot after navigation or DOM changes. Use batch for 2+ sequential commands.
• Auth: prefer state persistence (--session-name, --profile, or state save/load) and the auth vault for recurring logins; avoid hardcoding credentials in commands.

npx @playwright/cli

Token-efficient Playwright CLI for coding agents. Also invokable as npx playwright-cli.

• Help / skills: npx @playwright/cli --help; npx @playwright/cli install --skills
• Open / navigate: npx @playwright/cli open [url]; npx @playwright/cli goto <url>
• Snapshot: npx @playwright/cli snapshot or npx @playwright/cli snapshot --filename=f
• Screenshot: npx @playwright/cli screenshot [ref] --filename=f
• Interact by ref or selector: click <ref>, fill <ref> <text>, type <text>, press <key>, check <ref>, hover <ref>, select <ref> <value>
• Dev probes: npx @playwright/cli eval "() => document.title", npx @playwright/cli console [min-level]
• Tabs: tab-list, tab-new [url], tab-select <index>, tab-close [index]
• Network: route <pattern>, route-list, unroute [pattern], requests, request <num>
• Sessions: -s=<name> / --session=<name>; list; close-all; --persistent to keep profile on disk
• Browser: --headed, --browser=chrome|firefox|webkit|msedge
• Full test suites → main playwright package (npx playwright test) or Python playwright; deeper workflows → webapp-testing skill

npx agent-browser

Browser automation CLI built for agents. Compact accessibility-tree snapshots with element refs (@eN).

• Install Chrome first run: npx agent-browser install
• Open a page: npx agent-browser open example.com
• Snapshot: npx agent-browser snapshot -i
• Click by ref: npx agent-browser click @e2
• Fill by ref: npx agent-browser fill @e2 "text"
• Screenshot: npx agent-browser screenshot page.png
• Close: npx agent-browser close
• Also ships as an MCP server → https://agent-browser.dev

npx ctx7

Context7 CLI for up-to-date library docs.

• Help: npx ctx7 --help
• Discover library ID: npx ctx7 library react "How to clean up useEffect"
• Query by ID: npx ctx7 docs /facebook/react "How to use hooks"
• Versioned query: npx ctx7 docs /vercel/next.js/v14.3.0-canary.87 "app router setup"
• JSON output: append --json
• Setup: npx ctx7 setup --mcp --claude or npx ctx7 setup --cli --claude
• Auth: npx ctx7 login or export CONTEXT7_API_KEY=...
• Telemetry opt-out: CTX7_TELEMETRY_DISABLED=1 npx ctx7 ...
• Library IDs always start with /

npx shadcn

shadcn/ui CLI. Adds copy-paste components into an existing project; can also scaffold a new project with init.

• Help: npx shadcn@latest --help
• Init in existing project: npx shadcn@latest init
• Scaffold new project: npx shadcn@latest init --name my-app (or npx shadcn@latest create, alias for init)
• Init with template and preset: npx shadcn@latest init -t next --preset nova
• Add components: npx shadcn@latest add button card input label
• Add all components: npx shadcn@latest add --all
• Add from a registry namespace: npx shadcn@latest add @acme/button
• Inspect before writing: npx shadcn@latest add button --dry-run / --diff / --view
• Common flags: -y (skip prompts), -o / --overwrite, -p <path> (target path), -c <cwd> (working dir)

npx create-astro

Astro static-site scaffolding CLI.

• Scaffold interactively: npx create-astro@latest
• Use a template: npx create-astro@latest --template [name]
• Skip install: npx create-astro@latest --no-install
• Skip git init: npx create-astro@latest --no-git
• Install dependencies after scaffold: cd <project> && bun install

npx create-turbo

Turborepo scaffolding CLI.

• Scaffold interactively: npx create-turbo@latest
• Pick package manager: npx create-turbo@latest -m bun
• Use an example: npx create-turbo@latest --example [name|github-url]
• Example subdirectory: npx create-turbo@latest --example [github-url] --example-path foo/bar
• Skip install: npx create-turbo@latest --skip-install
• Skip code transforms: npx create-turbo@latest --skip-transforms
• Pin turbo version: npx create-turbo@latest --turbo-version <version>