### Three.js Quick Start Example

Source: https://agentpedia.codes/agent-skills/creative/threejs-fundamentals

A basic Three.js setup including scene, camera, renderer, a cube mesh, lighting, an animation loop, and resize handling.

```javascript
import * as THREE from "three";

// Create scene, camera, renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

// Add a mesh
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Add light
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);

camera.position.z = 5;

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

// Handle resize
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
```

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

### Vercel KV Quick Start Setup

Source: https://agentpedia.codes/docs/skills

Follow these steps to set up Vercel KV, pull environment variables, and install the necessary npm package.

```bash
# Create KV: Vercel Dashboard → Storage → KV
vercel env pull .env.local # Creates KV_REST_API_URL and KV_REST_API_TOKEN
npm install @vercel/kv
```

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

### Vercel KV Quick Start Setup

Source: https://agentpedia.codes/agent-skills/database

Basic setup for Vercel KV, a Redis-compatible database service. Includes environment variable setup and package installation.

```bash
vercel env pull .env.local
npm install @vercel/kv
```

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

### Basic SAST Tool Setup

Source: https://agentpedia.codes/agent-skills/security/sast-configuration

Quick start commands for installing and running Semgrep, SonarQube with Docker, and CodeQL CLI.

```bash
# Semgrep quick start
pip install semgrep
semgrep --config=auto --error
```

```bash
# SonarQube with Docker
docker run -d --name sonarqube -p 9000:9000 sonarqube:latest
```

```bash
# CodeQL CLI setup
gh extension install github/gh-codeql
codeql database create mydb --language=python
```

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

### Verify Project Setup

Source: https://agentpedia.codes/agent-skills/workflow/project-planning

Starts the development server to verify the project setup. Check for '[expected output]' in the console.

```bash
pnpm dev
# Should see: [expected output]
```

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

### Install Multiple shadcn/ui Components

Source: https://agentpedia.codes/agent-skills/react/shadcn-ui

Install several components at once by listing them after the 'add' command. This example adds 'button', 'input', and 'form'.

```bash
npx shadcn@latest add button input form
```

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

### Initialize Nuxt Module Project

Source: https://agentpedia.codes/agent-skills/nuxt

Quick start guide for creating a new Nuxt module project using the Nuxt CLI. Includes installation and development server commands.

```bash
npx nuxi init -t module my-module
cd my-module && npm install
npm run dev # Start playground
npm run dev:build
```

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

### Install Dependencies for Manual shadcn/ui Component Setup

Source: https://agentpedia.codes/agent-skills/react/shadcn-ui

If setting up components manually, install the required dependencies, such as Radix UI primitives.

```bash
npm install @radix-ui/react-slot
```

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

### Setup Local Database (Postgres) with Docker

Source: https://agentpedia.codes/mcp/bluesky

Quick setup for a local Postgres database using Docker. Ensure Docker Desktop is installed.

```markdown
1. **Install Docker Desktop**:
- If you don't have Docker installed, d...
```

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

### Install Desktop Commander

Source: https://agentpedia.codes/mcp/desktopcommander

Use npx to install and set up the Desktop Commander. This command fetches the latest version and initiates the setup process.

```bash
npx @wonderwhy-er/desktop-commander@latest setup
```

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

### NextAuth.js (Auth.js) v5 Setup

Source: https://agentpedia.codes/mcp/bitable-mcp

Boilerplate for secure authentication with Google/GitHub using NextAuth.js v5. Install the necessary dependencies to get started.

```bash
# Install the NextAuth.js beta dependencies
```

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

### Example Workflow: Open URL

Source: https://agentpedia.codes/agent-skills/ai-tools/browser-use

Initialize a new browser session with a specified URL.

```bash
browser-use open <url>
```

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

### Example: Setup Environment Variables

Source: https://agentpedia.codes/mcp/chroma-2

Illustrates how to configure environment variables for different deployment branches, specifically using a `.env.local` file for local development.

```dotenv
# Local Development (.env.local):
# Create .env.local for local development.
```

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

