### Quick Setup for PG Boss

Source: https://github.com/blink-new/claude/blob/main/skills/pg-boss/SKILL.md

Initialize and start the PG Boss instance. Ensure your DATABASE_URL environment variable is set.

```typescript
import { PgBoss } from 'pg-boss';

const boss = new PgBoss({
  connectionString: process.env.DATABASE_URL,
  schema: 'pgboss',
  monitorIntervalSeconds: 30,
});

await boss.start();
```

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

### Prompt for Next.js 14 Middleware Setup

Source: https://github.com/blink-new/claude/blob/main/mcp/context7/README.md

Example prompt to inquire about setting up Next.js 14 middleware, specifying the version and using Context7.

```text
How do I set up Next.js 14 middleware? use context7
```

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

### Install @remotion/transitions

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/transitions.md

Install the @remotion/transitions package using your project's package manager.

```bash
npx remotion add @remotion/transitions # If project uses npm
bunx remotion add @remotion/transitions # If project uses bun
yarn remotion add @remotion/transitions # If project uses yarn
pnpm exec remotion add @remotion/transitions # If project uses pnpm
```

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

### Install Dependencies for Resend and Tiptap

Source: https://github.com/blink-new/claude/blob/main/skills/resend-inbound-emails/SKILL.md

Installs the Resend client and Tiptap editor extensions using Bun. Ensure you have Bun installed to run these commands.

```bash
bun add resend
bun add @tiptap/react @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-placeholder
```

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

### Complete Publishing Workflow Steps

Source: https://github.com/blink-new/claude/blob/main/skills/blink-cms/SKILL.md

A step-by-step guide for the complete publishing workflow, starting from listing directory contents to publishing the article live.

```python
1. cms_list_dir(path: "blog")           → See current articles
2. cms_write_file(path, content, false) → Create/update as draft
3. cms_read_file(path)                  → Review the saved content
4. cms_publish(paths: [path])           → Go live with version snapshot
```

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

### Environment Configuration Example

Source: https://github.com/blink-new/claude/blob/main/skills/team-saas/SKILL.md

Example `.env` file showing required variables for database, authentication, email, and S3 storage.

```bash
# Required
DATABASE_URL="postgresql://..."
AUTH_SECRET="openssl rand -base64 32"
NEXTAUTH_URL="http://localhost:3000"
RESEND_API_KEY="re_..."
EMAIL_FROM="onboarding@resend.dev"

# S3 Storage (Railway)
AWS_ENDPOINT_URL="https://..."
AWS_ACCESS_KEY_ID="..."
AWS_SECRET_ACCESS_KEY="..."
AWS_S3_BUCKET_NAME="..."
AWS_DEFAULT_REGION="auto"
```

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

### Install @remotion/layout-utils

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/measuring-text.md

Install the @remotion/layout-utils package using your project's package manager.

```bash
npx remotion add @remotion/layout-utils # If project uses npm
```

```bash
bunx remotion add @remotion/layout-utils # If project uses bun
```

```bash
yarn remotion add @remotion/layout-utils # If project uses yarn
```

```bash
pnpm exec remotion add @remotion/layout-utils # If project uses pnpm
```

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

### Install @remotion/media package

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/audio.md

Install the @remotion/media package using your project's package manager.

```bash
npx remotion add @remotion/media # If project uses npm
```

```bash
bunx remotion add @remotion/media # If project uses bun
```

```bash
yarn remotion add @remotion/media # If project uses yarn
```

```bash
pnpm exec remotion add @remotion/media # If project uses pnpm
```

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

### Install Tiptap Dependencies

Source: https://github.com/blink-new/claude/blob/main/skills/wysiwyg-editor/SKILL.md

Install the necessary Tiptap packages and DOMPurify for sanitization using Bun.

```bash
bun add @tiptap/react @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-placeholder @tiptap/pm dompurify
bun add -D @types/dompurify
```

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

### AI Image Prompt for Guide/Tutorial Article

Source: https://github.com/blink-new/claude/blob/main/skills/seo-article-writing/SKILL.md

