### Add an example component to your library

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/quick-start.md

Create a `Badge.tsx` file with a React component.

```tsx
// Badge.tsx
import * as React from "react";

interface BadgeProps {
  text: string;
  variant: 'Light' | 'Dark';
}

export const Badge = ({ text, variant }: BadgeProps) => (
  <span
    style={{
      backgroundColor: variant === 'Light' ? '#eee' : '#000',
      borderRadius: '1em',
      color: variant === 'Light' ? '#000' : '#fff',
      display: 'inline-block',
      fontSize: '14px',
      lineHeight: 2,
      padding: '0 1em',
    }}
  >
    {text}
  </span>
);
```

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

### webflow.json Configuration

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/installation.md

Example configuration for the webflow.json file to define library name, component paths, and optional webpack configuration.

```json
{
  "library": {
    "name": "<Your Library Name>",
    "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
    "bundleConfig": "./webpack.webflow.js",
    "globals": "./src/globals.webflow.ts"
  }
}
```

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

### Direct to Your Platform First Installation URL for Data Client Apps

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/app-submission-and-listing.md

This URL directs users to your platform first for setup before initiating the OAuth flow.

```URL
https://your-app.com/signup
```

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

### Get Robots.txt SDK Example (Python)

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/robots-txt.md

Python SDK example for getting the robots.txt configuration.

```Python
from webflow import Webflow

client = Webflow(access_token="YOUR_ACCESS_TOKEN")
client.sites.robots_txt.get(site_id="580e63e98c9a982ac9b8b741")
```

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

### Full Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-browser-api/references/introduction.md

A complete example demonstrating `wf.ready()`, `wf.onVariationRecorded()`, and `wf.setAttributes()`.

```javascript
wf.ready(function() {
  wf.onVariationRecorded(function(result) {
    console.log(result);
  });

  wf.setAttributes("user", {
    userSegment: "enterprise",
    userRole: "technicalBuyer",
  });
});
```

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

### Design System Setup

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/variables-api.md

A workflow example that sets up a comprehensive design system with color, spacing, and typography variables.

```typescript
async function setupDesignSystem() {
  const collection = await webflow.getDefaultVariableCollection();

  // Colors
  const colors = {
    primary: '#146EF5',
    secondary: '#6B7280',
    success: '#10B981',
    warning: '#F59E0B',
    error: '#EF4444',
    background: '#FFFFFF',
    surface: '#F3F4F6',
    textPrimary: '#111827',
    textSecondary: '#6B7280',
  };

  for (const [name, value] of Object.entries(colors)) {
    await collection.createColorVariable(name, value);
  }

  // Spacing
  const spacing = {
    'spacing-xs': 4,
    'spacing-sm': 8,
    'spacing-md': 16,
    'spacing-lg': 24,
    'spacing-xl': 32,
  };

  for (const [name, value] of Object.entries(spacing)) {
    await collection.createSizeVariable(name, { unit: 'px', value });
  }

  // Typography
  await collection.createFontFamilyVariable('font-heading', 'Inter');
  await collection.createFontFamilyVariable('font-body', 'Inter');

  await webflow.notify({ type: 'Success', message: 'Design system created!' });
}
```

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

### Get Robots.txt SDK Example (TypeScript)

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/robots-txt.md

TypeScript SDK example for getting the robots.txt configuration.

```TypeScript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.robotsTxt.get("580e63e98c9a982ac9b8b741");
```

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

### Install Webflow CLI and Dependencies

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/installation.md

Installs the Webflow CLI globally and necessary dependencies for importing React components into Webflow.

```bash
# Install the Webflow CLI globally
npm install -g @webflow/webflow-cli

# Install dependencies in your project
npm i --save-dev @webflow/data-types @webflow/react
```

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

### Get Launch Context

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/extension-utilities.md

Example of retrieving the launch context to determine how the extension was initiated.

```typescript
webflow.getLaunchContext(): Promise<LaunchContext | null>
```

```typescript
type LaunchContext = {
  type: 'AppIntent' | 'AppConnection' | 'AppsPanel';
  value: null | string | Record<'form' | 'image', 'create' | 'manage'>;
}
```

