### Skill Installation Example

Source: https://github.com/pedronauck/skills/blob/main/skills/find-skills/SKILL.md

An example of how a skill is presented to the user, including the installation command and a link for more information.

```bash
Install with npx skills add <owner/repo@skill>

vercel-labs/agent-skills@vercel-react-best-practices
└ https://skills.sh/vercel-labs/agent-skills/vercel-react-best-practices
```

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

### Quick Start Project Setup with Bun

Source: https://github.com/pedronauck/skills/blob/main/skills/opentui/references/react/configuration.md

Use the CLI to quickly create a new React TUI application. The target directory must not already exist. Options include skipping git initialization or bun install.

```bash
bunx create-tui@latest -t react my-app
cd my-app && bun install
```

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

### Complete Setup Example

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/pipelines/configuration.md

A comprehensive example demonstrating the setup process, including creating an R2 bucket, enabling its data catalog, creating a stream with a schema, configuring an R2 Data Catalog sink, creating a pipeline, and deploying the worker.

```bash
npx wrangler r2 bucket create my-bucket
npx wrangler r2 bucket catalog enable my-bucket
npx wrangler pipelines streams create my-stream --schema-file schema.json
npx wrangler pipelines sinks create my-sink --type r2-data-catalog --bucket my-bucket ...
npx wrangler pipelines create my-pipeline --sql "INSERT INTO my_sink SELECT * FROM my_stream"
npx wrangler deploy
```

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

### Install and Setup Figma MCP

Source: https://github.com/pedronauck/skills/blob/main/skills/qa-report/references/figma_validation.md

Instructions for installing Figma MCP and initial setup steps. Follow official documentation for installation and API token configuration.

```bash
# Install Figma MCP (follow official docs)
# Configure API token
# Verify access to design files
```

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

### KV Quick Start Example

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/kv/README.md

A basic example demonstrating how to write and read data from Cloudflare Workers KV using the `put` and `get` methods.

```APIDOC
## Quick Start Example

```typescript
// Write
await env.MY_KV.put("key", "value", { expirationTtl: 300 });

// Read
const value = await env.MY_KV.get("key");
const json = await env.MY_KV.get<Config>("config", "json");
```
```

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

### Install Component from Marketplace

Source: https://github.com/pedronauck/skills/blob/main/skills/building-components/references/marketplaces.mdx

Use the marketplace's CLI to add components. This example shows installing a dialog stack from 21st.dev.

```bash
npx shadcn@latest add https://21st.dev/r/haydenbleasel/dialog-stack
```

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

### Good Example: Manual SSR Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/tanstack-query-best-practices/rules/ssr-dehydration.md

Provides a manual setup for SSR using `dehydrate` and `hydrate`. This example includes server-side rendering to a string and client-side hydration, emphasizing the use of a safe serializer to prevent XSS vulnerabilities.

```tsx
// server.tsx
import { dehydrate, QueryClient } from '@tanstack/react-query'
import { renderToString } from 'react-dom/server'

export async function render(url: string) {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,  // Prevent immediate client refetch
      },
    },
  })

  // Prefetch required data
  await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  })

  const dehydratedState = dehydrate(queryClient)

  const html = renderToString(
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  )

  // Serialize safely - JSON.stringify is XSS vulnerable
  const serializedState = serialize(dehydratedState)

  return "\
    <html>
      <body>
        <div id=\"app\">${html}</div>
        <script>window.__DEHYDRATED_STATE__ = ${serializedState}</script>
      </body>
    </html>
  "
}

// client.tsx
import { hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()
hydrate(queryClient, window.__DEHYDRATED_STATE__)

hydrateRoot(
  document.getElementById('app'),
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
)
```

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

### Full Namespace Setup Example

Source: https://github.com/pedronauck/skills/blob/main/skills/centrifugo/references/channels.md

Demonstrates a comprehensive configuration for channels with multiple namespaces, including settings for presence, history, and client access.

```json
{
  "channel": {
    "without_namespace": {
      "allow_subscribe_for_client": true
    },
    "namespaces": [
      {
        "name": "chat",
        "presence": true,
        "join_leave": true,
        "history_size": 100,
        "history_ttl": "600s",
        "force_recovery": true,
        "force_positioning": true,
        "allow_subscribe_for_client": true,
        "allow_presence_for_subscriber": true,
        "allow_history_for_subscriber": true
      },
      {
        "name": "notifications",
        "allow_user_limited_channels": true,
        "allow_subscribe_for_client": true,
        "history_size": 50,
        "history_ttl": "86400s",
        "force_recovery": true
      },
      {
        "name": "live",
        "allow_subscribe_for_client": true,
        "allow_subscribe_for_anonymous": true
      }
    ]
  }
}
```

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