Example AI image prompt for a guide or tutorial article, emphasizing a visual representation of organization and productivity with a specific color scheme and style.

```text
A sophisticated hero image for "Time Blocking Guide" tutorial article.
Modern minimalist design showing calendar grid with colorful time blocks.
Dark slate background (#1e293b) with vibrant orange (#f97316) blocks.
Clean 3D floating elements suggesting productivity and organization.
Include title: "TIME BLOCKING GUIDE" and subtitle "Master Your Day".
1200x630 pixels.
```

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

### Abuse Report Workflow Example

Source: https://github.com/blink-new/claude/blob/main/skills/gmail/SKILL.md

An example workflow demonstrating how to use the search, read, and reply scripts to handle an abuse report.

```bash
node search.mjs --query="from:namecheap subject:abuse"
```

```bash
node read.mjs --id=<messageId> --thread
```

```bash
node reply.mjs --message-id=<id> --body="Dear Namecheap Legal & Abuse Team,

Thank you for your message regarding ticket <TICKET-ID>.

We have completed our investigation and taken the following actions:

1. The account in question has been permanently suspended.
2. The reported URL (hxxp:// <PROJECT-ID> [.] sites [.] blink [.] new/) has been deactivated and now returns an HTTP 410 response.
3. All content and deployments associated with this account have been removed.

Our platform has a strict Acceptable Use Policy and we act promptly on all reports.
The blink.new domain is fully compliant with your Terms of Service.

Please let us know if anything further is needed to close this case.

Best regards,
Kai Feng
CEO, Blink.new
support@blink.new"
```

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

### Prisma Setup and Database Push

Source: https://github.com/blink-new/claude/blob/main/skills/team-saas/SKILL.md

Commands to initialize Prisma, push schema changes to the database, and generate the Prisma client.

```bash
# Initialize
bunx prisma init

# Push to database
bunx prisma db push
bunx prisma generate
```

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

### Install @remotion/lottie Package

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/lottie.md

Install the @remotion/lottie package using your project's package manager.

```bash
npx remotion add @remotion/lottie # If project uses npm
```

```bash
bunx remotion add @remotion/lottie # If project uses bun
```

```bash
yarn remotion add @remotion/lottie # If project uses yarn
```

```bash
pnpm exec remotion add @remotion/lottie # If project uses pnpm
```

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

### Conventional Commit Examples

Source: https://github.com/blink-new/claude/blob/main/agents/git-manager.md

Examples demonstrating the correct application of the conventional commit format for different scenarios.

```markdown
- `feat(auth): add google oauth login`
```

```markdown
- `fix(api): handle null response from webhook`
```

```markdown
- `refactor(*): extract shared utils to lib`
```

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

### Install @remotion/zod-types with Bun

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/parameters.md

Install the @remotion/zod-types package using Bun if your project uses Bun.

```bash
bunx remotion add @remotion/zod-types
```

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

### Blink Plugin Installation and Configuration

Source: https://github.com/blink-new/claude/blob/main/skills/ai-seo-articles/config/blink/markets/cursor-claude/COPY.md

Installs the Blink plugin, which downloads and auto-configures MCP. This is the first step in the happy path for using Blink with AI coding tools.

```bash
Step 1: npx skills add blink-new/blink-plugin
         → downloads 14 skills, auto-configures MCP
```

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

### Usage Example

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/get-video-dimensions.md

Demonstrates how to call the getVideoDimensions function and log the resulting width and height. This example assumes you have a video file accessible via a URL.

```tsx
const dimensions = await getVideoDimensions("https://remotion.media/video.mp4");
console.log(dimensions.width);  // e.g. 1920
console.log(dimensions.height); // e.g. 1080
```

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

### Install pg-boss for Background Jobs

Source: https://github.com/blink-new/claude/blob/main/skills/team-saas/SKILL.md

Install the pg-boss package for managing background jobs.

```bash
bun add pg-boss
```

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

### Tutorial Article Structure Example

Source: https://github.com/blink-new/claude/blob/main/skills/blink-seo-articles/reference/ARTICLES.md

An example of a tutorial article structure following a narrative arc. It emphasizes a strong cold open and a clear 'Why it's hard' section.