```typescript
const context = await webflow.getLaunchContext();

if (context?.type === 'AppIntent') {
  if (context.value?.image === 'manage') {
    showImageManager();
  } else if (context.value?.form === 'manage') {
    showFormManager();
  }
} else if (context?.type === 'AppConnection') {
  handleConnection(context.value);
} else {
  showHomePage();
}
```

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

### Install Nano Stores

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/component-architecture.md

Command to install Nano Stores and its React integration.

```bash
npm install nanostores @nanostores/react
```

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

### Installation

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/webflow-cli-reference.md

Install the Webflow CLI globally using npm or pnpm.

```bash
npm install -g @webflow/webflow-cli
# or
pnpm add -g @webflow/webflow-cli
```

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

### Development Workflow - Start

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/create-webflow-extension-reference.md

Command to start the development server after scaffolding a project.

```bash
cd <project-name>
pnpm dev
```

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

### Install styled-components utility and dependencies

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/frameworks-and-libraries.md

Installs the Webflow utility for styled-components and its peer dependencies.

```bash
npm i @webflow/styled-components-utils
npm i styled-components react react-dom
```

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

### Page Setup with SEO and Design Tokens

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/code-examples.md

Creates a new page, sets SEO metadata and Open Graph fields, creates design token variables, and inserts a styled hero heading on the page.

```typescript
async function setupPageWithSEO() {
  // --- Pages: create and configure page ---
  const pageName = 'Demo Page';
  const slug = 'demo-page';

  const page = await webflow.createPage();
  await page.setName(pageName);
  await page.setSlug(slug);
  await page.setTitle(`${pageName} | My Site`);
  await page.setDescription(`Learn more about ${pageName.toLowerCase()} and what we offer.`);

  // Sync SEO fields
  await page.useTitleAsSearchTitle(true);
  await page.useDescriptionAsSearchDescription(true);

  // Set Open Graph
  await page.useTitleAsOpenGraphTitle(true);
  await page.useDescriptionAsOpenGraphDescription(true);

  // Set OG image using a placeholder
  await page.setOpenGraphImage('https://picsum.photos/1200/630');

  // Navigate to the new page
  await webflow.switchPage(page);

  // --- Variables: create page-specific design tokens ---

  const collection = await webflow.getDefaultVariableCollection();

  const headingColor = await collection.createColorVariable('hero-heading-color', '#111827');
  const heroSize = await collection.createSizeVariable('hero-heading-size', {
    type: 'custom',
    value: 'clamp(2rem, 5vw, 3.5rem)',
  });

  // --- Styles: create hero heading style ---

  const heroStyle = await webflow.createStyle('HeroHeading');
  await heroStyle.setProperties({
    'color': headingColor,
    'font-size': heroSize,
    'font-weight': '800',
    'line-height': '1.1',
    'margin-bottom': '24px',
  });

  // --- Elements: insert a hero heading on the new page ---

    /**
   * This example uses presets so we can use Webflow-native elements like `Section`, `DivBlock`, and `Heading`. The `elementBuilder()` API only supports `webflow.elementPresets.DOM` (custom DOM elements), so it's best used when you're inserting a larger DOM-only tree and want to reduce API calls. Refer to the 'Using Element Builder' section in the [Elements API reference](elements-api.md) for more details and examples on how to use `elementBuilder()` effectively.
   */

  const root = await webflow.getRootElement();
  if (!root?.children) return;

  const section = await root.append(webflow.elementPresets.Section);
  if (!section.children) return;

  const container = await section.append(webflow.elementPresets.DivBlock);
  if (!container.children) return;

  const heading = await container.append(webflow.elementPresets.Heading);
  await heading.setTextContent(pageName);
  await heading.setStyles([heroStyle]);

  await webflow.notify({ type: 'Success', message: `Page "${pageName}" created with SEO and hero` });
}
```

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

### Install with npm

Source: https://github.com/224-industries/webflow-skills/blob/main/docs/index.html

Instructions for installing the Webflow Skills package using npm.

```bash
npm install @webflow/skills
```

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

### Install with yarn

Source: https://github.com/224-industries/webflow-skills/blob/main/docs/index.html

Instructions for installing the Webflow Skills package using yarn.

```bash
yarn add @webflow/skills
```

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

