Unofficial Claude Code

https://github.com/zebbern/claude-code-guide
Admin
Claude Code is an AI-powered command-line interface that brings Claude's capabilities to your...
Tokens:1,175,820
Snippets:7,930
Trust Score:8.6
License:MIT
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Example 2: Monitoring Setup

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/pentest-checklist/SKILL.md

Commands to enable comprehensive logging and start packet capture for monitoring during a pentest.

```bash
# Enable comprehensive logging
sudo systemctl restart rsyslog
sudo systemctl restart auditd

# Start packet capture
tcpdump -i eth0 -w /tmp/pentest_capture.pcap &
```

--------------------------------

### Step 2: Execute Day 1 Onboarding - Example Output

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/references/master_qa_prompt.md

Shows the output of executing the Day 1 onboarding checklist, including environment setup tasks like cloning the repository and installing dependencies. Ends with a completion message.

```text
Reading: tests/docs/templates/DAY-1-ONBOARDING-CHECKLIST.md

Starting Hour 1: Environment Setup
Task 1.1: Clone repository
  Executing: git clone https://github.com/your-org/project.git
  Status: ✅ Complete

Task 1.2: Install dependencies
  Executing: pnpm install
  Status: ✅ Complete

[... continues through all 5 hours ...]

Day 1 Onboarding: ✅ COMPLETE
Ready to start Week 1 testing tomorrow.
```

--------------------------------

### Example: CLI Install Test

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/assets/templates/TEST-CASE-TEMPLATE.md

Example test case for installing a skill from GitHub using the CLI. Includes specific commands and expected results.

```markdown
### TC-CLI-001: Install Skill from GitHub Repository

**Priority**: P0
**Type**: Integration
**Estimated Time**: 5 minutes

**Prerequisites**:
- CLI installed globally (`which ccpm` returns path)
- Internet connection active
- `~/.claude/skills/` directory exists or can be created
- No existing installation of `cli-demo-generator`

**Test Steps**:
1. Open terminal
2. Run: `ccpm install cli-demo-generator`
3. Observe success message
4. Run: `ls ~/.claude/skills/`
5. Verify directory exists
6. Run: `cat ~/.claude/skills/cli-demo-generator/package.json`
7. Verify valid JSON with name field

**Expected Result**:
✅ Terminal shows: "Successfully installed cli-demo-generator"
✅ Directory created: `~/.claude/skills/cli-demo-generator/`
✅ package.json exists with valid content
✅ No errors in terminal output

**Pass/Fail Criteria**:
- ✅ PASS: All 4 verification criteria met, exit code 0
- ❌ FAIL: Any error message, missing directory, or malformed package.json

**Potential Bugs to Watch For**:
- Path traversal vulnerability (test with `../../../etc/passwd`)
- Network timeout with no retry logic
- Incorrect permissions on `~/.claude` directory
- Race condition if multiple installs concurrent
```

--------------------------------

### Quick Start: Install, Navigate, Interact, and Close

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/playwright-cli/SKILL.md

Install and set up playwright-cli, open a browser, take a snapshot to get element refs, interact with elements, take a screenshot, and close the browser. Always snapshot first to identify element refs before interacting.

```bash
# Install and set up
playwright-cli install --skills
playwright-cli install-browser

# Open a browser and navigate
playwright-cli open https://playwright.dev

# Take a snapshot to see interactive elements (refs like e1, e2, e3...)
playwright-cli snapshot

# Interact using element refs from the snapshot
playwright-cli click e15
playwright-cli fill e5 "search query"
playwright-cli press Enter

# Take a screenshot
playwright-cli screenshot

# Close the browser
playwright-cli close
```

--------------------------------

### Basic Electron App Setup (JavaScript)

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/electron-testing.md

JavaScript version of the basic Electron app setup using beforeAll/afterAll hooks. Equivalent to the TypeScript example.