```markdown
# How to Build a [App Type]

[Cold open — drop into the specific problem or moment: 1-2 sentences.
No "In today's world...", no "Have you ever wondered...".
Example: "The spreadsheet broke at 11pm. Three thousand rows, one corrupt formula, 
no backup." OR "Auth took three weeks. The actual product took two days."]

[What this article gives you: 1 sentence, direct.]

## Why Building [App Type] Is Harder Than It Sounds
[List 4-6 specific pain points — not generic, not abstract. Name the actual tools and costs.]
```

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

### Install Zod with Bun

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/parameters.md

Install Zod version 3.22.3 using Bun if bun.lockb is present.

```bash
bun i zod@3.22.3
```

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

### Install @remotion/zod-types with pnpm

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/parameters.md

Install the @remotion/zod-types package using pnpm if your project uses pnpm.

```bash
pnpm exec remotion add @remotion/zod-types
```

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

### Install shadcn/ui Sidebar Components

Source: https://github.com/blink-new/claude/blob/main/skills/saas-sidebar/SKILL.md

Use this command to add the necessary shadcn/ui components for the sidebar functionality to your project. Ensure you have shadcn/ui installed.

```bash
npx shadcn@latest add sidebar tooltip avatar popover collapsible separator skeleton sheet
```

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

### Install @remotion/zod-types with Yarn

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/parameters.md

Install the @remotion/zod-types package using Yarn if your project uses Yarn.

```bash
yarn remotion add @remotion/zod-types
```

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

### Install Core Dependencies for NextAuth and Prisma

Source: https://github.com/blink-new/claude/blob/main/skills/team-saas/SKILL.md

Installs essential packages for NextAuth.js (beta), Prisma ORM, and PostgreSQL adapter, along with development dependencies for Prisma.

```bash
# Core
bun add next-auth@beta @auth/prisma-adapter bcryptjs
bun add @prisma/client @prisma/adapter-pg pg
bun add -D prisma @types/bcryptjs
```

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

### Install @remotion/gif Package

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/gifs.md

Install the @remotion/gif package using your project's package manager if you need to use GIF-specific utilities.

```bash
npx remotion add @remotion/gif # If project uses npm
bunx remotion add @remotion/gif # If project uses bun
yarn remotion add @remotion/gif # If project uses yarn
pnpm exec remotion add @remotion/gif # If project uses pnpm
```

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

### Ad Copy Formula Example

Source: https://github.com/blink-new/claude/blob/main/skills/meta-ad-copywriter/SKILL.md

This example demonstrates the recommended formula for ad copy, including a specific product/use case, input-output transformation, and a key differentiator.

```markdown
<Specific product/use case>

<Input → output transformation>

<Best differentiator or buyer-specific benefit>
```

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

### Example Prompt for Sunsama Alternatives

Source: https://github.com/blink-new/claude/blob/main/skills/seo-article-writing/assets/patterns/prompts.md

A concrete example of a prompt used for generating an image for an article comparing 'Sunsama Alternatives'. It includes specific visual elements and tool icons.

```text
A sophisticated hero image for "Sunsama Alternatives" comparison article.
Modern minimalist design with floating calendar icons and task cards.
Deep navy background (#0f172a) with orange (#f97316) gradient accents.
Show multiple tools (Notion, Akiflow, Motion, Linear icons) being compared.
Include title: "Sunsama Alternatives" and subtitle "Compare the best daily planning tools".
Professional SaaS marketing style. 1200x630 pixels.
```

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

### Install @remotion/captions Package

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/display-captions.md

Install the @remotion/captions package using your project's package manager.

```bash
npx remotion add @remotion/captions # If project uses npm
```

```bash
bunx remotion add @remotion/captions # If project uses bun
```

```bash
yarn remotion add @remotion/captions # If project uses yarn
```

```bash
pnpm exec remotion add @remotion/captions # If project uses pnpm
```

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

### Install UI and Validation Dependencies

Source: https://github.com/blink-new/claude/blob/main/skills/team-saas/SKILL.md

