Claude Code Skills Collection

https://github.com/wwwzhouhui/skills_collection
Admin
A comprehensive collection of 13+ reusable Claude Code skills for automation, content generation, AI...
Tokens:87,936
Snippets:386
Trust Score:9.6
Update:7 months ago
Show doc for...
Tokens:
Raw
### Setup Jimeng AI Image Generation API (Bash)

Source: https://context7.com/wwwzhouhui/skills_collection/llms.txt

Sets up the Jimeng AI image and video generation service using a Docker container. This includes starting the Docker container and setting necessary environment variables for API access. Requires Docker to be installed.

```bash
# Prerequisites: Start jimeng-free-api-all Docker container
docker run -it -d --init --name jimeng-free-api-all \
  -p 8001:8000 -e TZ=Asia/Shanghai \
  wwwzhouhui569/jimeng-free-api-all:latest

# Environment variables
export JIMENG_API_KEY="your_sessionid_from_jimeng_cookies"
export JIMENG_API_URL="http://127.0.0.1:8001"
```

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

### Install socks-proxy-agent

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

This command installs the socks-proxy-agent package using npm. It is a prerequisite for using the agent in your Node.js projects.

```bash
npm install socks-proxy-agent
```

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

### Install agent-base with npm

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

Installs the agent-base package using npm. This is the primary method for adding the library to your project.

```bash
npm install agent-base
```

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

### Install https-proxy-agent using npm

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

This command installs the https-proxy-agent package, which provides an HTTP(s) proxy Agent implementation for Node.js. It is used to connect to an HTTP or HTTPS proxy server.

```bash
npm install https-proxy-agent
```

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

### Emulate Mobile Device and Geolocation with Playwright

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright/README.md

This TypeScript example shows how to emulate a specific mobile device (iPhone 13 Pro) with custom geolocation and permissions. It then navigates to Google Maps, interacts with the location feature, and captures a screenshot.

```TypeScript
import { test, devices } from '@playwright/test';

test.use({
  ...devices['iPhone 13 Pro'],
  locale: 'en-US',
  geolocation: { longitude: 12.492507, latitude: 41.889938 },
  permissions: ['geolocation'],
})

test('Mobile and geolocation', async ({ page }) => {
  await page.goto('https://maps.google.com');
  await page.getByText('Your location').click();
  await page.waitForRequest(/.*preview\/pwa/);
  await page.screenshot({ path: 'colosseum-iphone.png' });
});
```

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

### HTTPS module example with HttpsProxyAgent

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

This JavaScript code demonstrates how to use the https-proxy-agent with Node.js's built-in https module. It configures an agent to connect through a proxy server and then makes an HTTPS GET request to a specified endpoint.

```javascript
var url = require('url');
var https = require('https');
var HttpsProxyAgent = require('https-proxy-agent');

// HTTP/HTTPS proxy to connect to
var proxy = process.env.http_proxy || 'http://168.63.76.32:3128';
console.log('using proxy server %j', proxy);

// HTTPS endpoint for the proxy to connect to
var endpoint = process.argv[2] || 'https://graph.facebook.com/tootallnate';
console.log('attempting to GET %j', endpoint);
var options = url.parse(endpoint);

// create an instance of the `HttpsProxyAgent` class with the proxy server information
var agent = new HttpsProxyAgent(proxy);
options.agent = agent;

https.get(options, function (res) {
  console.log('"response" event!', res.headers);
  res.pipe(process.stdout);
});

```

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

### Implement Quick Sort Algorithm (Python)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/siliconflow-api-skills/references/other.md

This snippet shows a basic implementation and usage of the quick sort algorithm in Python. It takes a list of numbers as input and returns a sorted list. The example demonstrates calling the `quick_sort` function and printing the result.

```python
arr = [3, 6, 8, 10, 1, 2, 1]
sorted_arr = quick_sort(arr)
print("Sorted array:", sorted_arr)
```

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

### Call Function for Weather Information (Python)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/siliconflow-api-skills/references/other.md

This example demonstrates calling a Python function named `function_call_playground` with a prompt to retrieve weather information. The function is expected to return a string containing the weather details. The output shows an example of the expected response.

```python
prompt = "how is the weather today in beijing?"
print(function_call_playground(prompt))
```

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

### Playwright Test Generation Example

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright/lib/agents/generator.md

An example demonstrating how the Playwright Test Generator creates a test file based on a plan. The generated file includes comments for each step and follows best practices from the generator log.

```typescript
// spec: specs/plan.md
// seed: tests/seed.spec.ts

test.describe('Adding New Todos', () => {
  test('Add Valid Todo', async ({ page }) => {
    // 1. Click in the "What needs to be done?" input field
    await page.click(...);

    ...
  });
});
```

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

### Create a custom HTTP agent using agent-base

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

Demonstrates creating a custom http.Agent using agent-base. The provided callback function is responsible for creating a net.Socket or tls.Socket for each HTTP request. This example shows how to create a new socket for every request, similar to the 'agent: false' option.