```javascript
const { test, expect, _electron: electron } = require("@playwright/test")

let app
let window

test.beforeAll(async () => {
  app = await electron.launch({
    args: ["./dist/main.js"],
    env: {
      ...process.env,
      NODE_ENV: "test",
    },
  })
  window = await app.firstWindow()
  await window.waitForLoadState("domcontentloaded")
})

test.afterAll(async () => {
  await app.close()
})

test("app window has correct title", async () => {
  const title = await window.title()
  expect(title).toBe("My Electron App")
})

test("main page renders", async () => {
  await expect(window.getByRole("heading", { name: "Welcome" })).toBeVisible()
})
```

--------------------------------

### Basic Electron App Setup (TypeScript)

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/electron-testing.md

Basic Electron app setup using beforeAll/afterAll hooks. Launches the app with NODE_ENV=test, waits for the first window, and includes two example tests.

```typescript
import { test, expect, _electron as electron, ElectronApplication, Page } from "@playwright/test"

let app: ElectronApplication
let window: Page

test.beforeAll(async () => {
  // Launch the Electron app from your project directory
  app = await electron.launch({
    args: ["./dist/main.js"],
    env: {
      ...process.env,
      NODE_ENV: "test",
    },
  })

  // Wait for the first BrowserWindow to open
  window = await app.firstWindow()

  // Optional: wait for the app to be fully loaded
  await window.waitForLoadState("domcontentloaded")
})

test.afterAll(async () => {
  await app.close()
})

test("app window has correct title", async () => {
  const title = await window.title()
  expect(title).toBe("My Electron App")
})

test("main page renders", async () => {
  await expect(window.getByRole("heading", { name: "Welcome" })).toBeVisible()
})
```

--------------------------------

### Automated setup with pnpm onboard

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r2-upload/README.md

Automated setup for the R2/S3 upload skill. Installs dependencies, guides through credential setup, tests the connection, and creates the config file.

```bash
cd skills/r2-upload
pnpm install
pnpm run onboard
```

--------------------------------

### .env File Setup - Example Files

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/configuration.md

Example .env files for different environments: .env.example (committed), .env.local (gitignored), and .env.staging (gitignored). Shows how to structure environment variables for local and staging environments.

```bash
# .env.example (commit this)
BASE_URL=http://localhost:3000
TEST_PASSWORD=
API_KEY=

# .env.local (gitignored)
BASE_URL=http://localhost:3000
TEST_PASSWORD=s3cret
API_KEY=test-key-abc123

# .env.staging (gitignored)
BASE_URL=https://staging.example.com
TEST_PASSWORD=staging-password
API_KEY=staging-key-xyz789
```

--------------------------------

### Install Metasploit and Initialize Database

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/metasploit-framework/SKILL.md

Install Metasploit on non-Kali systems and initialize the PostgreSQL database. Requires sudo privileges for starting the database service.

```bash
# Metasploit comes pre-installed on Kali Linux
# For other systems:
curl https://raw.githubusercontent.com/rapid7/metasploit-omnibus/master/config/templates/metasploit-framework-wrappers/msfupdate.erb > msfinstall
chmod 755 msfinstall
./msfinstall

# Start PostgreSQL for database support
sudo systemctl start postgresql
sudo msfdb init
```

--------------------------------

### Install chart-image dependencies

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/chart-image/SKILL.md

One-time setup command to install dependencies for the chart-image skill. Run from the scripts directory.

```bash
cd /data/clawd/skills/chart-image/scripts && npm install
```

--------------------------------

### Quick Start Example: User and Agent Interaction

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/cv-tailor/SKILL.md

Shows a typical user request and the agent's response, illustrating the workflow trigger and output.

```text
User: Help me optimize my resume — I'm applying for this role [attaches JD + resume]
Agent: [Follows the SOP workflow and outputs optimization recommendations plus a rewritten resume]
```

--------------------------------

### Install and Configure Apache HTTP Server on Linux

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/network-101/SKILL.md

Commands to install Apache, start the service, create a test page, and verify the server is running on port 80.

```bash
# Install Apache
sudo apt update && sudo apt install apache2

# Start service
sudo systemctl start apache2
sudo systemctl enable apache2

# Create test page
echo "<html><body><h1>Test Page</h1></body></html>" | sudo tee /var/www/html/index.html

# Verify service
curl http://localhost
```