Installs libraries for UI components (shadcn/ui, Lucide React, themes), state management (React Query), and data validation (Zod).

```bash
# UI
bun add lucide-react
bun add next-themes class-variance-authority clsx tailwind-merge
bun add @tanstack/react-query

# Validation
bun add zod

# Email
bun add resend
```

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

### Install Agents, Skills, and Rules via Symlinks

Source: https://github.com/blink-new/claude/blob/main/AGENTS.md

Installs the agents, skills, and rules directories to ~/.agents/ for shared access across AI tools. Links are created to specific tool configurations like Cursor and Claude.

```bash
# Create symlinks
mkdir -p ~/.agents
ln -sfn "$(pwd)/agents" ~/.agents/agents
ln -sfn "$(pwd)/skills" ~/.agents/skills
ln -sfn "$(pwd)/rules" ~/.agents/rules

# Link to specific tools
ln -sfn ~/.agents ~/.cursor/agents
ln -sfn ~/.agents ~/.claude/agents

# For OpenCode skill discovery
ln -sfn ~/.agents/skills ~/.config/opencode/skills
```

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

### Install Kanban DnD Dependencies

Source: https://github.com/blink-new/claude/blob/main/skills/kanban-dnd/SKILL.md

Install the required @dnd-kit packages to enable core drag-and-drop functionality, modifiers, and utilities.

```bash
bun add @dnd-kit/core @dnd-kit/modifiers @dnd-kit/utilities
```

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

### Install @remotion/three Package

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/3d.md

Install the necessary package for using Three.js with Remotion. Choose the command corresponding to your project's package manager.

```bash
npx remotion add @remotion/three # If project uses npm
```

```bash
bunx remotion add @remotion/three # If project uses bun
```

```bash
yarn remotion add @remotion/three # If project uses yarn
```

```bash
pnpm exec remotion add @remotion/three # If project uses pnpm
```

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

### Prompt for Supabase Auth with Cookies

Source: https://github.com/blink-new/claude/blob/main/mcp/context7/README.md

Example prompt to set up Supabase authentication with cookies, specifying the library and using Context7.

```text
Set up Supabase auth with cookies. use library /supabase/supabase. use context7
```

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

### Install Mapbox and Turf.js Dependencies

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/maps.md

Install necessary Mapbox and Turf.js packages for map integration. Choose the command based on your package manager.

```bash
npm i mapbox-gl @turf/turf @types/mapbox-gl
```

```bash
bun i mapbox-gl @turf/turf @types/mapbox-gl
```

```bash
yarn add mapbox-gl @turf/turf @types/mapbox-gl
```

```bash
pnpm i mapbox-gl @turf/turf @types/mapbox-gl
```

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

### Set Up Blog Infrastructure and Create Article

Source: https://github.com/blink-new/claude/blob/main/skills/seo-article-writing/SKILL.md

Use these bash commands to set up your blog infrastructure by copying assets and creating a new article folder. Ensure AI image generation is available and MDX support is configured.

```bash
# 1. Set up blog infrastructure (first time only)
# Copy assets from this skill to your project

# 2. Create article folder
mkdir -p src/content/blog/{slug}

# 3. Generate unique article image using AI
# See Image Generation section below

# 4. Write article using template
# Use assets/templates/article.mdx as base
```

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

### Get Video Duration Function

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/get-video-duration.md

Defines an asynchronous function to create a Mediabunny Input and compute video duration. Ensure `mediabunny` is installed.

```tsx
import { Input, ALL_FORMATS, UrlSource } from "mediabunny";

export const getVideoDuration = async (src: string) => {
  const input = new Input({
    formats: ALL_FORMATS,
    source: new UrlSource(src, {
      getRetryDelay: () => null,
    }),
  });

  const durationInSeconds = await input.computeDuration();
  return durationInSeconds;
};
```

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

### Implement Kanban Drag-and-Drop Event Handlers

Source: https://github.com/blink-new/claude/blob/main/skills/kanban-dnd/SKILL.md

Use these useCallback hooks to manage drag start, drag over, drag end, and drag cancel events for card reordering.