```javascript
var net = require('net');
var tls = require('tls');
var url = require('url');
var http = require('http');
var agent = require('agent-base');

var endpoint = 'http://nodejs.org/api/';
var parsed = url.parse(endpoint);

// This is the important part!
parsed.agent = agent(function (req, opts) {
  var socket;
  // `secureEndpoint` is true when using the https module
  if (opts.secureEndpoint) {
    socket = tls.connect(opts);
  } else {
    socket = net.connect(opts);
  }
  return socket;
});

// Everything else works just like normal...
http.get(parsed, function (res) {
  console.log('"response" event!', res.headers);
  res.pipe(process.stdout);
});
```

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

### Use SocksProxyAgent with HTTPS in JavaScript

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

This JavaScript example illustrates the usage of SocksProxyAgent with Node.js's https module. Similar to the HTTP example, it sets up a proxy agent and applies it to an https.get request. This enables secure connections to be made through a SOCKS proxy.

```javascript
var url = require('url');
var https = require('https');
var SocksProxyAgent = require('socks-proxy-agent');

// SOCKS proxy to connect to
var proxy = process.env.socks_proxy || 'socks://127.0.0.1:1080';
console.log('using proxy server %j', proxy);

// HTTP endpoint for the proxy to connect to
var endpoint = process.argv[2] || 'https://encrypted.google.com/';
console.log('attempting to GET %j', endpoint);
var opts = url.parse(endpoint);

// create an instance of the `SocksProxyAgent` class with the proxy server information
var agent = new SocksProxyAgent(proxy);
opts.agent = agent;

https.get(opts, function (res) {
	console.log('"response" event!', res.headers);
	res.pipe(process.stdout);
});
```

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

### AES Key Derivation and Setup

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Asynchronous functions for deriving cryptographic keys (AES, HMAC) and setting up encryption/decryption contexts. It utilizes Web Crypto API or a fallback for key import and bit derivation. Handles password verification and salt generation.

```javascript
async function L2(c,i,u,f){
c.password=null;
const r=await x8(f8,u,d8,!1,h8),
o=await S8(Object.assign({salt:f},Gf),r,8*(mi[i]*2+2)),
d=new Uint8Array(o),
v=xi(Ke,Be(d,0,mi[i])),
y=xi(Ke,Be(d,mi[i],mi[i]*2)),
m=Be(d,mi[i]*2);
return Object.assign(c,{keys:{key:v,authentication:y,passwordVerification:m},ctr:new m8(new A8(v),Array.from(g8)),hmac:new v8(y)})
}
async function x8(c,i,u,f,r){
if(V1)try{
return await Oi.importKey(c,i,u,f,r)
}
catch{
return V1=!1,
Sa.importKey(i)
}
else return Sa.importKey(i)
}
async function S8(c,i,u){
if(q1)try{
return await Oi.deriveBits(c,i,u)
}
catch{
return q1=!1,
Sa.pbkdf2(i,c.salt,Gf.iterations,u)
}
else return Sa.pbkdf2(i,c.salt,Gf.iterations,u)
}
```

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

### Use SocksProxyAgent with HTTP in JavaScript

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

This JavaScript example shows how to integrate SocksProxyAgent with Node.js's http module. It parses a target URL, creates a SocksProxyAgent instance with proxy server details, and then makes an http.get request using the configured agent. This allows Node.js applications to route HTTP requests through a SOCKS proxy.

```javascript
var url = require('url');
var http = require('http');
var SocksProxyAgent = require('socks-proxy-agent');

// SOCKS proxy to connect to
var proxy = process.env.socks_proxy || 'socks://127.0.0.1:1080';
console.log('using proxy server %j', proxy);

// HTTP endpoint for the proxy to connect to
var endpoint = process.argv[2] || 'http://nodejs.org/api/';
console.log('attempting to GET %j', endpoint);
var opts = url.parse(endpoint);

// create an instance of the `SocksProxyAgent` class with the proxy server information
var agent = new SocksProxyAgent(proxy);
opts.agent = agent;

http.get(opts, function (res) {
	console.log('"response" event!', res.headers);
	res.pipe(process.stdout);
});
```

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

### GitHub README Generator Templates (Markdown & Bash)

Source: https://context7.com/wwwzhouhui/skills_collection/llms.txt

Provides markdown templates and bash commands for generating standardized GitHub README.md files. Supports various project types including basic, full, library, webapp, CLI, and API. The example shows how to prompt for generation using a specific template.

```markdown
<!-- Available templates: basic, full, library, webapp, cli, api -->

<!-- Example prompt for full template generation -->
Please use the full template to generate README for my Vue project:
- Name: vue-admin
- Description: A modern Vue admin management system
- Tech stack: Vue 3, Vite, Element Plus, Pinia
- Features: Permission management, dynamic routing, chart statistics

```

```bash
# Template files location
templates/
  ├── basic.md    # Basic template for all projects
  ├── full.md     # Complete template with all sections
  ├── library.md  # Library/SDK template (npm packages, Go libraries)
  ├── webapp.md   # Web application template (frontend/backend)
  ├── cli.md      # CLI tool template (command-line applications)
  └── api.md      # REST API service template

```

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

### Use SocksProxyAgent with HTTPS in TypeScript

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

This TypeScript example demonstrates how to use the SocksProxyAgent with the built-in https module. It configures an agent with proxy details and then uses it for an https.get request. This is useful for making requests through a SOCKS proxy in a TypeScript environment.