### Get Site Plan - Python

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/workspace-management.md

Example of how to get a site's plan using the Webflow Python client.

```python
from webflow import Webflow

client = Webflow(access_token="YOUR_ACCESS_TOKEN")
client.sites.plans.get_site_plan(site_id="580e63e98c9a982ac9b8b741")
```

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

### Basic Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/playground-workflow.md

Get the currently selected element and log its type.

```javascript
// Get the currently selected element and log its type
const el = await webflow.getSelectedElement();

if (el) {
  await webflow.notify({ type: "Success", message: `Selected: ${el.type}` });
} else {
  await webflow.notify({ type: "Error", message: "No element selected" });
}
```

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

### Install Emotion utility and dependencies

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/frameworks-and-libraries.md

Installs the Webflow utility for Emotion and its peer dependencies.

```bash
npm i @webflow/emotion-utils
npm i @emotion/cache @emotion/react react react-dom
```

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

### Create a Webflow configuration file

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/quick-start.md

Create a `webflow.json` file in the root of your repository to define the configuration for your code component library.

```json
{
  "library": {
    "name": "<Your Library Name>",
    "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"]
  }
}
```

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

### Create Redirect SDK Example (Python)

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/301-redirects.md

Python SDK example for creating a 301 redirect.

```python
from webflow import Webflow

client = Webflow(access_token="YOUR_ACCESS_TOKEN")
client.sites.redirects.create(
    site_id="580e63e98c9a982ac9b8b741",
    id="42e1a2b7aa1a13f768a0042a",
    from_url="/mostly-harmless",
    to_url="/earth",
)
```

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

### Create Redirect SDK Example (TypeScript)

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/301-redirects.md

TypeScript SDK example for creating a 301 redirect.

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.redirects.create("580e63e98c9a982ac9b8b741", {
  id: "42e1a2b7aa1a13f768a0042a",
  fromUrl: "/mostly-harmless",
  toUrl: "/earth",
});
```

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

### Manage App Connections on an Element

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/extension-utilities.md

Examples of setting, getting, and removing app connections for a specific element.

```typescript
// Set a connection on an element
await element.setAppConnection('manageImageElement');

// Get all connections for an element (only returns connections from your app)
const connections = await element.getAppConnections();

// Remove a connection
await element.removeAppConnection('manageImageElement');
```

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

### Get All Pages and Folders

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/pages-api.md

Retrieves all pages and folders within the site. Includes filtering examples for pages and folders.

```typescript
const pagesAndFolders = await webflow.getAllPagesAndFolders();

// Filter pages
const pages = pagesAndFolders?.filter((i): i is Page => i.type === "Page");

// Filter folders
const folders = pagesAndFolders?.filter((i): i is Folder => i.type === "PageFolder");
```

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

### Install skill in Gumloop

Source: https://github.com/224-industries/webflow-skills/blob/main/docs/index.html

Steps to install a .skill file in Gumloop.

```bash
# 1. Download the .skill file from the skills above
# 2. In Gumloop, open your agent's configuration
# 3. Scroll to the Skills section
# 4. Click + Skill and upload the .skill file
```

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

### Install Tailwind CSS and PostCSS plugin

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/frameworks-and-libraries.md

Installs the necessary packages for using Tailwind CSS with PostCSS.

```bash
npm install tailwindcss @tailwindcss/postcss postcss
```

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

### Install Sass and sass-loader

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/frameworks-and-libraries.md

Installs Sass and the necessary webpack loader for processing Sass files.

```bash
npm install --save-dev sass sass-loader
```

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

### Install Less and less-loader

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/frameworks-and-libraries.md

Installs Less and the necessary webpack loader for processing Less files.

```bash
npm install --save-dev less less-loader
```

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

### Provide Helpful Defaults Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/prop-types.md

Example demonstrating how to provide a default value for a Text prop type.

```typescript
title: props.Text({
  name: 'Button Text',
  defaultValue: 'Click me', // Component works out of the box
}),
```

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

### List Webhooks cURL Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-webhooks/references/webhook-api.md

Example cURL command to list all webhooks for a site.

```bash
curl -X GET "https://api.webflow.com/v2/sites/{site_id}/webhooks" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"
```

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

### Update Redirect SDK Example (Python)

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/301-redirects.md

Python SDK example for updating a 301 redirect.

```python
from webflow import Webflow