### Manual OpenTUI Solid Project Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/opentui/references/solid/configuration.md

Manually set up a new project by creating a directory, initializing Bun, and installing necessary OpenTUI and Solid dependencies.

```bash
mkdir my-tui && cd my-tui
bun init
bun install @opentui/solid @opentui/core solid-js
```

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

### Rust Documentation Test Example

Source: https://github.com/pedronauck/skills/blob/main/skills/rust-best-practices/references/testing.md

Include runnable examples within documentation comments (`///`). These serve as both documentation and tests, ensuring examples stay up-to-date. Use `#` to hide setup code.

```rust
/// Adds two numbers.
///
/// # Examples
///
/// ```rust
/// # use crate_name::add;
/// assert_eq!(add(2, 3), 5);
/// ```
pub fn add(a: i32, b: i32) -> i32 { a + b }
```

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

### Manual OpenTUI Core Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/opentui/references/core/REFERENCE.md

Manually set up a new OpenTUI Core project by creating a directory, initializing it with Bun, and installing the core package.

```bash
mkdir my-tui && cd my-tui
bun init
bun install @opentui/core
```

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

### Agent Browser Quick Start Commands

Source: https://github.com/pedronauck/skills/blob/main/skills/agent-browser/SKILL.md

Basic commands to get started with agent-browser for navigating, inspecting, and interacting with web pages.

```bash
agent-browser open <url>        # Navigate to page
agent-browser snapshot -i       # Get interactive elements with refs
agent-browser click @e1         # Click element by ref
agent-browser fill @e2 "text"   # Fill input by ref
agent-browser close             # Close browser
```

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

### QMD Setup Commands

Source: https://github.com/pedronauck/skills/blob/main/skills/qmd/SKILL.md

Commands to install the QMD CLI, add a collection, and embed documents for searching.

```bash
npm install -g @tobilu/qmd
```

```bash
qmd collection add ~/notes --name notes
```

```bash
qmd embed
```

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

### Install RivetKit and Hono

Source: https://github.com/pedronauck/skills/blob/main/skills/rivetkit/reference/connect/freestyle.md

Install the necessary packages for RivetKit and Hono. This is the initial setup step for your project.

```bash
npm install rivetkit hono
```

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

### Manual Setup for OpenTUI React

Source: https://github.com/pedronauck/skills/blob/main/skills/opentui/references/react/REFERENCE.md

Manually set up an OpenTUI React project by initializing a new directory, installing necessary packages including `@opentui/react` and `react`.

```bash
mkdir my-tui && cd my-tui
bun init
bun install @opentui/react @opentui/core react
```

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

### Miniflare Quick Start

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/miniflare/README.md

A basic example demonstrating how to instantiate Miniflare, define a simple Worker script, dispatch a fetch request, and dispose of the Miniflare instance.

```javascript
import { Miniflare } from "miniflare";

const mf = new Miniflare({
  modules: true,
  script: `
    export default {
      async fetch(request, env, ctx) {
        return new Response("Hello Miniflare!");
      }
    }
  `,
});

const res = await mf.dispatchFetch("http://localhost:8787/");
console.log(await res.text()); // Hello Miniflare!
await mf.dispose();
```

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

### Install and Run inference.sh CLI

Source: https://github.com/pedronauck/skills/blob/main/skills/landing-page-design/SKILL.md

Installs the inference.sh CLI and provides examples for generating a hero image and researching competitor landing pages.

```bash
curl -fsSL https://cli.inference.sh | sh && infsh login

# Generate a hero image
infsh app run falai/flux-dev-lora --input '{
  "prompt": "professional person smiling while using a laptop showing a clean dashboard interface, bright modern office, natural lighting, warm and productive atmosphere, lifestyle marketing photography",
  "width": 1248,
  "height": 832
}'