```typescript
import https from 'https';
import { SocksProxyAgent } from 'socks-proxy-agent';

const info = {
	host: 'br41.nordvpn.com',
	userId: 'your-name@gmail.com',
	password: 'abcdef12345124'
};
const agent = new SocksProxyAgent(info);

https.get('https://jsonip.org', { agent }, (res) => {
	console.log(res.headers);
	res.pipe(process.stdout);
});
```

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

### Register Service Worker and Fetch Trace Contexts (JavaScript)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/traceViewer/snapshot.html

This JavaScript code registers a service worker, fetches trace contexts, and reloads the page. It checks for service worker support and waits for the controller to be active. The trace URL is retrieved from the query parameters.

```javascript
(async () => {
  if (!navigator.serviceWorker)
    throw new Error(`Service workers are not supported.\nMake sure to serve the Trace Viewer (${window.location}) via HTTPS or localhost.`);
  navigator.serviceWorker.register('sw.bundle.js');
  if (!navigator.serviceWorker.controller)
    await new Promise(f => navigator.serviceWorker.oncontrollerchange = f);
  const traceUrl = new URL(location.href).searchParams.get('trace');
  const params = new URLSearchParams();
  params.set('trace', traceUrl);
  await fetch('contexts?' + params.toString()).then(r => r.json());
  await location.reload();
})();
```

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

### LocalStorage Management Class with Event Emitter

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

The `O5` class provides a robust way to manage browser local storage. It supports getting and setting string and object types, with built-in JSON parsing and stringification. Crucially, it includes an `onChangeEmitter` to notify listeners of storage changes, facilitating reactive updates in the application.

```javascript
class O5{constructor(){this.onChangeEmitter=new EventTarget}getString(i,u){return localStorage[i]||u}setString(i,u){var f;localStorage[i]=u,this.onChangeEmitter.dispatchEvent(new Event(i)),(f=window.saveSettings)==null||f.call(window)}getObject(i,u){if(!localStorage[i])return u;try{return JSON.parse(localStorage[i])}catch{return u}}setObject(i,u){var f;localStorage[i]=JSON.stringify(u),this.onChangeEmitter.dispatchEvent(new Event(i)),(f=window.saveSettings)==null||f.call(window)}}const ba=new O5;
```

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

### React Scheduler Utilities

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

This snippet exposes various utilities from the React scheduler, including functions for scheduling callbacks (`ea`, `We`), checking for yielding (`Di`), requesting paint (`wa`), getting current time (`ie`), and managing priority levels (`cc`, `yr`, `Er`, `Mi`, `Vh`, `pr`). It also includes logging (`qh`) and disabling yield value (`Zh`).

```javascript
var ea=c.unstable_scheduleCallback,
  We=c.unstable_cancelCallback,
  Di=c.unstable_shouldYield,
  wa=c.unstable_requestPaint,
  ie=c.unstable_now,
  cc=c.unstable_getCurrentPriorityLevel,
  yr=c.unstable_ImmediatePriority,
  Er=c.unstable_UserBlockingPriority,
  Mi=c.unstable_NormalPriority,
  Vh=c.unstable_LowPriority,
  pr=c.unstable_IdlePriority,
  qh=c.log,
  Zh=c.unstable_setDisableYieldValue,
  vl=null,
  Ae=null
```

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

### Compose Images using Jimeng API (curl)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/xiaohuihui-tech-article/jimeng_mcp_skill/jimeng_curl.txt

This snippet demonstrates how to compose new images by combining existing ones using the Jimeng API. It requires an API key and takes a prompt describing the composition, along with a list of image URLs to be combined. Parameters for model, aspect ratio, and resolution are also included. The response provides URLs to the resulting composed images.

```bash
curl --location --request POST 'https://jimeng1.duckcloud.fun/v1/images/compositions' \
--header 'Authorization: Bearer 0c461c8440a06e796ff904494b6f1f4a' \
--header 'Content-Type: application/json' \
--data-raw '{
  "model": "jimeng-4.5",
  "prompt": "请把这个2个图片进行合成",
  "images": [
        "https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/bab623359bd9410da0c1f07897b16fec~tplv-tb4s082cfz-resize:0:0.image?lk3s=8e790bc3&x-expires=1788961069&x-signature=cbtnyeSIcqWpngHdoYWFkCra3cA%3D",
        "https://p3-dreamina-sign.byteimg.com/tos-cn-i-tb4s082cfz/6acf16d07c47413898aea2bdd1ad339e~tplv-tb4s082cfz-resize:0:0.image?lk3s=8e790bc3&x-expires=1788961069&x-signature=30S2i%2FvCH0eRR32CehcEaK8t5ns%3D"
      ],
  "ratio": "4:3",
  "resolution": "2k"
}'
```

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

### Initialize Zlib Inflate

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Initializes the zlib inflate process. It sets up the internal state, including the window size and compression method, and prepares for data decompression. Requires a window size between 8 and 15 bits.

```javascript
c.inflateInit=function(u,f){return u.msg=null,c.blocks=null,f<8||f>15?(c.inflateEnd(u),he):(c.wbits=f,u.istate.blocks=new wm(u,1<<f),i(u),pt)}
```

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

### Determine File Size (HEAD or GET)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Determines the size of a file, either by preventing HEAD requests and calling a GET handler, or by reading the 'Content-Length' header from a HEAD request. It updates the `size` property of the context object.