client = Webflow(access_token="YOUR_ACCESS_TOKEN")
client.sites.redirects.update(
    site_id="580e63e98c9a982ac9b8b741",
    redirect_id="66c4cb9a20cac35ed19500e6",
    id="42e1a2b7aa1a13f768a0042a",
    from_url="/mostly-harmless",
    to_url="/earth",
)
```

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

### List Redirects SDK Example (TypeScript)

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/301-redirects.md

TypeScript SDK example for listing 301 redirects.

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.redirects.list("580e63e98c9a982ac9b8b741");
```

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

### Update Redirect SDK Example (TypeScript)

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/301-redirects.md

TypeScript SDK example for updating a 301 redirect.

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.redirects.update("580e63e98c9a982ac9b8b741", "66c4cb9a20cac35ed19500e6", {
  id: "42e1a2b7aa1a13f768a0042a",
  fromUrl: "/mostly-harmless",
  toUrl: "/earth",
});
```

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

### Component Usage Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/prop-types/text.md

Example of how to use the component that has a Text property.

```tsx
// MyComponent.tsx
import React from "react";

interface MyComponentProps {
  title?: string;
}

export const MyComponent = ({ title }: MyComponentProps) => {
  return (
    <h1 className="title">
      {title}
    </h1>
  );
};
```

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

### List Redirects SDK Example (Python)

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/301-redirects.md

Python SDK example for listing 301 redirects.

```python
from webflow import Webflow

client = Webflow(access_token="YOUR_ACCESS_TOKEN")
client.sites.redirects.list(site_id="580e63e98c9a982ac9b8b741")
```

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

### Install Webflow CLI

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/cli.md

Installs the Webflow CLI globally using npm.

```bash
npm install -g @webflow/webflow-cli
```

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

### Replace Robots.txt SDK Example (Python)

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/robots-txt.md

Python SDK example for replacing the robots.txt configuration.

```Python
from webflow import RobotsRulesItem, Webflow

client = Webflow(access_token="YOUR_ACCESS_TOKEN")
client.sites.robots_txt.put(
    site_id="580e63e98c9a982ac9b8b741",
    rules=[
        RobotsRulesItem(
            user_agent="googlebot",
            allows=["/public"],
            disallows=["/vogon-poetry", "/total-perspective-vortex"],
        )
    ],
    sitemap="https://heartofgold.ship/sitemap.xml",
)
```

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

### Define Component Props

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/quick-start.md

Example of defining configurable props for a Webflow code component using TypeScript and Webflow's data types.

```tsx
// Badge.webflow.tsx
import { Badge } from './Badge';
import { props } from '@webflow/data-types';
import { declareComponent } from '@webflow/react';

export default declareComponent(Badge, {
  name: 'Badge',
  description: 'A badge with variants',
  group: 'Info',
  props: {
    text: props.Text({
      name: "Text",
      defaultValue: "Hello World",
    }),
    variant: props.Variant({
      name: "Variant",
      options: ["Light", "Dark"],
      defaultValue: "Light",
    }),
  },
});
```

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

### Create Webhook via API

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-webhooks/references/setup.md

Example of creating a webhook using the Webflow API.

```bash
curl -X POST https://api.webflow.com/v2/sites/{site_id}/webhooks \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "triggerType": "form_submission",
    "url": "https://your-app.com/webhooks/webflow",
    "filter": {
      "name": "contact-form"
    }
  }'
