Configuration and environment variable conventions for the Playwright scaffold — env file layout (env/.env.), dotenv loading via playwright.config.ts and the ENVIRONMENT variable, config objects in…

MITAuto-check: notesTesting & QA

Install Config

skills CLI
$ npx skills add idavidov13/agentic-playwright --skill config -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install idavidov13/agentic-playwright config --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/idavidov13/agentic-playwright.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/config .claude/skills/config && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
config
GitHub stars
223
Token cost
~2.8k tokens
SKILL.md length
1,097 words
Files
1
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

Configuration and environment variable conventions for the Playwright scaffold — env file layout (env/.env.), dotenv loading via playwright.config.ts and the ENVIRONMENT variable, config objects in…

  • Works in 5 steps: Understand how env files are loaded → Decide where the new value belongs → Add the env var to env/.env.example → …
  • Adding a new environment variable
  • SKILL.md covers Critical, File Locations, Instructions and Examples, plus 2 more sections
  • Calls npx and git; needs ACCESS_TOKEN and APP_PASSWORD

What it does

Config is an agent skill from idavidov13/agentic-playwright. Configuration and environment variable conventions for the Playwright scaffold — env file layout (env/.env.), dotenv loading via playwright.config.ts and the ENVIRONMENT variable, config objects in config/app.ts and config/util/util.ts, and the rules for adding new env-driven values. Use when adding a new environment variable, a new config property, a new environment file, a new utility-service URL, or when a test/fixture needs to consume APPURL / APIURL / APPEMAIL / APPPASSWORD / UTILITYURL. This skill owns…

Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Testing & QA, covering Secrets management, Browser testing and Type safety. It works with Playwright. The repository describes itself as: Production-grade Playwright + TypeScript Scaffold for Agentic Testing. Harness for all major AI coding agents baked in. The licence is MIT.

When your agent uses it

  • Adding a new environment variable
  • A new config property
  • A new environment file
  • A new utility-service URL

Example prompts

  • “/config”

Requirements

  • Node.js
  • A credential in ACCESS_TOKEN

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Understand how env files are loaded
  2. Decide where the new value belongs
  3. Add the env var to env/.env.example
  4. Add the config property (only if warranted) with JSDoc
  5. Consume the value from tests, fixtures, and helpers

What it can do on your machine

Read from SKILL.md and the folder at commit f6cbf35. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • git

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx and git, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • ACCESS_TOKEN
    • APP_PASSWORD

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Config loads about 2.8k tokens when it runs. Until then it costs about 180 tokens; SKILL.md has 1,097 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~180
When it runs · the whole SKILL.md, loaded when a task matches
~2.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:3
    aywright scaffold — env file layout (env/.env.*), dotenv loading via playwright.config.ts and the ENVIRONMENT variable,
  • NoteMentions a .env fileSKILL.md:11
    alues is `process.env.*`, backed by `env/.env.${environment}`.
  • NoteMentions a .env fileSKILL.md:16
    - **NEVER** commit `env/.env.dev`, `env/.env.staging`, or any other real env file containing credentials. Only `env/.env
  • NoteMentions a .env fileSKILL.md:25
    | Env (active)   | `env/.env.${ENVIRONMENT}` | Real values, selected at runtime (`.env.dev` etc.) — untracked |
  • NoteMentions a .env fileSKILL.md:35
    const environmentPath = `./env/.env.${environment}`;
  • NoteMentions a .env fileSKILL.md:41
    Default environment is `dev` (file `env/.env.dev`).
  • NoteMentions a .env fileSKILL.md:44
    hell** level; it is not declared in any `.env` file.
  • NoteMentions a .env fileSKILL.md:80
    real value to your active env file (`env/.env.dev` or similar) — this file is untracked.
  • NoteMentions a .env fileSKILL.md:151
    2. Create `env/.env.staging` **locally** (untracked) with the real staging URLs/credentials, using the same keys as `env
  • NoteMentions a .env fileSKILL.md:153
    haven't changed) and **do not** commit `.env.staging`.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from idavidov13/agentic-playwright at commit f6cbf35, republished under its MIT licence (© idavidov13). 1,097 words, ~2,827 tokens.