### Install Playwright MCP Server

Source: https://agentpedia.codes/agent-skills/testing/playwright-mcp

Use this command to install the Playwright MCP server. This is the recommended way to get started with the tool.

```bash
npx skills add sfc-gh-dflippo/snowflake-dbt-demo
```

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

### Install C64 Bridge with npx

Source: https://agentpedia.codes/mcp/c64-bridge

Installs the latest version of the c64bridge tool using npx. This is a quick way to get started with the tool.

```bash
npx -y c64bridge@latest
```

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

### Cloudflare R2 Quick Start Guide

Source: https://agentpedia.codes/agent-skills/backend/cloudflare-r2

Steps to set up a Cloudflare R2 bucket, bind it to a Worker, and perform basic upload/download operations. Includes deployment instructions.

```bash
# 1. Create bucket
npx wrangler r2 bucket create my-bucket

# 2. Add binding to wrangler.jsonc
# {
#   "r2_buckets": [{
#     "binding": "MY_BUCKET",
#     "bucket_name": "my-bucket",
#     "preview_bucket_name": "my-bucket-preview"  // Optional: separate dev/prod
#   }]
# }

# 3. Upload/download from Worker
type Bindings = { MY_BUCKET: R2Bucket };

// Upload
await env.MY_BUCKET.put('file.txt', data, {
  httpMetadata: { contentType: 'text/plain' }
});

// Download
const object = await env.MY_BUCKET.get('file.txt');
if (!object) return c.json({ error: 'Not found' }, 404);

return new Response(object.body, {
  headers: {
    'Content-Type': object.httpMetadata?.contentType || 'application/octet-stream',
    'ETag': object.httpEtag,
  },
});

# 4. Deploy
npx wrangler deploy

```

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

### Install Notion MCP Server via npx

Source: https://agentpedia.codes/mcp/notion-4

Installs the Notion MCP Server using the npx command. This is a quick way to get started.

```bash
npx @notionhq/notion-mcp-server # Or explicitly specify stdio
```

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

### TanStack Start API Route Setup

Source: https://agentpedia.codes/agent-skills/security/better-auth

Set up the API route for Better Auth in TanStack Start by defining GET and POST handlers that utilize the `auth.handler`.

```typescript
import { auth } from '@/lib/auth'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/api/auth/$')({
  server: {
    handlers: {
      GET: ({ request }) => auth.handler(request),
      POST: ({ request }) => auth.handler(request),
    },
  },
})
```

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

### Example Configuration File

Source: https://agentpedia.codes/agent-skills/ai-tools/skill-skeleton

A complete, working configuration file example. Explains key configuration decisions.

```plaintext
[TODO: Complete, working configuration file]
```

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

### Project Setup and Build Commands

Source: https://agentpedia.codes/agent-skills/security/audit-prep-assistant

Commands for cloning the repository, checking out a specific branch, installing dependencies, building the project, and running tests using Foundry.

```bash
git clone https://github.com/project/repo.git
cd repo
git checkout audit-march-2024  # Frozen branch
forge install
forge build
forge test
```

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

### Stripe Checkout Integration Setup

Source: https://agentpedia.codes/mcp/apt-mcp

Guide to setting up a payment flow and webhooks using Stripe. Requires installing the Stripe SDK.

```markdown
---
  description: Step-by-step guide to setting up a payment flow and webhooks ---
1. **Install Stripe**:
   - Install the Stripe SDK.
   // turbo ...
```

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

### Setup Prettier & ESLint Configuration

Source: https://agentpedia.codes/mcp/a2a-mcp-java-bridge

Guide to configuring linting and formatting using ESLint 9 Flat Config and Prettier. This includes installing necessary dependencies.

```text
--- description: Configure linting and formatting (ESLint 9 Flat Config) ---
1. **Install Dependencies**:
- Install ESLint, Prettier, and configs.
```

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

### Quick Start Examples

Source: https://agentpedia.codes/agent-skills/creative/baoyu-danger-gemini-web