```

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

### Get Webhook cURL Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-webhooks/references/webhook-api.md

Example cURL command to get a specific webhook by its ID.

```bash
curl -X GET "https://api.webflow.com/v2/webhooks/{webhook_id}" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"
```

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

### Replace Robots.txt SDK Example (TypeScript)

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/robots-txt.md

TypeScript SDK example for replacing the robots.txt configuration.

```TypeScript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.robotsTxt.put("580e63e98c9a982ac9b8b741", {
  rules: [
    {
      userAgent: "googlebot",
      allows: ["/public"],
      disallows: ["/vogon-poetry", "/total-perspective-vortex"],
    },
  ],
  sitemap: "https://heartofgold.ship/sitemap.xml",
});
```

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

### Readiness Wrapper

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-browser-api/references/introduction.md

Ensures the API is initialized by wrapping code in `wf.ready()`.

```javascript
wf.ready(function() {
  // Your Browser API code here
});
```

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

### Get Selected Image Asset

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/assets-api.md

A workflow example to get the asset of a selected image element and display its name.

```typescript
async function getSelectedImage() {

  const selected = await webflow.getSelectedElement();
  
  if (selected?.type === 'Image') {

    const asset = await selected.getAsset();
    const name = await asset.getName();

    await webflow.notify({ type: 'Info', message: `Selected image: ${name}` });

    return asset;

  } else {

    await webflow.notify({ type: 'Error', message: 'No image element selected' });
    return null;

  }

}
```

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

### Multiple `wf.ready()` Calls

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-browser-api/references/introduction.md

Demonstrates that multiple `wf.ready()` calls can be made on the same page, with callbacks executing in order.

```javascript
wf.ready(function() {
  wf.onVariationRecorded(function(result) {
    console.log(result);
  });
});

wf.ready(function() {
  wf.setAttributes("user", {
    userSegment: "enterprise",
  });
});
```

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

### Get Site Plan - TypeScript

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/workspace-management.md

Example of how to get a site's plan using the Webflow TypeScript client.

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.plans.getSitePlan("580e63e98c9a982ac9b8b741");
```

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

### Context7 CLI Installation

Source: https://github.com/224-industries/webflow-skills/blob/main/README.md

Installs the 224 Industries Webflow Skills using the Context7 CLI.

```bash
npx ctx7 skills install /224-industries/webflow-skills
```

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

### Get Modes

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/variables-api.md

Examples of retrieving variable modes.

```typescript
const collection = await webflow.getDefaultVariableCollection();

// All modes
const allModes = await collection.getAllVariableModes();

// By name
const darkMode = await collection.getVariableModeByName('Dark');

// By ID
const mode = await collection.getVariableModeById(modeId);
```

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

### Add callbacks and attributes

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-browser-api/references/optimize-overview.md

Example of tracking variation events and setting custom visitor attributes.

```javascript
wf.ready(function() {
  // Track variation events
  wf.onVariationRecorded(function(result) {
    console.log(result);
  });

  // Set custom visitor attributes
  wf.setAttributes("user", {
    userSegment: "enterprise",
    userRole: "technicalBuyer",
  });
});
```

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

### Get Variable Name

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/variables-api.md

Example of retrieving the name of a variable.

```typescript
const name = await variable.getName();
```

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

### Get All Variables in Collection

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/variables-api.md

Example of retrieving all variables within a collection.

```typescript
const variables = await collection.getAllVariables();
```

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

### Get Variable by ID

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/variables-api.md

Example of retrieving a variable using its ID.

```typescript
const variable = await collection.getVariable('variable-81b8fa46-aa26-f1ef-e265-a87ef3be63a5');
```

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

### Get Variable by Name

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/variables-api.md

Example of retrieving a variable using its name.

```typescript
const variable = await collection.getVariableByName('Brand Blue');
```

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

### Interactive Mode - Pre-filled Options

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/create-webflow-extension-reference.md

Example of running in interactive mode while pre-filling some options.

```bash
npx create-webflow-extension@latest my-extension --pm pnpm
```

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

### Usage

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/create-webflow-extension-reference.md

Basic command to scaffold a new Webflow Designer Extension project.

```bash
npx create-webflow-extension@latest [name] [options]
```

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

### Declare the component

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/quick-start.md

Declare the code component using the `declareComponent` function.

```tsx
// Badge.webflow.tsx
import { Badge } from './Badge';
import { props } from '@webflow/data-types';
import { declareComponent } from '@webflow/react';

export default declareComponent(Badge, {
  name: 'Badge',
  description: 'A badge with variants',
  group: 'Info',
});
```

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

### wf.ready() Usage Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-browser-api/references/wf-ready.md

An example of how to use wf.ready() to execute code once the Browser API is ready, including calling other API methods.

```javascript
wf.ready(function() {
  console.log("The Browser API is ready to use!");
  const consentStatus = wf.getUserTrackingChoice();
  console.log(consentStatus);
});
```

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