```javascript
async function e2(c,i,u){if(c.preventHeadRequest)await u(c,c.options);else{const r=(await i(\_8,c,sr(c))).headers.get(K8);r?c.size=Number(r):await u(c,c.options)}}
```

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

### Read Data from Network (HEAD)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Reads data from a network resource, typically using a HEAD request to get the size. It then stores the data as a Uint8Array and sets the size property. Dependencies: `ah` function.

```javascript
async function ah(c,i){const u=await i(lr,c,sr(c));c.data=new Uint8Array(await u.arrayBuffer()),c.size||(c.size=c.data.length)}
```

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

### Generate Images from Text Prompt using Jimeng API (curl)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/xiaohuihui-tech-article/jimeng_mcp_skill/jimeng_curl.txt

This snippet shows how to generate images based on a text description using the Jimeng API. It requires an API key for authorization and specifies parameters like the model, prompt, negative prompt, aspect ratio, and resolution. The response contains URLs to the generated images.

```bash
curl --location --request POST 'https://jimeng1.duckcloud.fun/v1/images/generations' \
--header 'Authorization: Bearer 111111' \
--header 'Content-Type: application/json' \
--data-raw '{
  "model": "jimeng-4.5",
  "prompt": "请给我生成4张连续的儿童故事绘本-小斑马和小花猫",
  "negativePrompt": "",
  "ratio": "4:3",
  "resolution": "2k"
}'
```

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

### Initialize HttpsProxyAgent with Options

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

The HttpsProxyAgent class allows you to proxy HTTPS and WebSocket requests through an HTTP(S) proxy server. It extends http.Agent and can be initialized with either a proxy server URI string or an options object. The options object can specify host, port, protocol, and additional headers for the CONNECT method, with other options passed to net.connect/tls.connect.

```javascript
new HttpsProxyAgent(options)
```

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

### User Request for Login Test Generation

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright/lib/agents/generator.md

Example of a user request for generating a login test. The assistant confirms the use of the generator agent for this task, highlighting its suitability for browser automation tests.

```text
Context: User wants to test a login flow on their web application.
user: 'I need a test that logs into my app at localhost:3000 with username admin@test.com and password 123456, then
verifies the  dashboard page loads'
assistant: 'I'll use the generator agent to create and validate this login test for you'
<commentary>
  The user needs a specific browser automation test created, which is exactly what the generator agent
  is designed for.
</commentary>
```

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

### SiliconFlow API Integration (Python)

Source: https://context7.com/wwwzhouhui/skills_collection/llms.txt

Demonstrates how to use the OpenAI client library to interact with SiliconFlow's cloud AI services. This includes chat completions, image generation, text embeddings, text-to-speech, and speech-to-text. Requires an API key and base URL for SiliconFlow.

```python
from openai import OpenAI

client = OpenAI(
    api_key="your-siliconflow-api-key",
    base_url="https://api.siliconflow.cn/v1"
)

# Chat Completions with DeepSeek-V3
response = client.chat.completions.create(
    model="deepseek-ai/DeepSeek-V3",
    messages=[{"role": "user", "content": "Explain quantum computing in simple terms"}],
    temperature=0.7,
    max_tokens=2000,
    stream=True  # Enable streaming
)
for chunk in response:
    print(chunk.choices[0].delta.content, end="")

# Image Generation
response = client.images.generate(
    model="stabilityai/stable-diffusion-3-medium",
    prompt="A futuristic city at sunset, cyberpunk style",
    n=1,
    size="1024x1024"
)
print(response.data[0].url)

# Text Embeddings
response = client.embeddings.create(
    model="Pro/BAAI/bge-m3",
    input=["Hello world", "Machine learning is fascinating"]
)
print(response.data[0].embedding[:5])

# Text-to-Speech
response = client.audio.speech.create(
    model="fishaudio/fish-speech-1.5",
    input="Hello, this is a test of text to speech.",
    voice="fishaudio/fish-speech-1.5:alex"  # Options: alex, anna, bella, benjamin, etc.
)
response.stream_to_file("speech.mp3")

# Speech-to-Text
with open("audio.mp3", "rb") as audio_file:
    response = client.audio.transcriptions.create(
        model="FunAudioLLM/SenseVoiceSmall",
        file=audio_file
    )
    print(response.text)

```

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

### Synchronize Zlib Inflate Stream

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Attempts to synchronize the zlib inflate stream. This function is useful for recovering from errors or finding the start of a compressed block within a corrupted stream. It searches for a known marker sequence.

```javascript
c.inflateSync=function(u){let f,r,o,d,v;if(!u||!u.istate)return he;const y=u.istate;if(y.mode!=Zn&&(y.mode=Zn,y.marker=0),(f=u.avail_in)===0)return An;for(r=u.next_in_index,o=y.marker;f!==0&&o<4;)u.read_byte(r)==Dm[o]?o++:u.read_byte(r)!==0?o=0:o=4-o,r++,f--;return u.total_in+=r-u.next_in_index,u.next_in_index=r,u.avail_in=f,y.marker=o,o!=4?Ht:(d=u.total_in,v=u.total_out,i(u),u.total_in=d,u.total_out=v,y.mode=Ai,pt)}
```

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