# Research competitor landing pages
infsh app run tavily/search-assistant --input '{
  "query": "best SaaS landing page examples 2024 conversion rate"
}'
```

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

### Clone and Run Commands

Source: https://github.com/pedronauck/skills/blob/main/skills/crafting-effective-readmes/templates/personal.md

Use this section to provide instructions for cloning the repository and running the project. This is essential for others to get started with your project.

```bash
[Clone and run commands]
```

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

### Fuzzing Setup and Run Commands

Source: https://github.com/pedronauck/skills/blob/main/skills/rust-best-practices/references/testing.md

Commands to install cargo-fuzz, initialize a fuzzing project, and run a specific fuzz target.

```bash
cargo install cargo-fuzz
cargo fuzz init
cargo fuzz run fuzz_target_1
```

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

### Go Profiling Setup with net/http/pprof

Source: https://github.com/pedronauck/skills/blob/main/skills/extreme-software-optimization/references/LANGUAGE-SPECIFIC.md

Enable Go's built-in profiling endpoints by importing `net/http/pprof` and starting an HTTP server. Access profiles via `http://localhost:6060/debug/pprof/`.

```go
import _ "net/http/pprof"
go func() { http.ListenAndServe("localhost:6060", nil) }()
```

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

### Project package.json Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/opentui/references/core/configuration.md

Define project name, module type, scripts for starting and developing, and dependencies including @opentui/core. Includes devDependencies for types and TypeScript.

```json
{
  "name": "my-tui-app",
  "type": "module",
  "scripts": {
    "start": "bun run src/index.ts",
    "dev": "bun --watch run src/index.ts",
    "test": "bun test"
  },
  "dependencies": {
    "@opentui/core": "latest"
  },
  "devDependencies": {
    "@types/bun": "latest",
    "typescript": "latest"
  }
}
```

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

### React DevTools Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/opentui/references/react/configuration.md

Set up React DevTools for debugging by installing the core package as a dev dependency and running the standalone app. Your app must be started with DEV=true.

```bash
bun add react-devtools-core@7 -d
```

```bash
npx react-devtools@7
```

```bash
DEV=true bun run src/index.tsx
```

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

### Service Installation: macOS launchd

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/tunnel/patterns.md

Install and manage cloudflared as a macOS launchd service. Requires sudo privileges for installation and starting the service.

```bash
sudo cloudflared service install
sudo launchctl start com.cloudflare.cloudflared
```

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

### Minimal Client Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/rivetkit/reference/clients/javascript.md

Demonstrates how to create a client instance and interact with a simple counter actor.

```APIDOC
## Minimal Client

```ts client.ts
import { createClient } from "rivetkit/client";
import type { registry } from "./actors";

const client = createClient<typeof registry>({
  endpoint: "https://my-namespace:pk_...@api.rivet.dev",
});
const counter = client.counter.getOrCreate(["my-counter"]);
const count = await counter.increment(1);
```
```

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

### Development Setup Commands

Source: https://github.com/pedronauck/skills/blob/main/skills/crafting-effective-readmes/templates/oss.md

Commands to clone the repository and set up the project for local development.

```bash
[Commands to clone and set up for development]
```

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

### Vue Turnstile Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/turnstile/configuration.md

Install the vue-turnstile package. Use the VueTurnstile component in your template and import it in your script setup.

```bash
npm install vue-turnstile
```

```vue
<template>
  <VueTurnstile site-key="YOUR_SITE_KEY" @success="onSuccess" />
</template>
<script setup>
import VueTurnstile from "vue-turnstile";
</script>
```

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

### Istio Installation Profiles

Source: https://github.com/pedronauck/skills/blob/main/skills/kubernetes-specialist/references/service-mesh.md

Demonstrates installing Istio with different profiles: minimal, default, demo, and production. The production profile includes resource tuning for proxies.

```bash
istioctl install --set profile=minimal
```

```bash
istioctl install --set profile=default
```

```bash
istioctl install --set profile=demo
```

```bash
istioctl install --set profile=default \
  --set values.global.proxy.resources.requests.cpu=100m \
  --set values.global.proxy.resources.requests.memory=128Mi \
  --set values.global.proxy.resources.limits.cpu=500m \
  --set values.global.proxy.resources.limits.memory=256Mi
```

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

### Install C3 CLI with Yarn

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/c3/README.md

Install the C3 CLI using Yarn. This command starts the project scaffolding process.

```bash
yarn create cloudflare
```

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

### Create Project Directory and Initialize npm

Source: https://github.com/pedronauck/skills/blob/main/skills/mastra/references/create-mastra.md

Set up the project directory and initialize npm for a new Mastra project. Navigate into the created directory before proceeding.