### Handle Null Elements

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/elements-api.md

An example showing how to safely get a selected element and handle the case where no element is selected.

```typescript
const el = await webflow.getSelectedElement();
if (!el) {
  await webflow.notify({ type: 'Error', message: 'Select an element' });
  return;
}
```

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

### Environment Variables for Webhooks

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-webhooks/references/setup.md

Example .env file for configuring webhook secrets and API credentials.

```bash
# For OAuth App webhooks
WEBFLOW_WEBHOOK_SECRET=your_oauth_client_secret

# For API-created webhooks (after April 2025)
WEBFLOW_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxx

# Optional: For making API calls
WEBFLOW_API_TOKEN=your_api_token
WEBFLOW_SITE_ID=your_site_id
```

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

### Get User ID Token

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/extension-utilities.md

Example of retrieving the user's ID token for authentication purposes.

```typescript
webflow.getIdToken(): Promise<string>
```

```typescript
const idToken = await webflow.getIdToken();
```

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

### FastAPI Raw Body Handling

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-webhooks/references/faq.md

Example of how to get the raw request body as bytes in FastAPI for signature verification.

```python
raw_body = await request.body()
```

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

### Checking user tracking choice

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-browser-api/references/consent-management.md

Example of how to get and log the user's current tracking consent state.

```javascript
wf.ready(function() {
  var choice = wf.getUserTrackingChoice();
  console.log(choice); // "allow", "deny", or "none"
});
```

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

### Install Material UI with Emotion utility

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/frameworks-and-libraries.md

Installs Material UI along with the Emotion utility for Shadow DOM compatibility.

```bash
npm i @webflow/emotion-utils
npm i @mui/material @emotion/react @emotion/cache
```

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

### Next.js App Router Raw Body Handling

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-webhooks/references/faq.md

Example of how to get the raw request body as text in Next.js App Router for signature verification.

```typescript
const rawBody = await request.text();
```

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

### Import the React component and Webflow functions

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/quick-start.md

Import necessary dependencies to create your code component: the React component, prop types, and the `declareComponent` function.

```tsx
// Badge.webflow.tsx
import { Badge } from './Badge';
import { props } from '@webflow/data-types';
import { declareComponent } from '@webflow/react';
```

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

### Browser Storage Examples

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/component-architecture.md

Demonstrates using localStorage for persistent data and sessionStorage for session-only data.

```tsx
// ThemePreference.tsx
// localStorage - persists across browser sessions
window.localStorage.setItem('userPreferences', JSON.stringify({ theme: 'dark' }));
const prefs = JSON.parse(localStorage.getItem('userPreferences'));

// sessionStorage - cleared when tab closes
window.sessionStorage.setItem('tempData', 'value');
```

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

### Declaration Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/prop-types/visibility.md

Example of declaring a component with a Visibility prop.

```typescript
// MyComponent.webflow.tsx
import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";

export default declareComponent(MyComponent, {
  name: "MyComponent",
  description: "A component with a Visibility property",
  props: {
    isVisible: props.Visibility({
      name: "Show Element",
      group: "Display",
      defaultValue: true
    })
  }
});
```

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

### List Command

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/webflow-cli-reference.md

List available project templates.

```bash
webflow extension list
```

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

### Manual Authentication with API Token

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/installation.md

Command to manually authenticate with Webflow using a Workspace API token, useful for sharing component libraries to different workspaces.

```bash
npx webflow library share --api-token <your-api-token>
```

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

### Declaration Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/prop-types/variant.md

Example of declaring a component with a Variant property.

```tsx
// MyComponent.webflow.tsx
import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";

export default declareComponent(MyComponent, {
  name: "MyComponent",
  description: "A component with a Variant property",
  props: {
    style: props.Variant({
      name: "Button Style",
      group: "Style",
      options: ["Primary", "Secondary", "Tertiary"],
      defaultValue: "Primary"
    })
  }
});
```

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

### Wrap code in wf.ready()

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-browser-api/references/optimize-overview.md

Since the API loads asynchronously, always wrap your code in wf.ready().

```javascript
wf.ready(function() {
  // Your Optimize code here
});
```

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

### Creating a Code Component

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/faq.md