```typescript
const handleDragStart = useCallback((event: DragStartEvent) => {
  const { active } = event;
  const card = cards?.find((c) => c.id === active.id);
  if (card) {
    setActiveCard(card);
    setActiveOverColumn(card.columnId);
  }
}, [cards]);

const handleDragOver = useCallback((event: DragOverEvent) => {
  const { over } = event;
  if (!over) {
    setActiveOverColumn(null);
    return;
  }
  const targetColumnId = findTargetColumnId(over.id);
  setActiveOverColumn(targetColumnId);
}, [findTargetColumnId]);

const handleDragEnd = useCallback((event: DragEndEvent) => {
  const { active, over } = event;
  
  setActiveCard(null);
  setActiveOverColumn(null);

  if (!over) return;

  const cardId = String(active.id);
  const targetColumnId = findTargetColumnId(over.id);

  if (!targetColumnId) return;

  const card = cards?.find((c) => c.id === cardId);
  if (!card || card.columnId === targetColumnId) return;

  // Optimistic update via mutation
  updateCard.mutate({
    cardId,
    data: { columnId: targetColumnId },
  });
}, [cards, findTargetColumnId, updateCard]);

const handleDragCancel = useCallback(() => {
  setActiveCard(null);
  setActiveOverColumn(null);
}, []);
```

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

### Prompt for Beginner/Getting Started Article Images

Source: https://github.com/blink-new/claude/blob/main/skills/seo-article-writing/assets/patterns/prompts.md

Use this prompt for introductory content or onboarding articles. It focuses on a friendly, approachable design with simple visual cues.

```text
A sophisticated hero image for "[TITLE]" beginner's guide.
Friendly, approachable design with simple visual elements.
Soft dark blue background (#1e293b) with orange (#f97316) accents.
Clean, not overwhelming. "Start Here" type visual cue.
Welcoming to beginners. Include title and "A Beginner's Guide" subtitle.
1200x630 pixels.
```

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

### Get Video Dimensions Function

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/get-video-dimensions.md

This function takes a video source URL and returns its width and height. It handles potential errors if no video track is found. Ensure Mediabunny is installed.

```tsx
import { Input, ALL_FORMATS, UrlSource } from "mediabunny";

export const getVideoDimensions = async (src: string) => {
  const input = new Input({
    formats: ALL_FORMATS,
    source: new UrlSource(src, {
      getRetryDelay: () => null,
    }),
  });

  const videoTrack = await input.getPrimaryVideoTrack();
  if (!videoTrack) {
    throw new Error("No video track found");
  }

  return {
    width: videoTrack.displayWidth,
    height: videoTrack.displayHeight,
  };
};
```

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

### Configure OpenCode for Context7 MCP

Source: https://github.com/blink-new/claude/blob/main/mcp/context7/README.md

Configure OpenCode to use the Context7 MCP server by specifying its type, URL, and API key headers. This setup enables fetching documentation and examples.

```json
{
  "mcp": {
    "context7": {
      "type": "remote",
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "{env:CONTEXT7_API_KEY}"
      },
      "enabled": true
    }
  }
}
```

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

### Initialize and Add shadcn/ui Components

Source: https://github.com/blink-new/claude/blob/main/skills/team-saas/SKILL.md

Initialize shadcn/ui in your project and add specific components.

```bash
bunx shadcn@latest init
```

```bash
bunx shadcn@latest add button card dialog input label sonner tooltip dropdown-menu avatar badge form command popover
```

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

### Required Dependencies for Railway Storage

Source: https://github.com/blink-new/claude/blob/main/skills/railway-storage/SKILL.md

Install the necessary AWS SDK packages for interacting with S3-compatible storage. `@aws-sdk/s3-request-presigner` is included for potential future use with presigned URLs, though not directly used in the proxy example.

```bash
bun add @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
```

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

### Prompt for Guide/Tutorial Article Images

Source: https://github.com/blink-new/claude/blob/main/skills/seo-article-writing/assets/patterns/prompts.md

Use this prompt for how-to guides and tutorials. It suggests a modern, minimalist design with 3D floating elements relevant to the topic.