--------------------------------

### Install dependencies manually

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r2-upload/README.md

Installs dependencies for manual setup.

```bash
pnpm install
```

--------------------------------

### Linux Samba Setup

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/network-101/SKILL.md

Commands to install Samba, create a share directory, configure Samba, and restart the service.

```bash
# Install Samba
sudo apt install samba

# Create share directory
sudo mkdir -p /srv/samba/share
sudo chmod 777 /srv/samba/share

# Configure Samba
sudo nano /etc/samba/smb.conf

# Add share:
# [public]
#    path = /srv/samba/share
#    browsable = yes
#    guest ok = yes
#    read only = no

# Restart service
sudo systemctl restart smbd
```

--------------------------------

### Step 1: Assess Current State - Example Output

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/references/master_qa_prompt.md

Shows the output of the initial state assessment, reading key files and detecting the current onboarding status. Used to decide whether to start Day 1 onboarding.

```text
✅ Reading QA-HANDOVER-INSTRUCTIONS.md...
✅ Reading BASELINE-METRICS.md...
✅ Reading TEST-EXECUTION-TRACKING.csv...

Current State Detected:
- Day 1 onboarding: NOT COMPLETE
- Tests executed: 0 / 342
- Current week: N/A (need to complete Day 1 first)

Decision: Start Day 1 onboarding
```

--------------------------------

### Docusaurus Setup and Project Structure

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/documentation-systems.md

Commands to create a new Docusaurus project and start the development server, followed by the expected project directory structure.

```bash
# Setup
npx create-docusaurus@latest docs classic
cd docs && npm start

# Structure
docs/
├── docs/           # Documentation pages
├── blog/           # Blog posts
├── src/
│   └── pages/      # Custom pages
└── docusaurus.config.js
```

--------------------------------

### Complete HTTP Lab Setup

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/network-101/SKILL.md

Sets up an Apache web server with a login page for HTTP lab testing. Installs Apache, creates a login form, and opens port 80 in the firewall.

```bash
# Install and configure
sudo apt install apache2
sudo systemctl start apache2

# Create login page
cat << 'EOF' | sudo tee /var/www/html/login.html
<html>
<body>
<form method="POST" action="login.php">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="pass"><br>
<input type="submit" value="Login">
</form>
</body>
</html>
EOF

# Allow through firewall
sudo ufw allow 80/tcp
```

--------------------------------

### Documentation content hierarchy

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/user-guides-tutorials.md

Shows the intended structure of the documentation site, including sections for Getting Started, Guides, API Reference, SDK Documentation, Tutorials, and Resources.

```markdown
Documentation/
├── Getting Started/
│   ├── Quick Start (5 min)
│   ├── Installation
│   ├── Authentication
│   └── First Request
│
├── Guides/
│   ├── User Management
│   ├── File Uploads
│   ├── Webhooks
│   └── Rate Limiting
│
├── API Reference/
│   ├── Users API
│   ├── Files API
│   └── Webhooks API
│
├── SDK Documentation/
│   ├── Python SDK
│   ├── TypeScript SDK
│   └── Go SDK
│
├── Tutorials/
│   ├── Build a Dashboard (30 min)
│   ├── Integrate Authentication (45 min)
│   └── Real-time Sync (60 min)
│
└── Resources/
    ├── Troubleshooting
    ├── FAQ
    ├── Best Practices
    └── Migration Guides
```

--------------------------------

### Create config file from example

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r2-upload/README.md

Creates the config file from the example and instructs to edit it with credentials.

```bash
cp example-config.yml ~/.r2-upload.yml
# Edit ~/.r2-upload.yml with your credentials
```

--------------------------------

### Install and onboard r2-upload skill

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r2-upload/CLAWDHUB.md

Install dependencies and run the interactive onboarding script to set up credentials and create the configuration file.

```bash
cd ~/clawd/skills/r2-upload
pnpm install
pnpm run onboard
```

--------------------------------