Steps to create your first code component using the Webflow CLI and React.

```bash
npm install -g @webflow/webflow-cli
npm i --save-dev @webflow/react @webflow/data-types
```

```bash
npx webflow library share
```

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

### TypeScript SDK Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/301-redirects.md

Example of deleting a redirect using the Webflow TypeScript SDK.

```typescript
import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_ACCESS_TOKEN" });
await client.sites.redirects.delete(
  "580e63e98c9a982ac9b8b741",
  "66c4cb9a20cac35ed19500e6"
);
```

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

### Create Webhook cURL Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-webhooks/references/webhook-api.md

Example cURL command to create a webhook, demonstrating the POST request with necessary headers and data.

```bash
curl -X POST "https://api.webflow.com/v2/sites/{site_id}/webhooks" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "triggerType": "form_submission",
    "url": "https://your-app.com/webhooks/webflow"
  }'
```

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

### Python SDK Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/301-redirects.md

Example of deleting a redirect using the Webflow Python SDK.

```python
from webflow import Webflow

client = Webflow(access_token="YOUR_ACCESS_TOKEN")
client.sites.redirects.delete(
    site_id="580e63e98c9a982ac9b8b741",
    redirect_id="66c4cb9a20cac35ed19500e6",
)
```

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

### Install all skills

Source: https://github.com/224-industries/webflow-skills/blob/main/README.md

Installs all available Webflow Agent Skills from 224 Industries using the skills CLI.

```bash
npx skills add 224-industries/webflow-skills
```

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

### Component Usage Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/prop-types/variant.md

Example of how to use the component with the Variant property.

```tsx
// MyComponent.tsx
import React from "react";

interface MyComponentProps {
  style?: "Primary" | "Secondary" | "Tertiary";
}

export const MyComponent = ({ style }: MyComponentProps) => {
  return (
    <button className={`button button--${style?.toLowerCase()}`}>
      Click me
    </button>
  );
};

```

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

### Create Site - Python SDK

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-enterprise-api/references/workspace-management.md

Example of creating a new site using the Webflow Python SDK.

```python
from webflow import Webflow

client = Webflow(access_token="YOUR_ACCESS_TOKEN")
client.sites.create(
    workspace_id="580e63e98c9a982ac9b8b741",
    name="The Hitchhiker's Guide to the Galaxy",
)
```

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

### Webflow JSON Configuration for Webpack Override

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/bundling-and-import.md

Example of how to reference a custom webpack configuration file in webflow.json.

```json
{
  "library": {
    "name": "My Library",
    "components": ["./src/components/**/*.webflow.{js,ts,tsx}"],
    "bundleConfig": "./webpack.webflow.js"
  }
}
```

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

### Create a Nano Store

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/references/component-architecture.md

Example of creating a shared, reactive state store using Nano Stores' atom().

```tsx
// Store.tsx
import { atom } from 'nanostores';

// Shared state store - any component can read/write to this
export const $counter = atom(0);
```

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

### Configure App Intents and Connections in webflow.json

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-designer-api/references/extension-utilities.md

Example configuration for app intents and app connections in the webflow.json file.

```json
{
  "appIntents": {
    "image": ["manage"],
    "form": ["manage"]
  },
  "appConnections": ["manageImageElement", "manageFormElement"]
}
```

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

### Search References CLI Commands

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-code-components/SKILL.md

Examples of using the `search_references.py` script to list, search by tag, search by keyword, and filter prop type references.

```bash
# List all references with metadata
python scripts/search_references.py --list
```

```bash
# Search by tag (exact match)
python scripts/search_references.py --tag <tag>
```

```bash
# Search by keyword (across name, description, tags, and content)
python scripts/search_references.py --search <query>
```

```bash
# Search only prop type references
python scripts/search_references.py --prop-types
```

```bash
python scripts/search_references.py --prop-types --tag <tag>
```

```bash
python scripts/search_references.py --prop-types --search <query>
```

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

### Remove Webhook cURL Example

Source: https://github.com/224-industries/webflow-skills/blob/main/skills/webflow-webhooks/references/webhook-api.md

Example cURL command to delete a webhook.

```bash
curl -X DELETE "https://api.webflow.com/v2/webhooks/{webhook_id}" \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"
```