### Establish WebSocket Connection via SOCKS Proxy (JavaScript)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

This snippet demonstrates establishing a WebSocket connection through a SOCKS proxy. It requires the 'ws' and 'socks-proxy-agent' npm packages. The code configures the proxy server and WebSocket endpoint, then initiates the connection, logging events like 'open' and 'message'.

```javascript
var WebSocket = require('ws');
var SocksProxyAgent = require('socks-proxy-agent');

// SOCKS proxy to connect to
var proxy = process.env.socks_proxy || 'socks://127.0.0.1:1080';
console.log('using proxy server %j', proxy);

// WebSocket endpoint for the proxy to connect to
var endpoint = process.argv[2] || 'ws://echo.websocket.org';
console.log('attempting to connect to WebSocket %j', endpoint);

// create an instance of the `SocksProxyAgent` class with the proxy server information
var agent = new SocksProxyAgent(proxy);

// initiate the WebSocket connection
var socket = new WebSocket(endpoint, { agent: agent });

socket.on('open', function () {
	console.log('"open" event!');
	socket.send('hello world');
});

socket.on('message', function (data, flags) {
	console.log('"message" event! %j %j', data, flags);
	ssocket.close();
});
```

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

### UTF-8 Text File Reading Class

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

A class for reading text files, defaulting to UTF-8 encoding. It extends the Blob reading capabilities to specifically handle text content and provides a method to get the data as a string.

```javascript
class a3 extends _2{
constructor(i){
super(i),
Object.assign(this,{encoding:i,utf8:!i||i.toLowerCase()=="utf-8"})
}
async getData(){
const{encoding:i,utf8:u}=this,
f=await super.getData();
if(f.text&&u)return f.text();
{
const r=new FileReader;
return new Promise((o,d)=>{
Object.assign(r,{onload:({target:v})=>o(v.result),onerror:()=>d(r.error)}),
r.readAsText(f,i)
})
}
}
}
```

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

### Text-to-Video Generation using Jimeng API

Source: https://context7.com/wwwzhouhui/skills_collection/llms.txt

Creates a video from a text description using the Jimeng API. Requires specifying the model, prompt, aspect ratio, resolution, and optionally duration. Outputs a JSON object containing the video URL.

```json
{
    "model": "jimeng-video-3.0",
    "prompt": "An orange cat sitting by a river, fishing with a rod, sunny day",
    "ratio": "16:9",
    "resolution": "720p"
}
```

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

### User Request for Checkout Flow Test Generation

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright/lib/agents/generator.md

Example of a user request for generating a complex checkout flow test. The assistant confirms the use of the generator agent, emphasizing its capability to handle multi-step user journeys.

```text
Context: User has built a new checkout flow and wants to ensure it works correctly.
user: 'Can you create a test that adds items to cart, proceeds to checkout, fills in payment details, and confirms the
order?'
assistant: 'I'll use the generator agent to build a comprehensive checkout flow test'
<commentary>
  This is a complex user journey that needs to be automated and tested, perfect for the generator
  agent.
</commentary>
```

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

### Web Worker Message Handling (JavaScript)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Handles incoming messages from a Web Worker. It processes different message types like 'start', 'data', 'ack', 'close', and 'error', updating the main thread's state accordingly.

```javascript
async function V8({data:c},i){
const{type:u,value:f,messageId:r,result:o,error:d}=c,
{reader:v,writer:y,resolveResult:m,rejectResult:E,onTaskFinished:O}=i;
try{
if(d){
const{message:v}=d;
throw new Error(v)
}
switch(u){
case M8:
break;
case W1:
v&&v.enqueue(f);
break;
case H8:
break;
case F1:
O();
break;
default:
break
}
}
catch(v){
E(v)
}
}
```

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

### Generate Professional PPT Presentations (Python)

Source: https://context7.com/wwwzhouhui/skills_collection/llms.txt

Generates a 25-page PowerPoint presentation with customizable themes (warm, business, Morandi colors) and a fixed structure including cover, TOC, 4 chapters with transition pages, and closing slides. Uses the `ppt_generator` library. Supports CLI usage with a JSON config file.

```python
from ppt_generator import PPTGenerator
import json

# Configuration for PPT generation
config = {
    "title": "2025 Annual Report",
    "subtitle": "Work Summary / Performance Review",
    "year": "2025",
    "theme": "商务简约",  # Options: 暖色调, 商务简约, 莫兰迪色系
    "filename": "annual_report_2025.pptx",
    "chapters": [
        {
            "title": "Annual Overview",
            "description": "Review of 2025 achievements and highlights",
            "pages": [
                {
                    "title": "Key Metrics",
                    "content": [
                        {"title": "Projects Completed", "description": "15 major projects delivered, 95% completion rate"},
                        {"title": "Team Growth", "description": "Team expanded to 30 members, 100% retention"},
                        {"title": "Revenue Growth", "description": "40% YoY revenue increase, 50+ new clients"},
                        {"title": "Innovation", "description": "3 patents filed, 12 technical articles published"}
                    ]
                }
            ]
        },
        # ... additional chapters (4 chapters required, each with 4 content pages)
    ]
}

# Generate and save PPT
generator = PPTGenerator(theme=config.get("theme", "商务简约"))
generator.generate_full_ppt(config)
generator.save(config.get("filename", "output.pptx"))

# CLI usage with JSON config file
# python ppt_generator.py my_config.json
```

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