Demonstrates basic usage of the Gemini Web Skill for text and image generation, including multi-turn conversations.

```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello, Gemini"
```

```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Explain quantum computing"
```

```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cute cat" --image cat.png
```

```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts --promptfiles system.md content.md --image out.png
```

```bash
# Multi-turn conversation (agent generates unique sessionId)
npx -y bun ${SKILL_DIR}/scripts/main.ts "Remember this: 42" --sessionId my-unique-id-123
```

```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts "What number?" --sessionId my-unique-id-123
```

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

### Helm Pre-Install Hook for Database Setup

Source: https://agentpedia.codes/agent-skills/devops/helm-chart-scaffolding

Define a Kubernetes Job as a Helm hook that runs before the chart is installed. This example sets up a database using a PostgreSQL image.

```yaml
# templates/pre-install-job.yaml
apiVersion: batch/v1
kind: Job
metadata:
  name: {{ include "my-app.fullname" . }}-db-setup
  annotations:
    "helm.sh/hook": pre-install
    "helm.sh/hook-weight": "-5"
    "helm.sh/hook-delete-policy": hook-succeeded
spec:
  template:
    spec:
      containers:
      - name: db-setup
        image: postgres:15
        command: ["psql", "-c", "CREATE DATABASE myapp"]
      restartPolicy: Never
```

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

### Example Script Usage

Source: https://agentpedia.codes/agent-skills/ai-tools/skill-skeleton

Demonstrates how to execute a script from the scripts/ directory. Assumes the script exists.

```bash
./scripts/[TODO: script-name].sh
```

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

### Project Setup with uv

Source: https://agentpedia.codes/agent-skills/backend/fastapi

Use this snippet to initialize a new FastAPI project and add essential dependencies like fastapi, sqlalchemy, aiosqlite, python-jose, and passlib. It also shows how to run the development server.

```bash
uv init my-api
cd my-api

uv add fastapi[standard] sqlalchemy[asyncio] aiosqlite python-jose[cryptography] passlib[bcrypt]

uv run fastapi dev src/main.py
```

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

### Install and Start MCP Server

Source: https://agentpedia.codes/mcp/entrez

Installs and starts the MCP server using npm. Ensure you have Node.js and npm installed.

```bash
npm install npm start
```

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

### Initialize shadcn/ui in Your Project

Source: https://agentpedia.codes/agent-skills/react/shadcn-ui

Run this command to start the shadcn/ui setup process, which includes configuring project settings like TypeScript, style, and color themes.

```bash
npx shadcn@latest init
```

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

### Setup Store Syntax with Vitest and Pinia

Source: https://agentpedia.codes/agent-skills/vue/vue-best-practices

Demonstrates the setup store syntax for Pinia and how to test it with Vitest. It shows initializing the store with specific state using `createTestingPinia`.

```typescript
// stores/counter.ts - Setup store syntax
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

// Test file
test('setup store works', async () => {
  const pinia = createTestingPinia({
    createSpy: vi.fn,
    initialState: {
      counter: { count: 5 }
    }
  })

  const wrapper = mount(MyComponent, {
    global: { plugins: [pinia] }
  })

  const store = useCounterStore()
  expect(store.count).toBe(5)
  expect(store.doubleCount).toBe(10)
})
```

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

### Documenting Critical Workflow Steps

Source: https://agentpedia.codes/agent-skills/workflow/project-planning

Example of documenting a critical workflow with specific steps, commands, and explanations for why the order matters. Use this to guide users through complex or sensitive setup processes.

```bash
# Step 1: [Description]
[command]

# Step 2: [Description]
[command]
```

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

### PDF Processing Quick Start Example

Source: https://agentpedia.codes/agent-skills/ai-tools/skill-creator

This markdown snippet shows how to reference a code example for extracting text using pdfplumber within a high-level guide. It also demonstrates linking to separate files for advanced features like form filling, API reference, and common patterns.