```bash
mkdir my-first-agent && cd my-first-agent
npm init -y
```

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

### Setup Firecrawl Skills Manually

Source: https://github.com/pedronauck/skills/blob/main/skills/firecrawl/rules/install.md

Installs Firecrawl skills manually after the CLI has been set up. This command is used when skills are not automatically installed.

```bash
firecrawl setup skills
```

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

### Manual Firecrawl CLI Installation

Source: https://github.com/pedronauck/skills/blob/main/skills/firecrawl/rules/install.md

Installs a specific version of the firecrawl-cli globally using npm. Use this if the quick setup is not suitable.

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

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

### Startup Methods

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/containers/api.md

Methods for starting container instances, with options for environment variables and waiting for ports to become ready.

```APIDOC
## Startup Methods

### start() - Basic start (8s timeout)

```typescript
await container.start();
await container.start({ envVars: { KEY: "value" } });
```

Returns when **process starts**, NOT when ports ready. Use for fire-and-forget.

### startAndWaitForPorts() - Recommended (20s timeout)

```typescript
await container.startAndWaitForPorts(); // Uses requiredPorts
await container.startAndWaitForPorts({ ports: [8080, 9090] });
await container.startAndWaitForPorts({
  ports: [8080],
  startOptions: { envVars: { KEY: "value" } },
});
```

Returns when **ports listening**. Use before HTTP/TCP requests.

**Port resolution:** explicit ports → requiredPorts → defaultPort → port 33
```

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

### Sandbox Initialization and Execution Example

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/sandbox/README.md

Example demonstrating how to initialize a sandbox using `getSandbox` and execute a command using `exec` within a Cloudflare Worker.

```APIDOC
## Quick Start Example

```typescript
import { getSandbox, proxyToSandbox, type Sandbox } from "@cloudflare/sandbox";
export { Sandbox } from "@cloudflare/sandbox";

type Env = { Sandbox: DurableObjectNamespace<Sandbox> };

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    // CRITICAL: proxyToSandbox MUST be called first for preview URLs
    const proxyResponse = await proxyToSandbox(request, env);
    if (proxyResponse) return proxyResponse;

    const sandbox = getSandbox(env.Sandbox, "my-sandbox");
    const result = await sandbox.exec('python3 -c "print(2 + 2)"');
    return Response.json({ output: result.stdout });
  },
};
```
```

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

### Go Testable Examples

Source: https://github.com/pedronauck/skills/blob/main/skills/golang-pro/references/testing.md

Create examples that are tested and appear in Go documentation. Use `// Output:` for expected output and `// Unordered output:` for maps.

```go
// Example tests that appear in godoc
func ExampleAdd() {
    result := Add(2, 3)
    fmt.Println(result)
    // Output: 5
}
```

```go
func ExampleAdd_negative() {
    result := Add(-2, -3)
    fmt.Println(result)
    // Output: -5
}
```

```go
// Unordered output
func ExampleKeys() {
    m := map[string]int{"a": 1, "b": 2, "c": 3}
    keys := Keys(m)
    for _, k := range keys {
        fmt.Println(k)
    }
    // Unordered output:
    // a
    // b
    // c
}
```

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

### Service Installation: Linux systemd

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/tunnel/patterns.md

Install and manage cloudflared as a systemd service on Linux. Includes commands to start, enable, and view logs.

```bash
cloudflared service install
systemctl start cloudflared && systemctl enable cloudflared
journalctl -u cloudflared -f  # Logs
```

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

### Quick Setup for Mastra Project

Source: https://github.com/pedronauck/skills/blob/main/skills/mastra/references/create-mastra.md

Use this command to quickly create a new Mastra project. It initiates an interactive setup process.

```bash
npm create mastra@latest
```

```bash
pnpm create mastra@latest
```

```bash
yarn create mastra@latest
```

```bash
bun create mastra@latest
```

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

### Agent Browser JSON Output Commands

Source: https://github.com/pedronauck/skills/blob/main/skills/agent-browser/SKILL.md

Examples of using the `--json` flag to get machine-readable output for commands like snapshot and get text.

```bash
agent-browser snapshot -i --json
agent-browser get text @e1 --json
```

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

### Good Example: Link with Search Parameters

Source: https://github.com/pedronauck/skills/blob/main/skills/tanstack-router-best-practices/rules/nav-link-component.md