### Seedance 2.0 Video Generation Workflow (Bash)

Source: https://context7.com/wwwzhouhui/skills_collection/llms.txt

A three-stage workflow using cURL to generate a video with Seedance 2.0. It first generates a reference image using the Jimeng API (Text-to-Image), then uses that image as a reference for Seedance 2.0 to create a video with detailed scene descriptions and animations. Requires API keys and URLs.

```bash
# Stage 1: Text-to-Image for first frame reference
curl -s --max-time 120 -X POST "${JIMENG_API_URL}/v1/images/generations" \
  -H "Authorization: Bearer ${SESSION_ID}" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "jimeng-4.5",
    "prompt": "Sunny beach, orange cat sitting on wet sand, curiously watching a crab, golden sunlight, vibrant 3D animation style",
    "ratio": "9:16",
    "resolution": "2k"
  }'

# Download generated image
IMAGE_URL=$(echo "${RESPONSE}" | jq -r '.data[0].url')
curl -sL -o /tmp/seedance_frame.png "${IMAGE_URL}"

# Stage 2: Seedance 2.0 Video Generation (requires at least 1 reference image)
curl -s --max-time 300 -X POST "${JIMENG_API_URL}/v1/videos/generations" \
  -H "Authorization: Bearer ${SESSION_ID}" \
  -F "model=seedance-2.0-fast" \
  -F "prompt=Cute 3D animation style, 4 seconds, 9:16 vertical

@1 as the first frame reference

0-1s: Medium shot, the cat curiously watches the crab, waves gently lapping the shore
1-3s: Close-up follow, cat reaches out to poke the crab, crab raises claws in defense, cat jumps back with exaggerated expression
3-4s: Medium shot pulls back, cat and crab face off, blue ocean and white waves in background

Background: Cheerful cartoon music + ocean waves" \
  -F "ratio=9:16" \
  -F "resolution=720p" \
  -F "duration=4" \
  -F "files=@/tmp/seedance_frame.png"

# Download generated video
VIDEO_URL=$(echo "${RESPONSE}" | jq -r '.data[0].url')
curl -L -o "seedance_output.mp4" "${VIDEO_URL}"
```

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

### Handle selection events in the DOM (JavaScript)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Manages selection events, particularly for input elements and text areas. It captures selection start and end points and checks for changes using `Ml` and `Dl`. If a change is detected and an `onSelect` listener exists, it triggers the listener.

```javascript
function fo(t,e,n){var a=n.window===n?n.document:n.nodeType===9?n:n.ownerDocument;Nc||Ya==null||Ya!==Yi(a)||(a=Ya,"selectionStart"in a&&jc(a)?a={start:a.selectionStart,end:a.selectionEnd}:(a=(a.ownerDocument&&a.ownerDocument.defaultView||window).getSelection(),a={anchorNode:a.anchorNode,anchorOffset:a.anchorOffset,focusNode:a.focusNode,focusOffset:a.focusOffset}),Ml&&Dl(Ml,a)||(Ml=a,a=Du(Hc,"onSelect"),0<a.length&&(e=new Vi("onSelect","select",null,e,n),t.push({event:e,listeners:a}),e.target=Ya)))}
```

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

### Prevent JavaScript URL Execution in React

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

This function checks if a given URL starts with 'javascript:' and blocks its execution as a security precaution in React. It returns a modified URL or an error message if the URL is deemed unsafe. This is crucial for preventing cross-site scripting (XSS) attacks.

```javascript
var ug=/^[\\u0000-\\u001F ]*j[\\r\\n\\t]*a[\\r\\n\\t]*v[\\r\\n\\t]*a[\\r\\n\\t]*s[\\r\\n\\t]*c[\\r\\n\\t]*r[\\r\\n\\t]*i[\\r\\n\\t]*p[\\r\\n\\t]*t[\\r\\n\\t]*:/i;
function Li(t){
    return ug.test(""+t)?"javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')":t
}
```

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

### React DOM Preinit Function

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Pre-initializes a resource, such as a stylesheet or script, to be loaded and parsed early. Supports various options like crossOrigin, integrity, and fetchPriority.

```javascript
le.preinit=function(y,m){if(typeof y=="string"&&m&&typeof m.as=="string"){var E=m.as,O=v(E,m.crossOrigin),w=typeof m.integrity=="string"?m.integrity:void 0,L=typeof m.fetchPriority=="string"?m.fetchPriority:void 0;E==="style"?f.d.S(y,typeof m.precedence=="string"?m.precedence:void 0,{crossOrigin:O,integrity:w,fetchPriority:L}):E==="script"&&f.d.X(y,{crossOrigin:O,integrity:w,fetchPriority:L,nonce:typeof m.nonce=="string"?m.nonce:void 0})}}
```

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

### Search for Zip Local File Header Signature (JavaScript)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Searches for the local file header signature within a given range of data. This function is used to locate the start of a file entry within a zip archive, potentially across multiple read operations.