### Quick Start: Rotating Box with useFrame

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r3f-animation/SKILL.md

A complete example of a rotating box using useFrame to update rotation each frame. Demonstrates the basic setup with Canvas and a custom component.

```tsx
import { Canvas, useFrame } from '@react-three/fiber'
import { useRef } from 'react'

function RotatingBox() {
  const meshRef = useRef()

  useFrame((state, delta) => {
    meshRef.current.rotation.x += delta
    meshRef.current.rotation.y += delta * 0.5
  })

  return (
    <mesh ref={meshRef}>
      <boxGeometry />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  )
}

export default function App() {
  return (
    <Canvas>
      <ambientLight />
      <RotatingBox />
    </Canvas>
  )
}
```

--------------------------------

### Verify and Start Claude Code

Source: https://github.com/zebbern/claude-code-guide/blob/main/README.md

Verifies the installation and starts Claude Code. Native installs update themselves.

```bash
claude --version
claude doctor
claude
```

--------------------------------

### Initialize API Key and Verify Setup

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/shodan-reconnaissance/SKILL.md

Initialize the Shodan CLI with your API key and verify the setup by checking account credits.

```bash
# Set your API key
shodan init YOUR_API_KEY

# Verify setup
shodan info
# Output: Query credits available: 100
#         Scan credits available: 100
```

--------------------------------

### Install GCP CLI

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/cloud-penetration-testing/SKILL.md

Install the Google Cloud SDK and initialize it with gcloud init. Requires bash and internet access.

```bash
curl https://sdk.cloud.google.com | bash
gcloud init
```

--------------------------------

### Initialize QA Project with init_qa_project.py

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/SKILL.md

One-command initialization script that creates the QA project structure, tracking CSVs, documentation templates, and master prompt. Run from the project root. Creates directories like tests/docs/, tests/e2e/, tests/fixtures/ and files like TEST-EXECUTION-TRACKING.csv and BUG-TRACKING-TEMPLATE.csv.

```bash
python scripts/init_qa_project.py <project-name> [output-directory]
```

--------------------------------

### Setup project with dependencies and global setup

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/ci/projects-and-dependencies.md

Playwright config with a setup project that runs first and browser projects that depend on it, plus the global setup file that authenticates and saves storage state. The setup project runs immediately because it has no dependencies; dependent projects start only after it completes successfully, and are skipped if it fails.

```ts
// playwright.config.ts
import { defineConfig, devices } from "@playwright/test"

export default defineConfig({
  testDir: "./tests",

  projects: [
    // Setup runs first -- no dependencies, so it runs immediately
    {
      name: "setup",
      testMatch: /global\.setup\.ts/,
    },

    // Browser projects depend on setup
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"],
        storageState: "playwright/.auth/user.json",
      },
      dependencies: ["setup"],
    },
    {
      name: "firefox",
      use: {
        ...devices["Desktop Firefox"],
        storageState: "playwright/.auth/user.json",
      },
      dependencies: ["setup"],
    },
  ],
})
```

```ts
// tests/global.setup.ts
import { test as setup, expect } from "@playwright/test"

const authFile = "playwright/.auth/user.json"

setup("authenticate", async ({ page }) => {
  await page.goto("/login")
  await page.getByLabel("Email").fill("user@example.com")
  await page.getByLabel("Password").fill(process.env.TEST_PASSWORD!)
  await page.getByRole("button", { name: "Sign in" }).click()
  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible()
  await page.context().storageState({ path: authFile })
})
```

--------------------------------

### Install Playwright Browsers (npx playwright install)

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/error-index.md

Install Playwright browsers to resolve the 'Executable doesn't exist' error. Use `npx playwright install` for all browsers, `npx playwright install chromium` for a single browser, or `--with-deps` to include OS dependencies for CI/Docker. The YAML example shows the install step for GitHub Actions.

```bash
# Install all browsers
npx playwright install

# Install only the browser you need (faster in CI)
npx playwright install chromium

# Install browsers with OS dependencies (needed in CI/Docker)
npx playwright install --with-deps

# If you're on a CI Dockerfile, add this to your Dockerfile
# RUN npx playwright install --with-deps chromium
```