```text
A sophisticated hero image for "[TITLE]" tutorial article.
Modern minimalist design showing [RELEVANT VISUAL ELEMENTS].
Dark slate background (#1e293b) with vibrant orange (#f97316) accents.
Clean 3D floating elements suggesting [TOPIC THEME].
Include title: "[TITLE]" and subtitle "[SUBTITLE]".
Professional SaaS style. 1200x630 pixels.
```

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

### Clarity Hierarchy Example

Source: https://github.com/blink-new/claude/blob/main/skills/meta-ad-copywriter/SKILL.md

Demonstrates the recommended order of information for cold audiences: Product Category, Use Case, Input/Output, Differentiator. This ensures immediate understanding.

```markdown
B2B Lead Enrichment API

Turn emails and domains into verified contacts, company data, and signals.

Built for developers, GTM engineers, and AI agents.
```

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

### Gmail Skill Setup

Source: https://github.com/blink-new/claude/blob/main/skills/gmail/SKILL.md

Steps to set up the Gmail skill, including obtaining credentials from Google Cloud Console and linking your first account.

```bash
# 1. Get credentials.json from Google Cloud Console:
#    console.cloud.google.com → Gmail API → Credentials → OAuth Client ID → Desktop App → Download JSON
mv ~/Downloads/client_secret_*.json ~/.cursor/skills/gmail/credentials.json
```

```bash
# 2. Link your first account
node ~/.cursor/skills/gmail/scripts/accounts.mjs --link
```

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

### Install @remotion/fonts

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/fonts.md

Install the @remotion/fonts package using your project's package manager.

```bash
npx remotion add @remotion/fonts # If project uses npm
```

```bash
bunx remotion add @remotion/fonts # If project uses bun
```

```bash
yarn remotion add @remotion/fonts # If project uses yarn
```

```bash
pnpm exec remotion add @remotion/fonts # If project uses pnpm
```

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

### Install @remotion/google-fonts

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/fonts.md

Install the @remotion/google-fonts package using your project's package manager.

```bash
npx remotion add @remotion/google-fonts # If project uses npm
```

```bash
bunx remotion add @remotion/google-fonts # If project uses bun
```

```bash
yarn remotion add @remotion/google-fonts # If project uses yarn
```

```bash
pnpm exec remotion add @remotion/google-fonts # If project uses pnpm
```

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

### Basic ThreeCanvas Setup with Lighting

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/3d.md

Wrap your 3D scene in `<ThreeCanvas>` and ensure it has width and height props. Include essential lighting like ambient and directional lights for visibility.

```tsx
import { ThreeCanvas } from "@remotion/three";
import { useVideoConfig } from "remotion";

const { width, height } = useVideoConfig();

<ThreeCanvas width={width} height={height}>
  <ambientLight intensity={0.4} />
  <directionalLight position={[5, 5, 5]} intensity={0.8} />
  <mesh>
    <sphereGeometry args={[1, 32, 32]} />
    <meshStandardMaterial color="red" />
  </mesh>
</ThreeCanvas>
```

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

### Using with Remotion Static Files

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/get-audio-duration.md

Illustrates integrating audio duration retrieval with Remotion's static file handling. This example assumes `staticFile` is correctly configured to serve your audio assets.

```tsx
import { staticFile } from "remotion";

const duration = await getAudioDuration(staticFile("audio.mp3"));
```

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

### Install @remotion/zod-types with npm

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/parameters.md

Install the @remotion/zod-types package using npm if your project uses npm.

```bash
npx remotion add @remotion/zod-types
```

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

### Install Zod with pnpm

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/parameters.md

Install Zod version 3.22.3 using pnpm if pnpm-lock.yaml is present.

```bash
pnpm i zod@3.22.3
```

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

### Install Zod with Yarn

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/parameters.md

Install Zod version 3.22.3 using Yarn if yarn.lock is present.

```bash
yarn add zod@3.22.3
```

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

### Install DataFast Tracking Script

Source: https://github.com/blink-new/claude/blob/main/skills/datafast/SKILL.md

Include this script in the `<head>` of your website to enable DataFast tracking. Customize with various data attributes for specific configurations.