```javascript
async function l5(c,i,u,f,r){const o=new Uint8Array(4),d=Ut(o);u5(d,0,i);const v=f+r;return await y(f)||await y(Math.min(v,u));async function y(m){const E=u-m,O=await Jt(c,E,m);for(let w=O.length-f;w>=0;w--)if(O\[w\]==o\[0\]&&O\[w+1\]==o\[1\]&&O\[w+2\]==o\[2\]&&O\[w+3\]==o\[3\])return{offset:E+w,buffer:O.slice(w,w+f).buffer}}}
```

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

### Test Report Search and Filtering in React

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

A React component for handling search queries and filtering within test reports. It manages state for the search query, expanded files, and uses context to get initial query parameters. It also handles URL query parameters.

```javascript
const Mv=({report:c})=>{var Q,q;const i=at.useContext(Qe),[u,f]=at.useState(new Map),[r,o]=at.useState(i.get("q")||""),[d,v]=at.useState(!1),[y]=Bh("mergeFiles",!1),m=i.get("testId"),E=((Q=i.get("q"))==null?void 0:Q.toString())||"",O=E?"&q="+E
```

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

### React Context API Implementation

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Provides the implementation for React's Context API, including `createContext`, `Provider`, and `Consumer` components. It manages context values and allows components to subscribe to context changes.

```javascript
ht.createContext=function(b){return b={$$typeof:d,_currentValue:b,_currentValue2:b,_threadCount:0,Provider:null,Consumer:null},b.Provider=b,b.Consumer={$$typeof:o,_context:b},b}
```

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

### Traverse iframes to get the current window context (JavaScript)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Recursively traverses through nested iframes to find the deepest window context. It checks for `contentWindow.location.href` to ensure the iframe is accessible. Returns the `window` object of the deepest accessible iframe or the initial window if no iframes are found or accessible.

```javascript
function so(t){t=t!=null&&t.ownerDocument!=null&&t.ownerDocument.defaultView!=null?t.ownerDocument.defaultView:window;for(var e=Yi(t.document);e instanceof t.HTMLIFrameElement;){try{var n=typeof e.contentWindow.location.href=="string"}catch{n=!1}if(n)t=e.contentWindow;else break;e=Yi(t.document)}return e}
```

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

### React Scheduler Initialization (JavaScript)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Initializes and exports the React scheduler module. This function ensures that the scheduler is loaded and available for use, potentially setting up internal states and dependencies.

```javascript
var c2;function rr(){return c2||(c2=1,jf.exports=s5()),jf.exports}var at=rr();const ge=fm(at);
```

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

### Get normalized animation and transition event names (JavaScript)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Retrieves the normalized, cross-browser compatible name for animation and transition events. It checks a cache (`Bc`) and uses the `La` mapping to return the correct event name. If no normalized name is found, it returns the original event name.

```javascript
function ua(t){if(Bc[t])return Bc[t];if(!La[t])return t;var e=La[t],n;for(n in e)if(e.hasOwnProperty(n)&&n in ro)return Bc[t]=e[n];return t}
```

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

### React DOM Client Initialization

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Initializes the React DOM client-side rendering environment. It includes checks for React DevTools and exports the necessary functions.

```javascript
var d2;function h5(){if(d2)return vi;d2=1;var c=r5(),i=rr(
```

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

### Agent callback returning an existing http.Agent

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

Shows how the agent-base callback can return another http.Agent instance. This is useful for delegating the socket management to existing agents, like the global http.Agent or https.globalAgent.

```javascript
agent(function (req, opts) {
  return opts.secureEndpoint ? https.globalAgent : http.globalAgent;
});
```

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

### Initialize Playwright Theme and Event Listeners

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

This function initializes theme-related event listeners for Playwright. It adds listeners for 'focus' and 'blur' events on the window to manage an 'inactive' class on the body, and sets the initial theme based on the user's OS preference.

```javascript
function V5(){if(document.playwrightThemeInitialized)return;document.playwrightThemeInitialized=!0,document.defaultView.addEventListener("focus",f=>{f.target.document.nodeType===Node.DOCUMENT_NODE&&document.body.classList.remove("inactive")},!1),document.defaultView.addEventListener("blur",f=>{document.body.classList.add("inactive")},!1);const i=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark-mode":"light-mode";ba.getString("theme",i)==="dark-mode"?document.documentElement.classList.add("dark-mode"):document.documentElement.classList.add("light-mode")}
```

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

### Callback Function for HTTP Client Request

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/ThirdPartyNotices.txt

Details on the callback function used with http.ClientRequest for handling HTTP requests.

```APIDOC
## callback(http.ClientRequest req, Object options, Function cb)

### Description
The `callback` function is designed to be used with `http.ClientRequest`. It allows access to the request object (`req`) to inspect headers and paths, and the `options` object which contains parameters for `http.request()` or `https.request()`. This `options` object is formatted to be directly usable with `net.connect()` or `tls.connect()`. The created socket should be passed to the callback function `cb` to continue the HTTP request.

If the `https` module is used, the `secureEndpoint` property within the `options` object will be set to `true`.

### Method
Callback Function

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Example usage within a Node.js HTTP request context
const http = require('http');

const req = http.request({ host: 'example.com', port: 80, method: 'GET' }, (res) => {
  // Handle response
});

// Assuming 'options' and 'cb' are defined elsewhere
// req.callback(req, options, cb);
```