```yaml
# GitHub Actions example
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
```

--------------------------------

### Build the project

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r2-upload/README.md

Builds the project after configuration.

```bash
pnpm run build
```

--------------------------------

### Initial Setup Prompt for Day 1 Onboarding

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/references/llm_prompts_library.md

Use this prompt to instruct an LLM assistant to set up the QA testing environment following the Day 1 onboarding checklist. It emphasizes sequential execution and reporting blockers.

```plaintext
You are a senior QA engineer with 20+ years of experience at Google. Help me set up the QA testing environment.

CRITICAL: Follow the Day 1 onboarding checklist exactly as documented.

Read and execute: tests/docs/templates/DAY-1-ONBOARDING-CHECKLIST.md

Start with Hour 1 (Environment Setup). Complete each hour sequentially. Do NOT skip any steps. After completing each hour, confirm what you did and ask if you should continue.

Report any blockers immediately.
```

--------------------------------

### Example Zoom Crop for Name Field

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/pdf/forms.md

Example crop for a 'Name' field estimated around (100, 150). The crop starts at (50,120) with size 300x80, outputting to crops/name_field.png.

```bash
magick images_dir/page_1.png -crop 300x80+50+120 +repage crops/name_field.png
```

--------------------------------

### OpenAPI output example

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/route-to-openapi/SKILL.md

Example OpenAPI 3.0.3 JSON output generated by the script, showing two GET endpoints: /users with a query parameter and /users/{user_id} with a path parameter.

```json
{
  "openapi": "3.0.3",
  "info": {
    "title": "My API",
    "version": "1.0.0"
  },
  "paths": {
    "/users": {
      "get": {
        "summary": "List all users",
        "operationId": "list_users",
        "tags": ["users"],
        "parameters": [
          {
            "name": "limit",
            "in": "query",
            "required": false,
            "schema": { "type": "integer" }
          }
        ],
        "responses": {
          "200": { "description": "Successful response" }
        }
      }
    },
    "/users/{user_id}": {
      "get": {
        "summary": "Get user by ID",
        "operationId": "get_user",
        "tags": ["users"],
        "parameters": [
          {
            "name": "user_id",
            "in": "path",
            "required": true,
            "schema": { "type": "integer" }
          }
        ],
        "responses": {
          "200": { "description": "Successful response" }
        }
      }
    }
  }
}
```

--------------------------------

### Quick Reference: page.clock API

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/clock-and-time-mocking.md

Quick reference for the core page.clock API methods: install, fastForward, setFixedTime, and resume. Install the clock before page.goto so the page loads with mocked time from the start.

```typescript
// Freeze time at a specific moment
await page.clock.install({ time: new Date("2025-03-15T10:00:00Z") })
await page.goto("/dashboard")

// Advance time by 5 minutes
await page.clock.fastForward("05:00")

// Set time to a specific point (jumps, does not tick through)
await page.clock.setFixedTime(new Date("2025-12-31T23:59:59Z"))

// Let time resume ticking from current mocked point
await page.clock.resume()
```

--------------------------------

### Set up React project with Tailwind and lucide-react

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/design-system-builder/SKILL.md

Creates a new React app with Create React App, installs Tailwind CSS and its PostCSS dependencies, initializes Tailwind with PostCSS support, and installs the lucide-react icon library. Run these commands when no existing React project is found.

```bash
npx create-react-app my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install lucide-react
```

--------------------------------

### Initialize QA project with init_qa_project.py

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/references/ground_truth_principle.md

Initializes a QA project with the qa-expert skill, creating the tests/docs directory structure including README.md, test case docs, TEST-ID-MAPPING.md, templates, and validation script.

```bash
python scripts/init_qa_project.py my-app ./
```

--------------------------------

### Frozen Time with install() and setFixedTime() - JavaScript

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/clock-and-time-mocking.md

JavaScript (CommonJS) examples for frozen time with install() and setFixedTime(). Install the clock before navigating, then use setFixedTime to jump to different times and reload to verify UI changes. Includes tests for greeting by time of day and subscription expiration.

