### Environment Setup Installation Commands (Linux)
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/dev-guide-generator/SKILL.md
Provides an example of how to install a tool on Linux (Ubuntu/Debian) using apt, including a comment explaining the action.
```bash
**Linux (Ubuntu/Debian)**:
# Install xxx (via apt)
sudo apt update && sudo apt install -y xxx
```
--------------------------------
### Environment Setup Installation Commands (macOS)
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/dev-guide-generator/SKILL.md
Provides an example of how to install a tool on macOS using Homebrew, including a comment explaining the action.
```bash
**macOS**:
# Install xxx (via Homebrew)
brew install xxx
```
--------------------------------
### LLM Day 1 Onboarding Execution Example
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/references/master_qa_prompt.md
Illustrates the LLM's execution of the Day 1 onboarding checklist, including environment setup tasks like cloning a repository and installing dependencies.
```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.
```
--------------------------------
### Install SDK
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/user-guides-tutorials.md
Install the @myapi/sdk package using npm. This is the first step in the Quick Start guide.
```bash
npm install @myapi/sdk
```
--------------------------------
### Install and Start Apache on Linux
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/network-101/SKILL.md
Installs the Apache web server, starts the service, and enables it to run on boot. Verifies the installation by curling the default page.
```bash
sudo apt update && sudo apt install apache2
# Start service
sudo systemctl start apache2
sudo systemctl enable apache2
# Create test page
echo "Test Page
" | sudo tee /var/www/html/index.html
# Verify service
curl http://localhost
```
--------------------------------
### Start Native Installer
Source: https://github.com/zebbern/claude-code-guide/blob/main/README.md
Launch the interactive native binary installer for faster startup and auto-updates. This method does not require Node.js.
```bash
# Start the native installer (interactive)
claude install
```
--------------------------------
### Example: Install Agent Locally
Source: https://github.com/zebbern/claude-code-guide/blob/main/agents/agent_installer.agent.md
Demonstrates the process of installing an agent to the local directory. It involves creating the directory if it doesn't exist and saving the agent file.
```bash
# Example of saving an agent file locally
# Assume .claude/agents/ does not exist yet
mkdir -p .claude/agents/
curl -s https://raw.githubusercontent.com/VoltAgent/awesome-claude-code-subagents/main/categories/Core%20Development/agent-installer.agent.md -o .claude/agents/agent-installer.agent.md
```
--------------------------------
### Example: Install Agent Globally
Source: https://github.com/zebbern/claude-code-guide/blob/main/agents/agent_installer.agent.md
Illustrates how to install an agent to the global agent directory. This is a common installation path for agents intended for system-wide use.
```bash
# Example of saving an agent file globally
curl -s https://raw.githubusercontent.com/VoltAgent/awesome-claude-code-subagents/main/categories/Core%20Development/agent-installer.agent.md -o ~/.claude/agents/agent-installer.agent.md
```
--------------------------------
### Install Dependencies and Onboard Skill
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r2-upload/README.md
Installs project dependencies and runs the interactive onboarding process for the R2/S3 Upload Skill. This is the recommended setup method.
```bash
cd skills/r2-upload
pnpm install
pnpm run onboard
```
--------------------------------
### Example CLI Install Test Case
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/assets/templates/TEST-CASE-TEMPLATE.md
An example of a test case written using the template for installing a skill via the command-line interface. It details prerequisites, steps, expected results, and potential bugs.
```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
```
--------------------------------
### Copy Example Configuration
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r2-upload/README.md
Copies the example configuration file to the user's home directory for manual setup of the R2/S3 Upload Skill. The copied file should then be edited with specific credentials.
```bash
cp example-config.yml ~/.r2-upload.yml
# Edit ~/.r2-upload.yml with your credentials
```
--------------------------------
### Project Setup for User Dashboard
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/user-guides-tutorials.md
Set up a new project for the user dashboard tutorial by creating a directory, initializing npm, and installing necessary packages.
```bash
mkdir user-dashboard
cd user-dashboard
npm init -y
npm install @myapi/sdk react
```
--------------------------------
### Environment Verification Example
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/dev-guide-generator/SKILL.md
Shows how to verify a tool installation by checking its version and the expected output format.
```bash
# Verify installation
xxx --version
# Expected output: xxx x.y.z
```
--------------------------------
### Metasploit Console and Database Setup
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/scanning-tools/SKILL.md
Commands to start the Metasploit Framework console and initialize its database.
```bash
# Start Metasploit
msfconsole
# Database setup
msfdb init
db_status
```
--------------------------------
### Complete HTTP Lab Setup
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/network-101/SKILL.md
Installs Apache, creates a basic HTML login page, and configures the firewall to allow HTTP traffic.
```bash
sudo apt install apache2
sudo systemctl start apache2
cat << 'EOF' | sudo tee /var/www/html/login.html
EOF
sudo ufw allow 80/tcp
```
--------------------------------
### Example User Request and Agent Response
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/dev-guide-generator/SKILL.md
Illustrates a typical interaction where a user requests a tutorial and the agent provides a complete guide.
```text
User: Help me write a Docker beginner's tutorial
Agent: [Outputs complete technical tutorial + Cheatsheet following the SOP workflow]
```
--------------------------------
### CV Tailor Quick Start Example
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/cv-tailor/SKILL.md
Illustrates the basic interaction flow for the CV Tailor skill, where a user provides a resume and job description for optimization.
```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]
```
--------------------------------
### Run Setup Hooks and Exit
Source: https://github.com/zebbern/claude-code-guide/blob/main/README.md
Run Setup hooks and then exit immediately.
```bash
claude --init-only
```
--------------------------------
### SMB Anonymous Access Setup
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/network-101/SKILL.md
Installs Samba, creates an anonymous share directory with full permissions, and tests access.
```bash
sudo apt install samba
sudo mkdir /srv/samba/anonymous
sudo chmod 777 /srv/samba/anonymous
smbclient //localhost/anonymous -N
```
--------------------------------
### Initialize SDK and List Users
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/user-guides-tutorials.md
Initialize the SDK client with an API key and make a request to list users. This is part of the Quick Start guide.
```typescript
import { Client } from "@myapi/sdk"
const client = new Client({ apiKey: "your_key" })
const users = await client.users.list()
console.log(users)
```
--------------------------------
### Execute First Test Case (CLI Install)
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/references/day1_onboarding.md
Execute the first test case, which involves clearing previous installations, running the install command, and verifying the installation.
```bash
# Step 1: Clear previous installations
rm -rf ~/.claude/skills/
# Step 2: Run install command
ccpm install
# Step 3: Verify installation
ls ~/.claude/skills/
cat ~/.claude/skills//package.json
```
--------------------------------
### Migrate to Native Installer
Source: https://github.com/zebbern/claude-code-guide/blob/main/README.md
Switch your installation from the npm method to the native binary installer. This command facilitates the transition.
```bash
# Switch from npm global install to native installer
claude migrate-installer
```
--------------------------------
### SDK Installation - npm
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/interactive-api-docs.md
Shows how to install the SDK package using npm.
```bash
npm install @myapi/sdk
```
--------------------------------
### Simulate PWA Install Prompt
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/service-workers-and-pwa.md
Tests if the application captures the 'beforeinstallprompt' event and displays an install button. This is useful for verifying the PWA installation flow.
```typescript
import { test, expect } from "@playwright/test"
test("app captures install prompt and shows install button", async ({ swContext }) => {
const page = await swContext.newPage()
// Mock the beforeinstallprompt event
await page.addInitScript(() => {
let deferredPrompt: Event | null = null
// Simulate the browser firing beforeinstallprompt
window.addEventListener("load", () => {
const event = new Event("beforeinstallprompt")
;(event as any).preventDefault = () => {}
;(event as any).prompt = () => Promise.resolve()
;(event as any).userChoice = Promise.resolve({ outcome: "accepted" })
window.dispatchEvent(event)
})
})
await page.goto("/")
// Your app should show an install button when it captures the prompt
await expect(page.getByRole("button", { name: "Install app" })).toBeVisible()
})
```
--------------------------------
### Simulate PWA Install Prompt (JavaScript)
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/service-workers-and-pwa.md
A JavaScript version for testing the PWA installation flow by simulating the 'beforeinstallprompt' event and checking for the visibility of the install button.
```javascript
const { test, expect } = require("@playwright/test")
test("app captures install prompt and shows install button", async ({ swContext }) => {
const page = await swContext.newPage()
await page.addInitScript(() => {
window.addEventListener("load", () => {
const event = new Event("beforeinstallprompt")
event.preventDefault = () => {}
event.prompt = () => Promise.resolve()
event.userChoice = Promise.resolve({ outcome: "accepted" })
window.dispatchEvent(event)
})
})
await page.goto("/")
await expect(page.getByRole("button", { name: "Install app" })).toBeVisible()
})
```
--------------------------------
### Automate Package Installation with Bash
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/linux-shell-scripting/SKILL.md
Installs a predefined list of packages using 'apt-get' if they are not already installed. Skips packages that are already present.
```bash
#!/bin/bash
packages=("vim" "htop" "curl" "wget" "git")
echo "Installing packages..."
for package in "${packages[@]}"; do
if dpkg -l | grep -q "^ii $package"; then
echo "[SKIP] $package is already installed"
else
sudo apt-get install -y "$package"
echo "[INSTALLED] $package"
fi
done
echo "Package installation completed."
```
--------------------------------
### Playwright Dockerfile Example
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/error-index.md
A sample Dockerfile using the official Playwright image, including dependency installation and test execution setup. Ensures necessary components are available in containerized environments.
```docker
FROM mcr.microsoft.com/playwright:v1.50.0-noble
WORKDIR /app
COPY . .
RUN npm ci
RUN npx playwright install chromium
CMD ["npx", "playwright", "test"]
```
--------------------------------
### Install @react-spring/three
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r3f-animation/SKILL.md
Install the @react-spring/three package using npm.
```bash
npm install @react-spring/three
```
--------------------------------
### Create User SDK Example - Go
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/interactive-api-docs.md
Demonstrates creating a user using the Go SDK client.
```go
import "github.com/myapi/sdk-go"
client := sdk.NewClient("your_key")
user, err := client.Users.Create(ctx, &sdk.CreateUserInput{
Name: "John Doe",
Email: "john@example.com",
})
if err != nil {
log.Fatal(err)
}
fmt.Println(user.ID)
```
--------------------------------
### Configure setup and teardown projects
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/ci/projects-and-dependencies.md
Define setup and teardown projects to manage browser-based cleanup after tests complete. The setup project links to the teardown project.
```typescript
// playwright.config.ts
import { defineConfig, devices } from "@playwright/test"
export default defineConfig({
projects: [
{
name: "setup",
testMatch: /global\.setup\.ts/,
teardown: "teardown", // link to teardown project
},
{
name: "teardown",
testMatch: /global\.teardown\.ts/,
},
{
name: "chromium",
use: {
...devices["Desktop Chrome"],
storageState: "playwright/.auth/user.json",
},
dependencies: ["setup"],
},
],
})
```
--------------------------------
### Example .env Files for Configuration
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/configuration.md
Demonstrates how to use .env files for managing environment-specific configurations like URLs and secrets. Includes example .env.example, .env.local, and .env.staging files, and a .gitignore entry.
```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
```
```bash
# .gitignore
.env
.env.local
.env.staging
.env.production
playwright/.auth/
```
```bash
# Install dotenv:
npm install -D dotenv
```
--------------------------------
### Install Dependencies Manually
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r2-upload/README.md
Installs project dependencies for the R2/S3 Upload Skill. This is part of the manual setup process.
```bash
pnpm install
```
--------------------------------
### Run Setup Hooks in Maintenance Mode
Source: https://github.com/zebbern/claude-code-guide/blob/main/README.md
Run Setup hooks in maintenance mode.
```bash
claude --maintenance
```
--------------------------------
### Install and Onboard r2-upload Skill
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r2-upload/CLAWDHUB.md
Install the skill's dependencies and run the interactive onboarding process to set up credentials and configuration.
```bash
cd ~/clawd/skills/r2-upload
pnpm install
pnpm run onboard
```
--------------------------------
### Install Playwright Browsers in GitHub Actions
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/error-index.md
Example of how to install Playwright browsers with OS dependencies in a GitHub Actions CI pipeline.
```yaml
# GitHub Actions example
- name: Install Playwright Browsers
run: npx playwright install --with-deps
```
--------------------------------
### Quick Usage Example
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/chart-image/SKILL.md
A basic example demonstrating how to generate a line chart with specified data, title, and output file.
```bash
node /data/clawd/skills/chart-image/scripts/chart.mjs \
--type line \
--data '[{"x":"10:00","y":25},{"x":"10:30","y":27},{"x":"11:00","y":31}]' \
--title "Price Over Time" \
--output chart.png
```
--------------------------------
### Install Metasploit Framework
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/metasploit-framework/SKILL.md
Installs Metasploit Framework on systems other than Kali Linux. It also starts and initializes the PostgreSQL database required for Metasploit's database support.
```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
```
--------------------------------
### Playwright Configuration for Global Setup (JavaScript)
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/authentication.md
Configure Playwright to use the global setup file and specify the storage state path. This ensures tests start with the saved authentication.
```javascript
// playwright.config.js
const { defineConfig } = require("@playwright/test")
module.exports = defineConfig({
globalSetup: require.resolve("./global-setup"),
use: {
baseURL: "http://localhost:3000",
storageState: ".auth/user.json",
},
})
```
--------------------------------
### Playwright Configuration for Global Setup (TypeScript)
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/authentication.md
Configure Playwright to use the global setup file and specify the storage state path. This ensures tests start with the saved authentication.
```typescript
// playwright.config.ts
import { defineConfig } from "@playwright/test"
export default defineConfig({
globalSetup: require.resolve("./global-setup"),
use: {
baseURL: "http://localhost:3000",
storageState: ".auth/user.json",
},
})
```
--------------------------------
### Create User SDK Example - Python
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/interactive-api-docs.md
Demonstrates creating a user using the Python SDK client.
```python
from myapi import Client
client = Client(api_key="your_key")
user = client.users.create(
name="John Doe",
email="john@example.com"
)
print(user.id)
```
--------------------------------
### Initialize QA Project
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/SKILL.md
Use this script to set up the initial QA infrastructure for a new project. It creates necessary directories and baseline files. Follow this by documenting the current state in BASELINE-METRICS.md, writing test cases, and preparing for autonomous execution.
```bash
python scripts/init_qa_project.py my-app ./
Fill in BASELINE-METRICS.md (document current state)
Write test cases using assets/templates/TEST-CASE-TEMPLATE.md
Copy master prompt from references/master_qa_prompt.md
Paste to LLM → autonomous execution begins
```
--------------------------------
### Group Related Tests with `test.describe()` in TypeScript
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/test-organization.md
Use `test.describe()` to group related tests that share setup or context. This example demonstrates shared `beforeEach` setup and nested describe blocks.
```typescript
// tests/auth/login.spec.ts
import { test, expect } from "@playwright/test"
test.describe("Login", () => {
// Shared setup for all tests in this describe block
test.beforeEach(async ({ page }) => {
await page.goto("/login")
})
test("should login with valid credentials", async ({ page }) => {
await page.getByLabel("Email").fill("user@example.com")
await page.getByLabel("Password").fill("securepass123")
await page.getByRole("button", { name: "Sign in" }).click()
await expect(page).toHaveURL("/dashboard")
})
test("should show error for invalid password", async ({ page }) => {
await page.getByLabel("Email").fill("user@example.com")
await page.getByLabel("Password").fill("wrongpassword")
await page.getByRole("button", { name: "Sign in" }).click()
await expect(page.getByRole("alert")).toHaveText("Invalid credentials")
})
// One level of nesting — acceptable
test.describe("Rate Limiting", () => {
test("should lock account after 5 failed attempts", async ({ page }) => {
for (let i = 0; i < 5; i++) {
await page.getByLabel("Email").fill("user@example.com")
await page.getByLabel("Password").fill("wrong")
await page.getByRole("button", { name: "Sign in" }).click()
}
await expect(page.getByRole("alert")).toContainText("Account locked")
})
})
})
```
--------------------------------
### Create User SDK Example - Ruby
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/interactive-api-docs.md
Demonstrates creating a user using the Ruby SDK client.
```ruby
require 'myapi'
client = MyAPI::Client.new(api_key: 'your_key')
user = client.users.create(
name: 'John Doe',
email: 'john@example.com'
)
puts user.id
```
--------------------------------
### JavaScript Example for Angular Material Select
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/angular.md
A basic JavaScript example demonstrating the setup for testing an Angular Material select dropdown. This snippet shows the import and describe block structure.
```javascript
const { test, expect } = require("@playwright/test")
test.describe("Angular Material components", () => {
test("mat-select dropdown", async ({ page }) => {
await page.goto("/settings")
```
--------------------------------
### Reflected GET HTML Injection Payloads
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/html-injection-testing/SKILL.md
Provides examples of URL-based payloads for reflected GET HTML injection, demonstrating how to inject HTML tags into welcome messages and search results.
```html
http://target.com/welcome?name=Welcome%20Admin
http://target.com/search?q=
```
--------------------------------
### Start Development Server
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/references/day1_onboarding.md
Start the development server and verify it is accessible at the configured local port.
```bash
pnpm dev
# Verify: http://localhost:8080 (or configured port)
```
--------------------------------
### Initialize QA Project with qa-expert
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/references/ground_truth_principle.md
Use the `init_qa_project.py` script to set up a new QA project. This script creates a standard directory structure and essential files, including documentation templates and validation scripts.
```bash
python scripts/init_qa_project.py my-app ./
# This creates:
tests/docs/
├── README.md (declares ground truth)
├── 02-CLI-TEST-CASES.md (authoritative specs)
├── TEST-ID-MAPPING.md (if needed)
└── templates/
├── TEST-EXECUTION-TRACKING.csv (tracking only)
├── CSV-USAGE-GUIDE.md (usage instructions)
└── validate_test_ids.py (validation script)
```
--------------------------------
### Group Related Tests with `test.describe()` in JavaScript
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/test-organization.md
Use `test.describe()` to group related tests that share setup or context. This example demonstrates shared `beforeEach` setup and nested describe blocks in JavaScript.
```javascript
// tests/auth/login.spec.js
const { test, expect } = require("@playwright/test")
test.describe("Login", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/login")
})
test("should login with valid credentials", async ({ page }) => {
await page.getByLabel("Email").fill("user@example.com")
await page.getByLabel("Password").fill("securepass123")
await page.getByRole("button", { name: "Sign in" }).click()
await expect(page).toHaveURL("/dashboard")
})
test("should show error for invalid password", async ({ page }) => {
await page.getByLabel("Email").fill("user@example.com")
await page.getByLabel("Password").fill("wrongpassword")
await page.getByRole("button", { name: "Sign in" }).click()
await expect(page.getByRole("alert")).toHaveText("Invalid credentials")
})
test.describe("Rate Limiting", () => {
test("should lock account after 5 failed attempts", async ({ page }) => {
for (let i = 0; i < 5; i++) {
await page.getByLabel("Email").fill("user@example.com")
await page.getByLabel("Password").fill("wrong")
await page.getByRole("button", { name: "Sign in" }).click()
}
await expect(page.getByRole("alert")).toContainText("Account locked")
})
})
})
```
--------------------------------
### Global Setup Authentication (JavaScript)
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/authentication.md
Use this JavaScript code for global setup to authenticate once and save the state. It logs in using provided credentials and saves the session to a file.
```javascript
// global-setup.js
const { chromium } = require("@playwright/test")
async function globalSetup(config) {
const { baseURL } = config.projects[0].use
const browser = await chromium.launch()
const context = await browser.newContext()
const page = await context.newPage()
await page.goto(`${baseURL}/login`)
await page.getByLabel("Email").fill(process.env.TEST_USER_EMAIL)
await page.getByLabel("Password").fill(process.env.TEST_USER_PASSWORD)
await page.getByRole("button", { name: "Sign in" }).click()
await page.waitForURL("**/dashboard")
await context.storageState({ path: ".auth/user.json" })
await browser.close()
}
module.exports = globalSetup
```
--------------------------------
### Avoid Over-engineering Data Setup
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/test-data-management.md
This example shows an over-engineered approach to test data setup, which adds unnecessary complexity. For most cases, a simple factory function and a fixture are sufficient. Introduce complexity only when a proven need arises.
```typescript
// BAD — abstraction for its own sake
const data = new TestDataOrchestrator()
.withStrategy("api")
.withRetry(3)
.withCleanupPolicy("deferred")
.withEnvironment("staging")
.build()
```
--------------------------------
### Initial QA Environment Setup Prompt
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 to set up the QA testing environment by following a specific onboarding checklist. It emphasizes sequential execution and immediate reporting of blockers.
```text
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.
```
--------------------------------
### SNMP Testing Setup
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/network-101/SKILL.md
Installs SNMP daemon, configures a read-only community string, restarts the service, and tests enumeration.
```bash
sudo apt install snmpd
echo "rocommunity public" | sudo tee -a /etc/snmp/snmpd.conf
sudo systemctl restart snmpd
snmpwalk -c public -v1 localhost
```
--------------------------------
### Install Playwright Browsers
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/migration/from-selenium.md
Playwright bundles browser binaries, simplifying setup and eliminating the need for manual driver management and version matching.
```bash
npx playwright install
```
--------------------------------
### Multiple Configurations Example
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/typescript-pro/references/configuration.md
Demonstrates how to use multiple tsconfig.json files with inheritance for different build environments (base, production, testing).
```json
// tsconfig.json (base)
{
"compilerOptions": {
"strict": true,
"target": "ES2022"
}
}
// tsconfig.build.json (production)
{
"extends": "./tsconfig.json",
"compilerOptions": {
"sourceMap": false,
"removeComments": true,
"declaration": true
},
"exclude": ["**/*.test.ts", "**/*.spec.ts"]
}
// tsconfig.test.json (testing)
{
"extends": "./tsconfig.json",
"compilerOptions": {
"types": ["jest", "node"],
"esModuleInterop": true
},
"include": ["src/**/*.test.ts", "src/**/*.spec.ts"]
}
```
--------------------------------
### Project-Level Configuration File Example
Source: https://github.com/zebbern/claude-code-guide/blob/main/README.md
This is an example of the `.mcp.json` file created for project-level MCP server configuration.
```json
{
"mcpServers": {
"shared-tools": {
"command": "npx",
"args": ["-y", "@your-team/mcp-tools"],
"env": {}
}
}
}
```
--------------------------------
### Optimized API Route with Parallel Operations
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/react-best-practices/rules/async-api-routes.md
This corrected example demonstrates how to start independent asynchronous operations concurrently using Promises. This pattern significantly improves performance by reducing execution time. It's suitable for operations that do not depend on each other's results before starting.
```typescript
export async function GET(request: Request) {
const sessionPromise = auth()
const configPromise = fetchConfig()
const session = await sessionPromise
const [config, data] = await Promise.all([configPromise, fetchData(session.user.id)])
return Response.json({ data, config })
}
```
--------------------------------
### Initialize QA Project
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/SKILL.md
Initializes a complete QA infrastructure for a project. Use this command when setting up QA from scratch or migrating to a structured QA process.
```bash
python scripts/init_qa_project.py [output-directory]
```
--------------------------------
### Test Isolation: Fresh Data Setup
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/references/google_testing_standards.md
Ensures each test starts with independent data by seeding the database before each test execution. This is crucial for maintaining test isolation.
```typescript
beforeEach(() => {
database.seed(freshData);
});
```
--------------------------------
### PostgreSQL Configuration File Example
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/database-optimizer/references/postgresql-tuning.md
An example 'postgresql.conf' file optimized for a server with 16GB RAM, focusing on memory, WAL, and checkpoint settings.
```ini
# postgresql.conf - Production optimized for 16GB RAM server
# Memory
shared_buffers = 4GB
effective_cache_size = 12GB
work_mem = 40MB
maintenance_work_mem = 2GB
# WAL
wal_buffers = 16MB
checkpoint_completion_target = 0.9
max_wal_size = 2GB
```
--------------------------------
### Documentation Checklist
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/coverage-reports.md
A Markdown checklist to guide the documentation process. It covers pre-documentation setup, function/method details, class documentation, API endpoints, and final checks.
```markdown
## Documentation Checklist
### Before Starting
- [ ] Confirmed format preference (Google/JSDoc/etc.)
- [ ] Identified files to exclude (tests, generated)
- [ ] Detected framework for API docs
### Functions/Methods
- [ ] All public functions documented
- [ ] Parameters described with types
- [ ] Return values documented
- [ ] Exceptions/errors documented
- [ ] Examples added for complex functions
### Classes
- [ ] Class purpose described
- [ ] Constructor parameters documented
- [ ] Public methods documented
- [ ] Important attributes explained
### API Endpoints
- [ ] All endpoints have summaries
- [ ] Request bodies documented
- [ ] Response schemas defined
- [ ] Error responses documented
- [ ] Authentication requirements noted
### Final Checks
- [ ] Ran documentation linter
- [ ] Verified Swagger UI renders correctly
- [ ] No inaccurate documentation
- [ ] Coverage report generated
```
--------------------------------
### Create User SDK Example - TypeScript
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/code-documenter/references/interactive-api-docs.md
Demonstrates creating a user using the TypeScript SDK client.
```typescript
import { Client } from "@myapi/sdk"
const client = new Client({ apiKey: "your_key" })
const user = await client.users.create({
name: "John Doe",
email: "john@example.com",
})
console.log(user.id)
```
--------------------------------
### TypeScript Authentication Setup and Role-Based Testing
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/auth-flows.md
This comprehensive example sets up authentication for multiple user roles (admin, editor, viewer) using Playwright's storage state. It includes a setup phase to generate authentication files and then demonstrates role-specific tests to verify access controls.
```typescript
import { test, expect, type Page } from "@playwright/test"
import path from "path"
// Store auth state for each role in separate files
const authDir = path.resolve(__dirname, "../.auth")
// Setup: create auth state files for each role (run in globalSetup or auth.setup)
// This pattern uses Playwright's storage state for efficient role switching
const roles = ["admin", "editor", "viewer"] as const
type Role = (typeof roles)[number]
function authFile(role: Role): string {
return path.join(authDir, `${role}.json`)
}
// Auth setup project — runs before all tests
test.describe("auth setup", () => {
const credentials: Record = {
admin: { email: "admin@example.com", password: "AdminPass123!" },
editor: { email: "editor@example.com", password: "EditorPass123!" },
viewer: { email: "viewer@example.com", password: "ViewerPass123!" },
}
for (const role of roles) {
test(`authenticate as ${role}`, async ({ page }) => {
await page.goto("/login")
await page.getByLabel("Email").fill(credentials[role].email)
await page.getByLabel("Password").fill(credentials[role].password)
await page.getByRole("button", { name: "Sign in" }).click()
await expect(page).toHaveURL("/dashboard")
await page.context().storageState({ path: authFile(role) })
})
}
})
// Admin tests
test.describe("admin access", () => {
test.use({ storageState: authFile("admin") })
test("admin can access user management", async ({ page }) => {
await page.goto("/admin/users")
await expect(page).toHaveURL("/admin/users")
await expect(page.getByRole("heading", { name: "User Management" })).toBeVisible()
await expect(page.getByRole("button", { name: "Add user" })).toBeVisible()
await expect(page.getByRole("button", { name: "Delete" }).first()).toBeVisible()
})
test("admin can access system settings", async ({ page }) => {
await page.goto("/admin/settings")
await expect(page).toHaveURL("/admin/settings")
await expect(page.getByRole("heading", { name: "System Settings" })).toBeVisible()
})
})
// Editor tests
test.describe("editor access", () => {
test.use({ storageState: authFile("editor") })
test("editor can create and edit content", async ({ page }) => {
await page.goto("/content")
await expect(page.getByRole("button", { name: "New post" })).toBeVisible()
await expect(page.getByRole("button", { name: "Edit" }).first()).toBeVisible()
})
test("editor cannot access admin area", async ({ page }) => {
await page.goto("/admin/users")
// Should be redirected or shown forbidden
await expect(page).toHaveURL(/\/(403|dashboard|login)/)
})
})
// Viewer tests
test.describe("viewer access", () => {
test.use({ storageState: authFile("viewer") })
test("viewer can read content", async ({ page }) => {
await page.goto("/content")
await expect(page.getByRole("article").first()).toBeVisible()
})
test("viewer cannot create content", async ({ page }) => {
await page.goto("/content")
await expect(page.getByRole("button", { name: "New post" })).not.toBeVisible()
})
test("viewer cannot access admin area", async ({ page }) => {
await page.goto("/admin/users")
await expect(page).toHaveURL(/\/(403|dashboard|login)/)
})
})
```
--------------------------------
### Kali Linux Live USB Persistence Setup
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/ethical-hacking-methodology/SKILL.md
Commands to create a bootable Kali Linux USB drive with persistence enabled.
```bash
# Create bootable USB
dd if=kali-linux.iso of=/dev/sdb bs=512k status=progress
```
```bash
# Create persistence partition
gparted /dev/sdb
# Add ext4 partition labeled "persistence"
```
```bash
# Configure persistence
mkdir /mnt/usb
mount /dev/sdb2 /mnt/usb
echo "/ union" > /mnt/usb/persistence.conf
umount /mnt/usb
```
--------------------------------
### Incorrect Event Listener Setup
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/react-best-practices/rules/client-passive-event-listeners.md
This example shows the incorrect way to add touch and wheel event listeners without the passive option, which can lead to scroll delays.
```typescript
useEffect(() => {
const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
document.addEventListener("touchstart", handleTouch)
document.addEventListener("wheel", handleWheel)
return () => {
document.removeEventListener("touchstart", handleTouch)
document.removeEventListener("wheel", handleWheel)
}
}, [])
```
--------------------------------
### API Test Structure with TypeScript
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/api-testing.md
Structure API tests in their own directory using `describe` blocks for resources. This example demonstrates GET and POST requests for a 'users' API endpoint.
```typescript
// tests/api/users.spec.ts
import { test, expect } from "@playwright/test"
// No browser is launched — these tests use only the request fixture
test.describe("Users API", () => {
test.describe("GET /api/users", () => {
test("returns paginated user list", async ({ request }) => {
const response = await request.get("/api/users", {
params: { page: 1, limit: 5 },
})
expect(response.status()).toBe(200)
const body = await response.json()
expect(body.users.length).toBeLessThanOrEqual(5)
expect(body.pagination).toMatchObject({
page: 1,
limit: 5,
total: expect.any(Number),
})
})
test("filters by role", async ({ request }) => {
const response = await request.get("/api/users", {
params: { role: "admin" },
})
const body = await response.json()
for (const user of body.users) {
expect(user.role).toBe("admin")
}
})
})
test.describe("POST /api/users", () => {
test("creates a new user with valid data", async ({ request }) => {
const response = await request.post("/api/users", {
data: { name: "Test User", email: `test-${Date.now()}@example.com` },
})
expect(response.status()).toBe(201)
const user = await response.json()
expect(user).toMatchObject({
id: expect.any(Number),
name: "Test User",
})
})
test("rejects duplicate email", async ({ request }) => {
const email = `dupe-${Date.now()}@example.com`
await request.post("/api/users", { data: { name: "First", email } })
const response = await request.post("/api/users", {
data: { name: "Second", email },
})
expect(response.status()).toBe(409)
const body = await response.json()
expect(body.error).toContain("already exists")
})
})
})
```
--------------------------------
### Django Example: Get Current User's Address
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/idor-testing/SKILL.md
This Python snippet shows how to retrieve an address, ensuring it is always filtered by the currently authenticated user in a Django application.
```python
# Instead of: /api/address/123
# Use: /api/address/current-user/billing
def get_address(request):
# Always filter by authenticated user
address = Address.objects.filter(user=request.user).first()
return address
```
--------------------------------
### PostgreSQL Range Partitioning Example
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/database-optimizer/references/postgresql-tuning.md
Create a partitioned table using 'RANGE' partitioning on a timestamp column. Demonstrates creating partitions and querying with partition pruning.
```sql
-- Create partitioned table
CREATE TABLE events (
id BIGSERIAL,
event_type VARCHAR(50),
created_at TIMESTAMP NOT NULL,
data JSONB
) PARTITION BY RANGE (created_at);
-- Create partitions
CREATE TABLE events_2024_01 PARTITION OF events
FOR VALUES FROM ('2024-01-01') TO ('2024-02-01');
CREATE TABLE events_2024_02 PARTITION OF events
FOR VALUES FROM ('2024-02-01') TO ('2024-03-01');
-- Create indexes on partitions
CREATE INDEX idx_events_2024_01_type ON events_2024_01(event_type);
CREATE INDEX idx_events_2024_02_type ON events_2024_02(event_type);
```
```sql
-- Query uses partition pruning
EXPLAIN (ANALYZE)
SELECT * FROM events
WHERE created_at >= '2024-01-15' AND created_at < '2024-01-20';
-- Should show "Partitions pruned: X"
```
--------------------------------
### Quick Start: Rotating Box Animation
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/r3f-animation/SKILL.md
A basic example demonstrating how to create a continuously rotating box using the useFrame hook within a React Three Fiber Canvas.
```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 (
)
}
export default function App() {
return (
)
}
```
--------------------------------
### Configure Environment Variables
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/test-suite-architect/references/day1_onboarding.md
Copy the example environment file and edit it with local development URLs.
```bash
cp .env.example .env
# Edit .env with local development URLs
```
--------------------------------
### Quick Start: Generate a Line Chart
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/chart-image/README.md
A single command to generate a PNG line chart from JSON data. This example demonstrates basic usage with a title and dark mode.
```bash
node scripts/chart.mjs \
--type line \
--data '[{"x":"Mon","y":10},{"x":"Tue","y":25},{"x":"Wed","y":18}]' \
--title "Weekly Trend" \
--dark \
--output chart.png
```
--------------------------------
### Install Dependencies
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/chart-image/SKILL.md
Run this command in the specified directory to install the necessary npm packages for the skill.
```bash
cd /data/clawd/skills/chart-image/scripts && npm install
```
--------------------------------
### Correct Event Listener Setup with Passive Option
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/react-best-practices/rules/client-passive-event-listeners.md
This example demonstrates the correct way to add touch and wheel event listeners using the passive option to improve scrolling performance.
```typescript
useEffect(() => {
const handleTouch = (e: TouchEvent) => console.log(e.touches[0].clientX)
const handleWheel = (e: WheelEvent) => console.log(e.deltaY)
document.addEventListener("touchstart", handleTouch, { passive: true })
document.addEventListener("wheel", handleWheel, { passive: true })
return () => {
document.removeEventListener("touchstart", handleTouch)
document.removeEventListener("wheel", handleWheel)
}
}, [])
```
--------------------------------
### Mocking API routes in Playwright (JavaScript)
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/migration/from-cypress.md
Use `page.route()` to mock network requests in Playwright with JavaScript. This example shows mocking a GET request for product display and error states.
```javascript
const { test, expect } = require("@playwright/test")
test.describe("Product List", () => {
test("displays products from the API", async ({ page }) => {
await page.route("**/api/products", (route) =>
route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify([
{ id: 1, name: "Widget", price: 9.99 },
{ id: 2, name: "Gadget", price: 24.99 },
]),
})
)
await page.goto("/products")
await expect(page.getByTestId("product-card")).toHaveCount(2)
await expect(page.getByTestId("product-card").first()).toContainText("Widget")
})
test("shows error state when API fails", async ({ page }) => {
await page.route("**/api/products", (route) =>
route.fulfill({
status: 500,
contentType: "application/json",
body: JSON.stringify({ error: "Internal server error" }),
})
)
await page.goto("/products")
await expect(page.getByTestId("error-message")).toContainText("Something went wrong")
})
})
```
--------------------------------
### Add MCP Server via Command Line
Source: https://github.com/zebbern/claude-code-guide/blob/main/README.md
Demonstrates adding MCP servers using the command line, including basic syntax, adding local file system access, and examples with environment variables.
```shell
# Basic syntax
claude mcp add [parameters...]
# Actual example: Add local file system access
claude mcp add my-filesystem -- npx -y @modelcontextprotocol/server-filesystem ~/Documents
# Example with environment variables
claude mcp add api-server -e API_KEY=your-key-here -- /path/to/server
```
--------------------------------
### Mocking API routes in Playwright (TypeScript)
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/migration/from-cypress.md
Use `page.route()` to mock network requests in Playwright. This example demonstrates mocking a GET request to display products and handling API errors.
```typescript
import { test, expect } from "@playwright/test"
test.describe("Product List", () => {
test("displays products from the API", async ({ page }) => {
await page.route("**/api/products", (route) =>
route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify([
{ id: 1, name: "Widget", price: 9.99 },
{ id: 2, name: "Gadget", price: 24.99 },
]),
})
)
await page.goto("/products")
await expect(page.getByTestId("product-card")).toHaveCount(2)
await expect(page.getByTestId("product-card").first()).toContainText("Widget")
})
test("shows error state when API fails", async ({ page }) => {
await page.route("**/api/products", (route) =>
route.fulfill({
status: 500,
contentType: "application/json",
body: JSON.stringify({ error: "Internal server error" }),
})
)
await page.goto("/products")
await expect(page.getByTestId("error-message")).toContainText("Something went wrong")
})
})
```
--------------------------------
### Start Next.js Production Server
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/nextjs-developer/references/deployment.md
Build your Next.js application and start the production server. Use PM2 for process management to ensure the server stays running.
```bash
# Build
npm run build
# Start production server
npm start
# With PM2 for process management
pm2 start npm --name "nextjs" -- start
pm2 startup
pm2 save
```
--------------------------------
### Global Setup Authentication (TypeScript)
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/authentication.md
Use this TypeScript code for global setup to authenticate once and save the state. It logs in using provided credentials and saves the session to a file.
```typescript
// global-setup.ts
import { chromium, type FullConfig } from "@playwright/test"
async function globalSetup(config: FullConfig) {
const { baseURL } = config.projects[0].use
const browser = await chromium.launch()
const context = await browser.newContext()
const page = await context.newPage()
await page.goto(`${baseURL}/login`)
await page.getByLabel("Email").fill(process.env.TEST_USER_EMAIL!)
await page.getByLabel("Password").fill(process.env.TEST_USER_PASSWORD!)
await page.getByRole("button", { name: "Sign in" }).click()
await page.waitForURL("**/dashboard")
await context.storageState({ path: ".auth/user.json" })
await browser.close()
}
export default globalSetup
```
--------------------------------
### Mocking Time for Dashboard Greetings (JavaScript)
Source: https://github.com/zebbern/claude-code-guide/blob/main/skills/playwright/core/clock-and-time-mocking.md
Tests the dashboard's greeting message by freezing time using `page.clock.install()`. This JavaScript example demonstrates a basic setup for time-based UI verification.
```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()
})
```