Configure navigation links to include search parameters. This example shows how to set specific search parameters or dynamically update existing ones.

```tsx
function FilteredLink() {
  return (
    <Link to="/products" search={{ category: "electronics", sort: "price" }}>
      View Electronics
    </Link>
  );
}

// Preserving existing search params
function SortLink({ sort }: { sort: "asc" | "desc" }) {
  return (
    <Link
      to="." // Current route
      search={prev => ({ ...prev, sort })}
    >
      Sort {sort === "asc" ? "Ascending" : "Descending"}
    </Link>
  );
}
```

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

### Style Guide Examples for Pal MCP

Source: https://github.com/pedronauck/skills/blob/main/skills/pal/references/refactor.md

Provide absolute paths to reference files in 'style_guide_examples' to guide the refactoring tool towards target patterns and styles.

```json
{
  "style_guide_examples": ["/absolute/path/to/reference-file.ts"]
}
```

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

### Query Prisma Documentation Example

Source: https://github.com/pedronauck/skills/blob/main/skills/context7/SKILL.md

Example of querying documentation for Prisma. Ensure you have a valid library ID before running this command.

```bash
ctx7 docs /prisma/prisma "How to define one-to-many relations with cascade delete"
```

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

### Install @remotion/media-utils

Source: https://github.com/pedronauck/skills/blob/main/skills/remotion-best-practices/rules/audio-visualization.md

Install the media utilities package to enable audio processing capabilities.

```bash
npx remotion add @remotion/media-utils
```

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

### ArgoCD Production Installation Configuration

Source: https://github.com/pedronauck/skills/blob/main/skills/argocd-expert/SKILL.md

Example ConfigMap for production ArgoCD installation, detailing repository credentials, resource customizations, timeouts, diff options, and UI customization.

```yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: argocd-cm
  namespace: argocd
data:
  # Repository credentials
  repositories: |
    - url: https://github.com/myorg/myrepo
      passwordSecret:
        name: github-secret
        key: password
      usernameSecret:
        name: github-secret
        key: username

  # Resource customizations
  resource.customizations: |
    networking.k8s.io/Ingress:
      health.lua: |
        hs = {}
        hs.status = "Healthy"
        return hs

  # Timeout settings
  timeout.reconciliation: 180s

  # Diff customizations
  resource.compareoptions: |
    ignoreAggregatedRoles: true

  # UI customization
  ui.cssurl: "https://cdn.example.com/custom.css"
```

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

### System Prompt for Documentation Assistant

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/ai-search/patterns.md

Define a system prompt to guide the AI's behavior. This example instructs the AI to answer only from context and include code examples.

```typescript
const systemPrompt = `You are a documentation assistant.
- Answer ONLY based on provided context
- If context doesn't contain answer, say "I don't have information"
- Include code examples from context`;
```

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

### Check Kubernetes Events for Installation Failures

Source: https://github.com/pedronauck/skills/blob/main/skills/helm-chart-scaffolding/SKILL.md

After an installation failure, use `kubectl get events` to inspect Kubernetes events. Sorting by `lastTimestamp` can help identify the most recent issues.

```bash
kubectl get events --sort-by='.lastTimestamp'
```

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

### Create an Astro Blog

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/c3/api.md

Example of creating an Astro blog application and enabling immediate deployment.

```bash
# Astro blog
npm create cloudflare@latest my-blog -- --type=web-app --framework=astro --ts --deploy
```

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

### Install ArgoCD

Source: https://github.com/pedronauck/skills/blob/main/skills/argocd-expert/SKILL.md

Commands to install ArgoCD in a Kubernetes cluster, including HA setup and retrieving the initial admin password. Use port-forwarding to access the UI and CLI for login.

```bash
kubectl create namespace argocd

kubectl apply -n argocd -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/install.yaml

kubectl apply -n argocd -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/ha/install.yaml

kubectl -n argocd get secret argocd-initial-admin-secret -o jsonpath="{.data.password}" | base64 -d

kubectl port-forward svc/argocd-server -n argocd 8080:443

argocd login localhost:8080 --username admin --password <password>

argocd account update-password
```

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

### Example: Get Errors using MCP

Source: https://github.com/pedronauck/skills/blob/main/skills/next-best-practices/debug-tricks.md

A concrete example of using curl to request errors from the Next.js MCP endpoint. Replace `<port>` with your dev server's port.