```javascript
const { test, expect } = require("@playwright/test")

test("dashboard shows correct greeting based on time of day", async ({ page }) => {
  await page.clock.install({ time: new Date("2025-06-15T08:30:00") })
  await page.goto("/dashboard")
  await expect(page.getByText("Good morning")).toBeVisible()

  await page.clock.setFixedTime(new Date("2025-06-15T14:00:00"))
  await page.reload()
  await expect(page.getByText("Good afternoon")).toBeVisible()
})

test("subscription shows correct expiration status", async ({ page }) => {
  await page.clock.install({ time: new Date("2025-06-01T12:00:00Z") })
  await page.goto("/account")

  await expect(page.getByTestId("subscription-status")).toHaveText("Active")
})
```

--------------------------------

### Start Development Server

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/references/day1_onboarding.md

Starts the development server and verifies it is accessible at the configured port (default 8080).

```bash
pnpm dev
# Verify: http://localhost:8080 (or configured port)
```

--------------------------------

### Linux SNMP Setup

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/network-101/SKILL.md

Commands to install SNMP daemon, configure community strings, and restart the service.

```bash
# Install SNMP daemon
sudo apt install snmpd snmp

# Configure community strings
sudo nano /etc/snmp/snmpd.conf

# Add these lines:
# rocommunity public
# rwcommunity private

# Restart service
sudo systemctl restart snmpd
```

--------------------------------

### Frozen Time with install() and setFixedTime() - TypeScript

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/clock-and-time-mocking.md

TypeScript examples for frozen time with install() and setFixedTime(). Install the clock before navigating, then use setFixedTime to jump to different times and reload to verify UI changes. Includes tests for greeting by time of day, subscription expiration, and holiday content.

```typescript
import { test, expect } from "@playwright/test"

test("dashboard shows correct greeting based on time of day", async ({ page }) => {
  // Install clock BEFORE navigating
  await page.clock.install({ time: new Date("2025-06-15T08:30:00") })
  await page.goto("/dashboard")
  await expect(page.getByText("Good morning")).toBeVisible()

  // Jump to afternoon
  await page.clock.setFixedTime(new Date("2025-06-15T14:00:00"))
  await page.reload()
  await expect(page.getByText("Good afternoon")).toBeVisible()

  // Jump to evening
  await page.clock.setFixedTime(new Date("2025-06-15T20:00:00"))
  await page.reload()
  await expect(page.getByText("Good evening")).toBeVisible()
})

test("subscription shows correct expiration status", async ({ page }) => {
  // Freeze time to a date when subscription is active
  await page.clock.install({ time: new Date("2025-06-01T12:00:00Z") })
  await page.goto("/account")

  await expect(page.getByTestId("subscription-status")).toHaveText("Active")
  await expect(page.getByTestId("days-remaining")).toContainText("29")

  // Jump to the expiration date
  await page.clock.setFixedTime(new Date("2025-06-30T12:00:00Z"))
  await page.reload()

  await expect(page.getByTestId("subscription-status")).toHaveText("Expiring today")
})

test("content displays correctly on a specific holiday", async ({ page }) => {
  await page.clock.install({ time: new Date("2025-12-25T10:00:00") })
  await page.goto("/")

  await expect(page.getByText("Happy Holidays")).toBeVisible()
  await expect(page.getByTestId("holiday-banner")).toBeVisible()
})
```

--------------------------------

### globalSetup - JavaScript

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/configuration.md

JavaScript global setup function that seeds the test database and sets an environment variable. Uses child_process to run Prisma commands.

```js
// tests/global-setup.js
const { execSync } = require("child_process")

async function globalSetup(config) {
  execSync("npx prisma db seed", { stdio: "inherit" })
  process.env.TEST_RUN_ID = `run-${Date.now()}`
}

module.exports = globalSetup
```

--------------------------------

### Install coverage dependencies and run coverage commands

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/ci/test-coverage.md

