# Tooling > Development workflow, verification, and scaffolding. Lint/format/typecheck, CI, agent verification, Vite+ frontend toolchain, greenfield scaffolds, and npx command reference. Use after `techstack` decides the product-domain stack. - Skill: `keejkrej/tooling` (Agent Skill, multi-file: 10 files) - Install (CLI): `npx skillmds@latest add keejkrej/tooling` - Raw SKILL.md: https://api.skillmd.com/api/skills/keejkrej/tooling/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: keejkrej (https://skillmd.com/u/keejkrej) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/keejkrej/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](domains/dev.md) - Frontend build toolchain (Vite+, Tailwind, component install) → [domains/frontend.md](domains/frontend.md) - Greenfield starter structures → [scaffolds/README.md](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 ` - 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 `, `fill `, `type `, `press `, `check `, `hover `, `select ` - Dev probes: `npx @playwright/cli eval "() => document.title"`, `npx @playwright/cli console [min-level]` - Tabs: `tab-list`, `tab-new [url]`, `tab-select `, `tab-close [index]` - Network: `route `, `route-list`, `unroute [pattern]`, `requests`, `request ` - Sessions: `-s=` / `--session=`; `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 ` (target path), `-c ` (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 && 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 `