```bash
curl -X POST http://localhost:<port>/_next/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{"jsonrpc":"2.0","id":"1","method":"tools/call","params":{"name":"get_errors","arguments":{}}}'
```

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

### Quick Start: Create, Configure, and Query Vectorize Index

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/vectorize/README.md

Steps to get started with Vectorize: create an index using Wrangler, configure the binding in wrangler.jsonc, and perform a basic query.

```typescript
// 1. Create index
// npx wrangler vectorize create my-index --dimensions=768 --metric=cosine

// 2. Configure binding (wrangler.jsonc)
// { "vectorize": [{ "binding": "VECTORIZE", "index_name": "my-index" }] }

// 3. Query vectors
const matches = await env.VECTORIZE.query(queryVector, { topK: 5 });
```

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

### Install @remotion/layout-utils

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

Install the necessary package for text measurement and layout utilities.

```bash
npx remotion add @remotion/layout-utils
```

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

### Launch Remotion Studio

Source: https://github.com/pedronauck/skills/blob/main/skills/promo-video/SKILL.md

Starts the Remotion development server for live previewing and iteration of your video composition. Access the studio via your web browser.

```bash
npx remotion studio
```

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

### TanStack Query: No Persistence Example

Source: https://github.com/pedronauck/skills/blob/main/skills/tanstack-query-best-practices/rules/persist-queries.md

This example shows a basic TanStack Query setup without any persistence configured. Each page refresh will result in an empty cache, leading to loading spinners and data refetches.

```tsx
// No persistence - always starts fresh
const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyApp />
    </QueryClientProvider>
  )
}

// User refreshes page:
// 1. Empty cache
// 2. Loading spinners everywhere
// 3. Refetch all data
// Poor offline experience
```

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

### R2 Bucket Binding Example

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/pages-functions/api.md

Provides an example of using the R2 bucket binding to get and put objects in a bucket. This is useful for storing and retrieving files. Requires 'BUCKET' to be configured as an R2 bucket binding.

```typescript
interface Env {
  BUCKET: R2Bucket;
}
export const onRequest: PagesFunction<Env> = async ctx => {
  const obj = await ctx.env.BUCKET.get("file.txt");
  if (!obj) return new Response("Not found", { status: 404 });
  await ctx.env.BUCKET.put("file.txt", ctx.request.body);
  return new Response(obj.body);
};
```

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

### Go Configuration Management with envconfig

Source: https://github.com/pedronauck/skills/blob/main/skills/golang-pro/references/project-structure.md

Demonstrates loading application configuration from environment variables using the `envconfig` library, with support for defaults and required fields.

```go
// config/config.go
package config

import (
    "os"
    "time"

    "github.com/kelseyhightower/envconfig"
)

type Config struct {
    Server   ServerConfig
    Database DatabaseConfig
    Redis    RedisConfig
}

type ServerConfig struct {
    Host         string        `envconfig:"SERVER_HOST" default:"0.0.0.0"`
    Port         int           `envconfig:"SERVER_PORT" default:"8080"`
    ReadTimeout  time.Duration `envconfig:"SERVER_READ_TIMEOUT" default:"10s"`
    WriteTimeout time.Duration `envconfig:"SERVER_WRITE_TIMEOUT" default:"10s"`
}

type DatabaseConfig struct {
    URL          string `envconfig:"DATABASE_URL" required:"true"`
    MaxOpenConns int    `envconfig:"DB_MAX_OPEN_CONNS" default:"25"`
    MaxIdleConns int    `envconfig:"DB_MAX_IDLE_CONNS" default:"5"`
}

type RedisConfig struct {
    Addr     string `envconfig:"REDIS_ADDR" default:"localhost:6379"`
    Password string `envconfig:"REDIS_PASSWORD"`
    DB       int    `envconfig:"REDIS_DB" default:"0"`
}

// Load loads configuration from environment
func Load() (*Config, error) {
    var cfg Config
    if err := envconfig.Process("", &cfg); err != nil {
        return nil, err
    }
    return &cfg, nil
}

```

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

### Install Component from Marketplace CLI

Source: https://github.com/pedronauck/skills/blob/main/skills/building-components/references/docs.mdx

Use this command to install a component from a marketplace using its CLI.

```bash
npx shadcn@latest add https://21st.dev/r/<your-author>/<your-component>
```

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

### TypeScript Setup for Workers

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/email-routing/configuration.md