Quick reference commands for installing coverage dependencies (nyc, istanbul-lib-coverage, istanbul-reports, v8-to-istanbul), running tests with coverage collection, generating reports (HTML, text-summary, lcov), and checking coverage thresholds.

```bash
# Install coverage dependencies
npm install -D nyc istanbul-lib-coverage istanbul-reports v8-to-istanbul

# Run with coverage collection
npx playwright test                    # uses fixtures to collect coverage

# Generate reports from collected data
npx nyc report --reporter=html --reporter=text-summary
npx nyc report --reporter=lcov        # for CI integration (Codecov, SonarQube)

# Check coverage thresholds
npx nyc check-coverage --lines 80 --branches 70 --functions 75
```

--------------------------------

### Get a Specific Cookie

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/playwright-cli/storage-and-auth.md

Retrieves a single cookie by name. Two examples are shown for different cookie names.

```bash
playwright-cli cookie-get session_id
playwright-cli cookie-get __cf_bm
```

--------------------------------

### NestJS Controller Documentation with @nestjs/swagger

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/api-docs-nestjs-express.md

Use this controller example to document a NestJS REST API with Swagger decorators. It includes @ApiTags, @ApiBearerAuth, @ApiOperation, @ApiResponse, and @ApiParam to describe endpoints and responses. The example shows a POST /users and GET /users/:id endpoint.

```typescript
import { Controller, Post, Body, Get, Param } from "@nestjs/common"
import { ApiTags, ApiOperation, ApiResponse, ApiParam, ApiBearerAuth } from "@nestjs/swagger"

@ApiTags("Users")
@ApiBearerAuth()
@Controller("users")
export class UsersController {
  @Post()
  @ApiOperation({ summary: "Create a new user" })
  @ApiResponse({
    status: 201,
    description: "User created successfully",
    type: UserDto,
  })
  @ApiResponse({
    status: 400,
    description: "Invalid input data",
  })
  async create(@Body() dto: CreateUserDto): Promise<UserDto> {
    return this.usersService.create(dto)
  }

  @Get(":id")
  @ApiOperation({ summary: "Get user by ID" })
  @ApiParam({
    name: "id",
    description: "User unique identifier",
    example: "123",
  })
  @ApiResponse({ status: 200, type: UserDto })
  @ApiResponse({ status: 404, description: "User not found" })
  async findOne(@Param("id") id: string): Promise<UserDto> {
    return this.usersService.findOne(id)
  }
}
```

--------------------------------

### Full Documentation Suite with Screenshots and PDF

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/playwright-cli/screenshots-and-media.md

Walks through a full documentation suite: opens the app, captures login and dashboard screenshots, navigates to settings, and generates a PDF of the docs page. Uses element selectors e1, e2, e3 and saves files under docs/.

```bash
playwright-cli open https://app.example.com

# Login page
playwright-cli screenshot --filename=docs/01-login.png

# Fill and submit
playwright-cli fill e1 "demo@example.com"
playwright-cli fill e2 "demo-password"
playwright-cli screenshot --filename=docs/02-login-filled.png

playwright-cli click e3
playwright-cli screenshot --filename=docs/03-dashboard.png

# Navigate to settings
playwright-cli goto https://app.example.com/settings
playwright-cli screenshot --filename=docs/04-settings.png

# Generate PDF of documentation page
playwright-cli goto https://app.example.com/docs
playwright-cli pdf --filename=docs/user-guide.pdf
```

--------------------------------

### JavaScript: Download triggered by a link

Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/file-operations.md

JavaScript equivalent of the TypeScript link-triggered download example. Uses download.path() to get the temp file path and verifies it is truthy.

```javascript
test("download triggered by a link", async ({ page }) => {
  await page.goto("/files")

  const downloadPromise = page.waitForEvent("download")
  await page.getByRole("link", { name: "Download invoice" }).click()
  const download = await downloadPromise

  expect(download.suggestedFilename()).toMatch(/invoice-\d+\.pdf/)

  const tempPath = await download.path()
  expect(tempPath).toBeTruthy()
})
```
Tokens:
Raw