```markdown
# PDF Processing

## Quick start

Extract text with pdfplumber:
[code example]

## Advanced features

- **Form filling**: See [FORMS.md](FORMS.md) for complete guide
- **API reference**: See [REFERENCE.md](REFERENCE.md) for all methods
- **Examples**: See [EXAMPLES.md](EXAMPLES.md) for common patterns
```

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

### Setup Prettier & ESLint from Scratch (ESLint 9 Flat Config)

Source: https://agentpedia.codes/mcp/mcp-meme-sticky

This guide covers configuring linting and formatting tools, specifically ESLint 9 with Flat Config and Prettier. It includes installing necessary dependencies.

```markdown
---
description: Configure linting and formatting (ESLint 9 Flat Config) ---
1. **Install Dependencies**:
- Install ESLint, Prettier, and configs....
```

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

### Make setup-neon.sh executable

Source: https://agentpedia.codes/agent-skills/database/neon-vercel-postgres

Makes the Neon database setup script executable.

```bash
chmod +x scripts/setup-neon.sh
```

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

### Cloudflare Worker Quick Start Project Setup

Source: https://agentpedia.codes/agent-skills/workflow/cloudflare-worker-base

This snippet outlines the commands and configuration files needed to set up a new Cloudflare Worker project. It includes installing dependencies, creating configuration files (wrangler.jsonc, vite.config.ts), and writing the main worker logic.

```bash
# 1. Scaffold project  
npm create cloudflare@latest my-worker -- --type hello-world --ts --git --deploy false --framework none  

# 2. Install dependencies  
cd my-worker  
npm install hono@4.11.3  
npm install -D @cloudflare/vite-plugin@1.17.1 vite@7.3.1  

# 3. Create wrangler.jsonc  
{
  "name": "my-worker",
  "main": "src/index.ts",
  "account_id": "YOUR_ACCOUNT_ID",
  "compatibility_date": "2025-11-11",
  "assets": {
    "directory": "./public/",
    "binding": "ASSETS",
    "not_found_handling": "single-page-application",
    "run_worker_first": ["/api/*"]  // CRITICAL: Prevents SPA fallback from intercepting API routes
  }
}

# 4. Create vite.config.ts  
import { defineConfig } from 'vite'  
import { cloudflare } from '@cloudflare/vite-plugin'  
export default defineConfig({ plugins: [cloudflare()] })

# 5. Create src/index.ts  
import { Hono } from 'hono'
type Bindings = { ASSETS: Fetcher }
const app = new Hono<{ Bindings: Bindings }>()  
app.get('/api/hello', (c) => c.json({ message: 'Hello!' }))  
app.all('*', (c) => c.env.ASSETS.fetch(c.req.raw))
export default app  // CRITICAL: Use this pattern (NOT { fetch: app.fetch })

# 6. Deploy  
npm run dev              # Local: http://localhost:8787  
wrangler deploy          # Production
```

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

### Agent Browser Form Submission Example

Source: https://agentpedia.codes/agent-skills/ai-tools/agent-browser

A step-by-step example showing how to open a form, fill in input fields using references, submit the form, and wait for network activity to cease.

```bash
agent-browser open https://example.com/form
agent-browser snapshot -i
# Output shows: textbox "Email" [ref=e1], textbox "Password" [ref=e2], button "Submit" [ref=e3]

agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # Check result
```

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

### Install NextAuth.js Dependencies

Source: https://agentpedia.codes/mcp/thena

Install the necessary dependencies for NextAuth.js (Auth.js) v5 setup.

```bash
- Install the NextAuth.js beta
```

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

### Setup New Project with SAST Tools

Source: https://agentpedia.codes/agent-skills/security/sast-configuration

Initiates the setup process for a new project, specifying the programming language and SAST tools to be used.

```bash
./scripts/run-sast.sh --setup --language python --tools semgrep,sonarqube
```

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

### Install PaddleOCR

Source: https://agentpedia.codes/mcp/paddleocr

Install PaddleOCR using pip. This is the basic setup required before using the toolkit.

```bash
pip install paddleocr
```

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

### Setup with Resources in BATS