Download SKILL.mdSave it as .claude/skills/config/SKILL.md (or your agent's skills folder).
name
config
description
Configuration and environment variable conventions for the Playwright scaffold — env file layout (env/.env.*), dotenv loading via playwright.config.ts and the ENVIRONMENT variable, config objects in config/app.ts and config/util/util.ts, and the rules for adding new env-driven values. Use when adding a new environment variable, a new config property, a new environment file, a new utility-service URL, or when a test/fixture needs to consume APP_URL / API_URL / APP_EMAIL / APP_PASSWORD / UTILITY_URL. This skill owns URLs, credentials, and env-driven settings — for endpoint paths and route constants use the enums skill, and for process.env.* typing (non-null assertion vs fallback) use the type-safety skill.
author
Ivan Davidov

Configuration

Critical

  • NEVER hardcode URLs, tokens, emails, or passwords anywhere in the scaffold. The only source of truth for env-driven values is process.env.*, backed by env/.env.${environment}.
  • NEVER hardcode endpoint paths or route strings in config/. Paths belong in enums/{area}/* (see the enums skill).
  • ALWAYS add every new env variable to env/.env.example with a safe placeholder — no real secrets, no production URLs.
  • ALWAYS add a JSDoc comment on every config property describing the value and the backing env var.
  • ALWAYS keep app-facing URLs/settings in config/app.ts and utility/third-party services in config/util/util.ts. Do not create ad-hoc config files elsewhere.
  • NEVER commit env/.env.dev, env/.env.staging, or any other real env file containing credentials. Only env/.env.example is tracked.

File Locations

TypeDirectoryPurpose
App configconfig/app.tsURLs and settings for the main application
Utility configconfig/util/util.tsUtility / third-party service configuration
Env templateenv/.env.exampleTracked template — safe placeholders only
Env (active)env/.env.${ENVIRONMENT}Real values, selected at runtime (.env.dev etc.) — untracked

Instructions

Phase 1: Understand how env files are loaded

playwright.config.ts loads env values via dotenv at startup:

typescript
const environment = process.env.ENVIRONMENT ?? 'dev';
const environmentPath = `./env/.env.${environment}`;
dotenv.config({ path: environmentPath });

Consequences:

  • Default environment is dev (file env/.env.dev).
  • Override with a shell variable: ENVIRONMENT=staging npx playwright test.
  • The selected file must exist — missing files silently load nothing and every process.env.* becomes undefined.
  • ENVIRONMENT itself is set at the shell level; it is not declared in any .env file.
Phase 2: Decide where the new value belongs

Use this decision table before adding anything:

Value kindHome
URL of the main app under testenv var + config/app.ts (appConfig.appUrl, apiUrl)
URL of a utility / third-party serviceenv var + config/util/util.ts (utilityConfig.*)
Credential (email, password, API key, token seed)env var only — do not expose through a config object
Endpoint path (e.g. /api/users) or route (e.g. /login)enums/{area}/* — not config/ and not an env var
Storage-state file pathenums/{area}/* (e.g. StorageStatePaths) — not config/
Timeout / retry / workers tuningplaywright.config.ts — not config/ unless reused outside Playwright
Runtime selector (ENVIRONMENT, CI)Shell-level env var only — not .env.example

If the value fits none of the rows above, stop and ask — do not invent a new config file.

Phase 3: Add the env var to env/.env.example

Every env var the scaffold relies on must appear in the tracked template with a safe placeholder:

APP_URL=https://your-app-url.com
API_URL=https://your-api-url.com
APP_EMAIL=your-email@example.com
APP_PASSWORD=your-secure-password
UTILITY_URL=https://your-utility-service.com

Rules for the placeholder:

  • No real domains, no real tokens, no real passwords.
  • Same key name as the eventual process.env.* lookup (exact case).
  • Group related variables under a short comment header (see existing groupings).

Then add the real value to your active env file (env/.env.dev or similar) — this file is untracked.

Phase 4: Add the config property (only if warranted) with JSDoc

Not every env var gets a config-object slot. Credentials (APP_EMAIL, APP_PASSWORD, tokens) stay env-only. URLs and infra settings that the scaffold wants to document do go into a config object.

config/app.ts — app-facing URLs and settings:

typescript
/**
 * Application configuration object.
 * Contains URL configuration for the main application.
 *
 * For route paths and API endpoints, use enums from `enums/app/app.ts`.
 */
export const appConfig = {
    /** Frontend application URL loaded from APP_URL env variable */
    appUrl: process.env.APP_URL,
    /** Backend API URL loaded from API_URL env variable */
    apiUrl: process.env.API_URL,
};

config/util/util.ts — utility / third-party services:

typescript
/**
 * Utility service configuration object.
 * Contains URL configuration for utility/helper services.
 *
 * For API endpoints, use enums from `enums/` folder.
 */
export const utilityConfig = {
    /** Utility service base URL */
    baseUrl: process.env.UTILITY_URL,
};

Every property requires a JSDoc comment naming the backing env var.

Phase 5: Consume the value from tests, fixtures, and helpers

Two equally valid access patterns exist in the scaffold today:

  1. Direct process.env.* access — the dominant pattern in tests, fixtures, and helpers:

    typescript
    baseUrl: process.env.API_URL,
    headers: process.env.ACCESS_TOKEN,
    body: { email: process.env.APP_EMAIL, password: process.env.APP_PASSWORD },
  2. Config-object access — used when you want to import a documented, organized surface:

    typescript
    import { appConfig } from '../../config/app';
    
    await page.goto(appConfig.appUrl!);

Pick whichever fits the call site; do not mix them inside a single file without reason. For how to satisfy the TypeScript string | undefined that process.env.* returns — non-null assertion (!) vs fallback default — see the type-safety skill.

Examples

Example 1: Add a new staging environment

User says: "Add a staging environment pointing at the staging cluster."

Actions:

  1. Phase 1 — Confirm playwright.config.ts already honors ENVIRONMENT; no code change needed.
  2. Create env/.env.staging locally (untracked) with the real staging URLs/credentials, using the same keys as env/.env.example.
  3. Run ENVIRONMENT=staging npx playwright test to verify the file loads.
  4. Do not modify env/.env.example (the key names haven't changed) and do not commit .env.staging.
Show full SKILL.md (450 more words)Show less
Example 2: Add a new utility-service URL

User says: "Wire up the reporting service URL so helpers can post run results."

Actions:

  1. Phase 2 — It's a utility-service URL → belongs in config/util/util.ts as a property of utilityConfig; env var REPORTING_URL.

  2. Phase 3 — Add to env/.env.example:

    # Optional: Additional service URLs
    UTILITY_URL=https://your-utility-service.com
    REPORTING_URL=https://your-reporting-service.com
  3. Phase 4 — Extend config/util/util.ts:

    typescript
    export const utilityConfig = {
        /** Utility service base URL */
        baseUrl: process.env.UTILITY_URL,
        /** Reporting service base URL loaded from REPORTING_URL env variable */
        reportingUrl: process.env.REPORTING_URL,
    };
  4. Phase 5 — Import utilityConfig.reportingUrl in the helper that posts results; follow the type-safety skill for ! vs fallback handling.

Troubleshooting

process.env.X is undefined at runtime. Cause: The key is missing from the active env file, or the active env file doesn't exist. Fix: Confirm the key exists in env/.env.${ENVIRONMENT} (default env/.env.dev). If you renamed or added a key, also update env/.env.example.

Wrong environment is being loaded. Cause: ENVIRONMENT is unset, misspelled, or points at a missing file. Fix: playwright.config.ts defaults to dev. Set ENVIRONMENT=staging in the shell (not in an .env file) before running tests; confirm env/.env.staging exists.

I can't find ACCESS_TOKEN / ACCESS_TOKEN_ZERO in env/.env.example. Cause: These tokens are populated dynamically by an auth-bootstrap helper, not committed. Fix: In the scaffold's demo setup, an auth-bootstrap helper under helpers/{area}/ logs in and writes the token into process.env.ACCESS_TOKEN before the main suite runs. Do not add the token to env/.env.example. See the helpers skill (Phase 6) for the pattern.

TypeScript complains that process.env.X is string | undefined. Cause: process.env values are always optional types in Node. Fix: See the type-safety skill for the two sanctioned patterns (non-null assertion with ! for values guaranteed to exist at runtime; fallback default with ?? otherwise).

I want to put an endpoint path in a config file. Cause: Wrong skill. Paths are source-controlled constants, not environment-driven settings. Fix: Add the path to enums/{area}/* (see the enums skill). config/ is only for URLs, credentials, and infra settings.

My new config property has no JSDoc and the PR review is blocking. Fix: Every config property requires a JSDoc comment naming the backing env var, e.g. /** Reporting service base URL loaded from REPORTING_URL env variable */.

I accidentally committed env/.env.dev. Fix: Remove the file from the commit (git rm --cached env/.env.dev), verify it's covered by .gitignore, rotate any credentials that were exposed, and push the fix.

See Also

  • enums skill — endpoint paths, route constants, and storage-state paths live there, not in config/.
  • type-safety skill — handling string | undefined returned by process.env.* (! vs fallback defaults).
  • api-testing skill — which env vars tests consume (API_URL, ACCESS_TOKEN, ACCESS_TOKEN_ZERO, APP_EMAIL, APP_PASSWORD) and how.
  • debugging skill — when process.env.X is undefined at runtime, when a CI run reads different env values than local, or when a navigation times out because APP_URL is wrong.

© idavidov13, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/config of idavidov13/agentic-playwright.

Open the folder on GitHubat commit f6cbf35

Compare with similar skills

Config next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Config compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Config this skillidavidov13/agentic-playwright223—~2.8kAutomated safety check: NotesMIT
Proxy Setupasmyshlyaev177/test-proxy-recorder112—~4.3kAutomated safety check: PassMIT
Redmine Playwright Loginharu/redmine_ai_helper106—~796Automated safety check: PassMIT
Testing Patternsbybren-llc/safe-agentic-workflow421—~1.5kAutomated safety check: NotesMIT
Electron Best Practicesjwynia/agent-skills166—~3.1kAutomated safety check: PassMIT
Playwright E2E Builderdavila7/claude-code-templates32k—~5.3kAutomated safety check: NotesMIT

Similar skills

  • Proxy Setup

    asmyshlyaev177/test-proxy-recorder

    Set up test-proxy-recorder for any Playwright project. An agent skill from asmyshlyaev177/test-proxy-recorder.

    112 GitHub stars~4.3k tokensUpdated 5 days ago
    Testing & QAAuto-check passed
  • Redmine Playwright Login

    haru/redmine_ai_helper

    Connect to the running Redmine instance and log in via the Playwright MCP browser, using REDMINEPLAYRIGHTURL/REDMINEPLAYRIGHTUSER/REDMINEPLAYRIGHTPASSWORD environment variables.

    106 GitHub stars~796 tokensUpdated today
    Testing & QAAuto-check passed
  • Testing Patterns

    bybren-llc/safe-agentic-workflow

    Testing patterns for Jest and Playwright. An agent skill from bybren-llc/safe-agentic-workflow.

    421 GitHub stars~1.5k tokensUpdated 2 mo ago
    Testing & QAAuto-check: notes
  • Electron Best Practices

    jwynia/agent-skills

    Guide AI agents through Electron app development with React including security patterns, type-safe IPC, React integration, packaging with code signing, and testing.

    166 GitHub stars~3.1k tokensUpdated 7 mo ago
    MobileAuto-check passed
  • Playwright E2E Builder

    davila7/claude-code-templates

    Plan and build comprehensive Playwright E2E test suites with Page Object Model, authentication state persistence, custom fixtures, visual regression, and CI integration.

    32k GitHub stars~5.3k tokensUpdated today
    Testing & QAAuto-check: notes
  • Playwright Test

    AI-Unified-Process/marketplace

    Creates Playwright browser-based tests for Vaadin views using the Drama Finder library for type-safe element wrappers with accessibility-first APIs.

    141 GitHub stars~3.8k tokensUpdated 3 days ago
    Testing & QAAuto-check: warnings

More from idavidov13/agentic-playwright

All 13 skills in this repo
  • AI Native Workflow

    idavidov13/agentic-playwright

    Sole entry-point router for AI-assisted work on this Playwright scaffold — owns the 8-phase main workflow (classify → route → explore → plan+confidence → human gate → apply → verify → report), the…

    223 GitHub stars~3.5k tokensUpdated 7 days ago
    Auto-check passed
  • Common Tasks

    idavidov13/agentic-playwright

    Copy-paste AI prompt templates for common Playwright scaffold development tasks — adding page objects, functional/E2E/API tests, Zod schemas, factories, fixtures, and components.

    223 GitHub stars~2.5k tokensUpdated 7 days ago
    Auto-check passed
  • Data Strategy

    idavidov13/agentic-playwright

    Test data strategy for the Playwright scaffold — Faker + Zod factories for dynamic happy-path data, static TS files (.ts with as const exports — never .json) for domain-specific curated invalid…

    223 GitHub stars~3.4k tokensUpdated 7 days ago
    Auto-check passed
  • Page Objects

    idavidov13/agentic-playwright

    Page Object Model pattern for the Playwright scaffold — class structure, get-accessor locator pattern, action-method conventions, component composition, registration via the page-object fixture, and…

    223 GitHub stars~3.6k tokensUpdated 7 days ago
    Auto-check passed
  • Selectors

    idavidov13/agentic-playwright

    Selector strategy, exploration-first workflow, locator priority order (getByRole then getByLabel then getByPlaceholder then getByText then getByTestId), and feedback/validation-message selector…

    223 GitHub stars~2.7k tokensUpdated 7 days ago
    Auto-check passed
  • Test Standards

    idavidov13/agentic-playwright

    Spec file conventions for the Playwright scaffold — imports from test-options.ts, test file structure (describe / beforeEach / test / test.step), single-tag rule, functional vs E2E vs API vs setup…

    223 GitHub stars~3.9k tokensUpdated 7 days ago
    Auto-check passed

Works with

Questions about Config

What does Config do?

Configuration and environment variable conventions for the Playwright scaffold — env file layout (env/.env.), dotenv loading via playwright.config.ts and the ENVIRONMENT variable, config objects in…. Config is an agent skill from idavidov13/agentic-playwright.ts, and the rules for adding new env-driven values.

When should I use Config?

Config fits situations like: adding a new environment variable; A new config property; A new environment file; A new utility-service URL.

How do I install Config in Claude Code?

Run `npx skills add idavidov13/agentic-playwright --skill config -a claude-code`. Or copy the skill folder (.claude/skills/config in idavidov13/agentic-playwright) into .claude/skills/config in your project. Claude Code loads it when a task matches its description.

How do I install Config in Codex?

Run `npx skills add idavidov13/agentic-playwright --skill config -a codex`. Or copy the skill folder (.claude/skills/config in idavidov13/agentic-playwright) into .agents/skills/config in your project. Codex loads it when a task matches its description.

Can I use Config in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add idavidov13/agentic-playwright --skill config -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/config, .gemini/skills/config, .github/skills/config and .opencode/skills/config in your project.

What does Config need to run?

Going by SKILL.md and its folder, Config needs the command-line tools its instructions call (npx and git) and credentials named ACCESS_TOKEN and APP_PASSWORD. Our summary lists: Node.js; A credential in ACCESS_TOKEN.

Does Config access the network?

SKILL.md contains no URLs. Its commands use npx and git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Config safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Config use?

Config is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Config use?

About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Config?

Skills that share tags, products or a category with Config: Proxy Setup (asmyshlyaev177/test-proxy-recorder, 112 stars), Redmine Playwright Login (haru/redmine_ai_helper, 106 stars), Testing Patterns (bybren-llc/safe-agentic-workflow, 421 stars) and Electron Best Practices (jwynia/agent-skills, 166 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Config?

idavidov13 (a GitHub user) maintains it in idavidov13/agentic-playwright, which has 223 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 1, 2026.

Source: idavidov13/agentic-playwright on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.