### Response
#### Success Response (200)
This callback function does not directly return a success response. It facilitates the continuation of an HTTP request.

#### Response Example
N/A
```

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

### Handle Composition Events in JavaScript

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

This snippet demonstrates how to detect and handle composition events such as 'compositionstart', 'compositionend', and 'compositionupdate'. It checks for browser compatibility and updates internal state variables based on the event type and input.

```javascript
if(Cc)t:{switch(t){case"compositionstart":var ft="onCompositionStart";break t;case"compositionend":ft="onCompositionEnd";break t;case"compositionupdate":ft="onCompositionUpdate";break t}ft=void 0}else Qa?Jr(t,n)&&(ft="onCompositionEnd"):t==="keydown"&&n.keyCode===229&&(ft="onCompositionStart");ft&&(Kr&&n.locale!=="ko"&&(Qa||ft!=="onCompositionStart"?ft==="onCompositionEnd"&&Qa&&(it=Vr()):(bn=X,Sc="value"in bn?bn.value:bn.textContent,Qa=!0)),mt=Du(B,ft),0<mt.length&&(ft=new Ir(ft,t,null,n,X),k.push({event:ft,listeners:mt}),it?ft.data=it:(it=Pr(n),it!==null&&(ft.data=it)))),(it=Hg?Ng(t,n):Bg(t,n))&&(ft=Du(B,"onBeforeInput"),0<ft.length&&(mt=new Ir("onBeforeInput","beforeinput",null,n,X),k.push({event:mt,listeners:ft}),mt.data=it)),TA(k,t,B,n,X)}
```

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

### React DOM Preinit Module Function

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Pre-initializes a JavaScript module, typically for dynamic imports, with options for cross-origin, integrity, and nonce.

```javascript
le.preinitModule=function(y,m){if(typeof y=="string")if(typeof m=="object"&&m!==null){if(m.as==null||m.as==="script"){var E=v(m.as,m.crossOrigin);f.d.M(y,{crossOrigin:E,integrity:typeof m.integrity=="string"?m.integrity:void 0,nonce:typeof m.nonce=="string"?m.nonce:void 0})}}else f.d.M(y)}
```

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

### CI/Commit Information Display in React

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Components for displaying CI (Continuous Integration) and Git commit information. Sv displays CI title and link, while Tv displays commit subject, author, and date. Both components are designed for use within a larger metadata view.

```javascript
const Sv=({info:c})=>{const i=c.prTitle||`Commit ${c.commitHash}`,u=c.prHref||c.commitHref;return A.jsx("div",{className:"metadata-section",role:"list",children:A.jsx("div",{role:"listitem",children:A.jsx("a",{href:u,target:"_blank",rel:"noopener noreferrer",title:i,children:i})})})},Tv=({ci:c,commit:i})=>{const u=(c==null?void 0:c.prTitle)||i.subject,f=(c==null?void 0:c.prHref)||(c==null?void 0:c.commitHref),r=` <${i.author.email}>`,o=`${i.author.name}${r}`,d=Intl.DateTimeFormat(void 0,{dateStyle:"medium"}).format(i.committer.time),v=Intl.DateTimeFormat(void 0,{dateStyle:"full",timeStyle:"long"}).format(i.committer.time);return A.jsxs("div",{className:"metadata-section",role:"list",children:[A.jsxs("div",{role:"listitem",children:[f&&A.jsx("a",{href:f,target:"_blank",rel:"noopener noreferrer",title:u,children:u}),!f&&A.jsx("span",{title:u,children:u})]}),A.jsxs("div",{role:"listitem",className:"hbox",children:[A.jsx("span",{className:"mr-1",children:o}),A.jsxs("span",{title:v,children:[" on ",d]})]})]})}
```

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

### Image-to-Video Animation using Jimeng API

Source: https://context7.com/wwwzhouhui/skills_collection/llms.txt

Animates a static image by adding motion and camera effects using the Jimeng API. Requires specifying the model, prompt, file paths to the image(s), aspect ratio, resolution, and optionally duration. Outputs a JSON object with the video URL.

```json
{
    "model": "jimeng-video-3.0",
    "prompt": "Add gentle motion and natural camera zoom for cinematic feel",
    "file_paths": ["https://example.com/photo.jpg"],
    "ratio": "16:9",
    "resolution": "720p"
}
```

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

### Toggle Application Theme (Dark/Light Mode)

Source: https://github.com/wwwzhouhui/skills_collection/blob/main/mp-cover-generator/node_modules/playwright-core/lib/vite/htmlReport/index.html

Provides functionality to toggle the application's theme between dark and light modes. It updates the document's class list, stores the preference in local storage, and notifies any registered listeners about the theme change.

```javascript
const q5=new Set;function Z5(){const c=Jf(),i=c==="dark-mode"?"light-mode":"dark-mode";document.documentElement.classList.remove(c),document.documentElement.classList.add(i),ba.setString("theme",i);for(const u of q5)u(i)}function Jf(){return document.documentElement.classList.contains("dark-mode")?"dark-mode":"light-mode"}function I5(){const[c,i]=ge.useState(Jf()==="dark-mode");return[c,u=>{Jf()==="dark-mode"!==u&&Z5(),i(u)}]}
```
Tokens:
Raw