Installs the necessary Cloudflare Workers types package and configures tsconfig.json for a TypeScript project.

```bash
npm install --save-dev @cloudflare/workers-types
```

```json
// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "lib": ["ES2022"],
    "types": ["@cloudflare/workers-types"],
    "moduleResolution": "bundler",
    "strict": true
  }
}
```

```typescript
import type { ForwardableEmailMessage } from "@cloudflare/workers-types";

export default {
  async email(message: ForwardableEmailMessage, env: Env, ctx: ExecutionContext): Promise<void> {
    await message.forward("dest@example.com");
  },
} satisfies ExportedHandler<Env>;
```

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

### Example Skill Search Queries

Source: https://github.com/pedronauck/skills/blob/main/skills/find-skills/SKILL.md

Examples of how to use the 'find' command with specific queries based on user needs.

```bash
npx skills find react performance
```

```bash
npx skills find pr review
```

```bash
npx skills find changelog
```

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

### Durable Object Storage Quick Reference

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/durable-objects/api.md

Provides a quick reference for interacting with Durable Object storage. Examples include executing a SQLite query, getting a value from Sync KV, and getting a value from Async KV.

```typescript
// SQLite (recommended)
this.ctx.storage.sql.exec("SELECT * FROM users WHERE id = ?", userId).one();

// Sync KV (SQLite DOs only)
this.ctx.storage.kv.get("key");

// Async KV (legacy)
await this.ctx.storage.get("key");
```

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

### Install and Listen with Hookdeck CLI

Source: https://github.com/pedronauck/skills/blob/main/skills/stripe-webhooks/examples/express/README.md

Install the Hookdeck CLI and use it to listen for events on a specific port and path, forwarding them to your local server.

```bash
brew install hookdeck/hookdeck/hookdeck
hookdeck listen 3000 --path /webhooks/stripe
```

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

### Type Generation Workflow: Initial Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/bindings/api.md

Steps to install Wrangler and generate initial TypeScript types for Cloudflare bindings.

```APIDOC
## Type Generation Workflow

### Initial Setup

```bash
# Install wrangler
npm install -D wrangler

# Generate types from wrangler.jsonc
npx wrangler types
```
```

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

### Setup Cloudflare Pipelines

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/pipelines/README.md

Run this command to interactively set up Cloudflare Pipelines.

```bash
npx wrangler pipelines setup
```

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

### Create TUI Project Example

Source: https://github.com/pedronauck/skills/blob/main/skills/opentui/SKILL.md

Use `create-tui` for new projects. Ensure options precede arguments.

```bash
bunx create-tui -t react my-app
```

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

### Helm Plugin Installation and Usage

Source: https://github.com/pedronauck/skills/blob/main/skills/kubernetes-specialist/references/helm-charts.md

Examples of installing and using popular Helm plugins: helm-diff for previewing upgrades, helm-secrets for managing encrypted secrets, helm-git for using Git repositories as chart sources, and helm-s3 for S3 as a chart repository.

```bash
# helm-diff - preview upgrades
helm plugin install https://github.com/databus23/helm-diff
helm diff upgrade myapp ./mychart -f values-prod.yaml

# helm-secrets - manage encrypted secrets
helm plugin install https://github.com/jkroepke/helm-secrets
helm secrets encrypt secrets.yaml
helm secrets decrypt secrets.yaml.enc
helm secrets install myapp ./mychart -f secrets.yaml.enc

# helm-git - use git repos as chart sources
helm plugin install https://github.com/aslafy-z/helm-git
helm repo add mycharts git+https://github.com/myorg/charts@charts?ref=main

# helm-s3 - S3 as chart repository
helm plugin install https://github.com/hypnoglow/helm-s3
helm s3 init s3://my-bucket/charts
helm s3 push mychart-1.2.0.tgz my-s3-repo
```

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

### Basic RivetKit Registry Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/rivetkit/reference/general/registry-configuration.md

Demonstrates the fundamental way to initialize a RivetKit registry with a custom actor. Ensure 'rivetkit' is installed.

```typescript
import { setup, actor } from "rivetkit";

const myActor = actor({ state: {}, actions: {} });

const registry = setup({
  use: { myActor },
});
```

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

### Svelte Turnstile Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/turnstile/configuration.md

Install the svelte-turnstile package. Import the Turnstile component and use it in your Svelte markup, listening for the 'turnstile-callback' event.