```html
<script
  defer
  data-website-id="dfid_XXXX"
  data-domain="example.com"
  src="https://datafa.st/js/script.js"
></script>
```

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

### Create Article Folder Structure

Source: https://github.com/blink-new/claude/blob/main/skills/seo-article-writing/SKILL.md

Use this bash command to create the necessary directory and index file for a new blog post based on its slug.

```bash
mkdir -p src/content/blog/{slug}
touch src/content/blog/{slug}/index.mdx
```

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

### Install Zod with npm

Source: https://github.com/blink-new/claude/blob/main/skills/remotion-best-practices/rules/parameters.md

Install Zod version 3.22.3 using npm if package-lock.json is present.

```bash
npm i zod@3.22.3
```

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

### Load Project Configuration Files

Source: https://github.com/blink-new/claude/blob/main/skills/blink-seo-articles/prompts/ORCHESTRATOR.md

Before starting any SEO operation, load essential configuration files for the active project. These files define company identity, market details, keyword clusters, copy, and image assets.

```bash
cat .cursor/skills/ai-seo-articles/config/blink/COMPANY.md
cat .cursor/skills/ai-seo-articles/config/blink/MARKETS.md
cat .cursor/skills/ai-seo-articles/config/blink/CLUSTERS.md
cat .cursor/skills/ai-seo-articles/config/blink/COPY.md
cat .cursor/skills/ai-seo-articles/config/blink/IMAGES.md
cat .todo/seo/SEO_PROFILE.md
cat .todo/seo/MANIFEST.md
```

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

### Install Firecrawl CLI

Source: https://github.com/blink-new/claude/blob/main/skills/firecrawl/rules/install.md

Installs the Firecrawl CLI globally using npm. This command should be run once to set up the CLI on your system.

```bash
npm install -g firecrawl-cli
```

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

### pg-boss Job Creation and Worker Setup

Source: https://github.com/blink-new/claude/blob/main/skills/team-saas/SKILL.md

Illustrates how to send a job to a queue and set up a worker to process jobs using pg-boss.

```typescript
// Create job
await boss.send(QUEUES.SEND_EMAIL, payload, DEFAULT_JOB_OPTIONS);

// Worker handles job
boss.work(QUEUES.SEND_EMAIL, { batchSize: 1 }, async (job) => {
  await handleSendEmail(job.data);
});
```

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

### Prompt to Implement Supabase Authentication Directly

Source: https://github.com/blink-new/claude/blob/main/mcp/context7/README.md

Example prompt to implement basic authentication with Supabase by directly specifying the Context7 ID for the library.

```text
Implement basic authentication with Supabase. use library /supabase/supabase. use context7
```

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

### Verify Firecrawl Installation and Authentication Status

Source: https://github.com/blink-new/claude/blob/main/skills/firecrawl/rules/install.md

Checks if the Firecrawl CLI is installed correctly and if the authentication is active. The output indicates the version and authentication state.

```bash
firecrawl --version --auth-status
```

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

### Cloud Setup for Gmail Credentials

Source: https://github.com/blink-new/claude/blob/main/skills/gmail/SKILL.md

Provides commands to base64 encode Gmail credentials and token files for use as environment variables in cloud environments. Scripts prioritize environment variables over local files.

```bash
echo "GMAIL_CREDENTIALS=$(base64 -i ~/.cursor/skills/gmail/credentials.json)"
```

```bash
echo "GMAIL_TOKEN=$(base64 -i ~/.cursor/skills/gmail/accounts/default/token.json)"
```

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

### General MDX Component Examples

Source: https://github.com/blink-new/claude/blob/main/skills/ai-seo-articles/reference/SOP.md

Demonstrates the usage of various informational and structural MDX components like Tip, Note, Warning, Steps, and CardGroup.

```mdx
<Tip>Helpful tip.</Tip>
<Note>Note text.</Note>
<Warning>Caution.</Warning>

<Steps>
  <Step title="First Step">Instructions.</Step>
</Steps>

<CardGroup cols={2}>
  <Card title="Feature" href="/docs/path" icon="Rocket">Description.</Card>
</CardGroup>
```