Source: https://agentpedia.codes/agent-skills/testing/bats-testing-patterns

Initialize complex directory structures and test fixtures in `setup` for tests that require specific input/output configurations. Ensure cleanup in `teardown`.

```bash
#!/usr/bin/env bats

setup() {
    # Create directory structure
    mkdir -p "$TMPDIR/data/input"
    mkdir -p "$TMPDIR/data/output"

    # Create test fixtures
    echo "line1" > "$TMPDIR/data/input/file1.txt"
    echo "line2" > "$TMPDIR/data/input/file2.txt"

    # Initialize environment
    export DATA_DIR="$TMPDIR/data"
    export INPUT_DIR="$DATA_DIR/input"
    export OUTPUT_DIR="$DATA_DIR/output"
}

teardown() {
    rm -rf "$TMPDIR/data"
}

@test "Processes input files" {
    run my_process_script "$INPUT_DIR" "$OUTPUT_DIR"
    [ "$status" -eq 0 ]
    [ -f "$OUTPUT_DIR/file1.txt" ]
}
```

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

### Install httpx Dependency

Source: https://agentpedia.codes/mcp/hyperledger-fabric-agent-suite

Install the httpx library, which is an optional dependency for Python agent/MCP setups.

```bash
pip install httpx # (Optional) Install any other agent/MCP dependencies
```

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

### Install All shadcn/ui Components

Source: https://agentpedia.codes/agent-skills/react/shadcn-ui

Install all available shadcn/ui components into your project using the '--all' flag.

```bash
npx shadcn@latest add --all
```

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

### Start Development Server

Source: https://agentpedia.codes/agent-skills/workflow/project-planning

Starts the local development server for your project.

```bash
pnpm dev
```

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

### Markdown Workflow File Example

Source: https://agentpedia.codes/mcp/yeelight-mcp-server

Example of a workflow file for starting feature branches using Markdown.

```markdown
---
description: Start a new feature branch synchronized with main.
---

# Start Feature Branch

This workflow automates the creation of a new feature branch based on the main branch.
```

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

### Install Docker Desktop

Source: https://agentpedia.codes/mcp/gnuradio

Guidance on installing Docker Desktop, a prerequisite for setting up local databases using Docker.

```shell
- If you don't have Docker installed, d...
```

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

### Setup Service Worker with Next-PWA

Source: https://agentpedia.codes/mcp/grain

Installs and configures Next-PWA to enable offline functionality. Ensure Workbox is installed.

```bash
npm install next-pwa
```

```javascript
next.config.js
const withPWA = require('next-pwa')

module.exports = withPWA({
  reactStrictMode: true,
  // next-pwa options you need
})

```

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

### Browser Use Diagnostics and Setup

Source: https://agentpedia.codes/agent-skills/ai-tools/browser-use

Run diagnostics to check configuration and system status, or initiate interactive setup.

```bash
browser-use doctor                                 # Shows config + diagnostics
browser-use setup                                  # Interactive post-install setup
```

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

### Install MCP Server with NPX

Source: https://agentpedia.codes/mcp/devhub

Use npx to install the devhub-cms-mcp server. Ensure you have the necessary client setup.

```bash
npx -y @smithery/cli install @devhub/devhub-cms-mcp --client claude
```

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

### Initialize Project Directory and npm

Source: https://agentpedia.codes/agent-skills/creative/motion-canvas

Commands to create a new project directory and initialize a package.json file.

```bash
# Create project directory
mkdir my-motion-canvas-project
cd my-motion-canvas-project

# Initialize package.json
npm init -y
```

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

### Build C Extensions with setuptools (setup.py)

Source: https://agentpedia.codes/agent-skills/python/python-packaging

Define C extensions using a `setup.py` file. This approach allows specifying extension modules, their source files, and include directories for compilation.

```python
# setup.py
from setuptools import setup, Extension

setup(
    ext_modules=[
        Extension(
            "my_package.fast_module",
            sources=["src/fast_module.c"],
            include_dirs=["src/include"],
        )
    ]
)
```