```bash
npm install svelte-turnstile
```

```svelte
<script>
import Turnstile from 'svelte-turnstile';
</script>
<Turnstile siteKey="YOUR_SITE_KEY" on:turnstile-callback={handleToken} />
```

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

### Install QMD CLI and Add Collection

Source: https://github.com/pedronauck/skills/blob/main/skills/qmd/references/mcp-setup.md

Install the QMD CLI globally and add a markdown collection for knowledge.

```bash
npm install -g @tobilu/qmd
qmd collection add ~/path/to/markdown --name myknowledge
qmd embed
```

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

### Create Project from Local Path Template

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/c3/patterns.md

Initialize a new project using a local template directory. Ensure the template contains a `c3.config.json` file.

```bash
npm create cloudflare@latest my-app -- --template=../my-template
```

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

### React Turnstile Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/turnstile/configuration.md

Install the @marsidev/react-turnstile package and use the Turnstile component. Pass your site key and a callback function for success.

```bash
npm install @marsidev/react-turnstile
```

```jsx
import Turnstile from "@marsidev/react-turnstile";

<Turnstile siteKey="YOUR_SITE_KEY" onSuccess={token => console.log(token)} />;
```

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

### Using postal-mime for Email Parsing

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/email-routing/configuration.md

Installs the postal-mime library and provides an example of parsing raw email content within a worker.

```bash
npm install postal-mime
```

```typescript
import PostalMime from "postal-mime";

export default {
  async email(message, env, ctx) {
    const parser = new PostalMime();
    const email = await parser.parse(await message.raw.arrayBuffer());
    console.log(email.subject);
    await message.forward("inbox@corp.com");
  },
} satisfies ExportedHandler;
```

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

### Initialize Vitest Project Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/vitest/references/core-cli.md

Use the `init` command to set up Vitest for specific environments, such as browser testing.

```bash
vitest init browser            # Set up browser testing
```

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

### beforeBuild Hook Example

Source: https://github.com/pedronauck/skills/blob/main/skills/electron-builder/references/hooks-and-programmatic.md

The `beforeBuild` hook runs before dependency installation or rebuild. Returning `false` skips the default dependency rebuild process.

```typescript
beforeBuild?: (context: BeforeBuildContext) => Promise<boolean | void> | boolean | void;

interface BeforeBuildContext {
  appDir: string;
  electronVersion: string;
  arch: Arch;
  platform: Platform;
}
```

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

### Makefile Example for Build Automation

Source: https://github.com/pedronauck/skills/blob/main/skills/golang-pro/references/project-structure.md

A basic Makefile demonstrating common targets for building, testing, linting, cleaning, and running Go projects.

```makefile
# Makefile
.PHONY: build test lint clean run
```

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

### Basic RealtimeKit Client Setup

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/realtimekit/patterns.md

Initialize the RealtimeKit client, join a meeting, and set up event listeners for room joining and participant activity. Ensure your `authToken` is valid.

```typescript
import RealtimeKitClient from "@cloudflare/realtimekit";

const meeting = new RealtimeKitClient({ authToken, video: true, audio: true });
meeting.self.on("roomJoined", () => console.log("Joined:", meeting.meta.meetingTitle));
meeting.participants.joined.on("participantJoined", p => console.log(`${p.name} joined`));
await meeting.join();
```

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

### KV Put and Get Operations

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/kv/README.md

Basic examples of writing and reading data from KV. The `put` operation supports an optional `expirationTtl` for time-to-live.

```typescript
// Write
await env.MY_KV.put("key", "value", { expirationTtl: 300 });

// Read
const value = await env.MY_KV.get("key");
const json = await env.MY_KV.get<Config>("config", "json");
```

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

### JWT Validation Example

Source: https://github.com/pedronauck/skills/blob/main/skills/cloudflare/references/api-shield/gotchas.md

Use this function to validate JWTs. Ensure the configuration ID matches your setup and account for potential clock skew.

```javascript
is_jwt_valid(http.request.jwt.payload["{config_id}"][0])
```

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

### Install Remotion Transitions

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

Install the Remotion transitions package using npm or yarn.

```bash
npx remotion add @remotion/transitions
```

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

### Install Remotion Best Practices Skill

Source: https://github.com/pedronauck/skills/blob/main/skills/promo-video/SKILL.md

Command to install the remotion-best-practices skill if it's not already present.

```bash
npx skills add remotion-dev/skills
```