webflow-debug-bundle

Collect Webflow debug evidence for support tickets and troubleshooting. Gathers SDK version, token validation, rate limit status, site connectivity, CMS health, and error logs into a single diagnostic bundle. Trigger with phrases like "webflow debug", "webflow support bundle", "collect webflow logs", "webflow diagnostic", "webflow troubleshoot".

1,868 stars

Best use case

webflow-debug-bundle is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Collect Webflow debug evidence for support tickets and troubleshooting. Gathers SDK version, token validation, rate limit status, site connectivity, CMS health, and error logs into a single diagnostic bundle. Trigger with phrases like "webflow debug", "webflow support bundle", "collect webflow logs", "webflow diagnostic", "webflow troubleshoot".

Teams using webflow-debug-bundle should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/webflow-debug-bundle/SKILL.md --create-dirs "https://raw.githubusercontent.com/jeremylongshore/claude-code-plugins-plus-skills/main/plugins/saas-packs/webflow-pack/skills/webflow-debug-bundle/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/webflow-debug-bundle/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How webflow-debug-bundle Compares

Feature / Agentwebflow-debug-bundleStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Collect Webflow debug evidence for support tickets and troubleshooting. Gathers SDK version, token validation, rate limit status, site connectivity, CMS health, and error logs into a single diagnostic bundle. Trigger with phrases like "webflow debug", "webflow support bundle", "collect webflow logs", "webflow diagnostic", "webflow troubleshoot".

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

Related Guides

SKILL.md Source

# Webflow Debug Bundle

## Overview

Collect comprehensive diagnostic information for Webflow integration troubleshooting.
Generates a support-ready bundle with SDK version, token status, rate limits, site
health, and redacted configuration.

## Prerequisites

- `webflow-api` SDK installed
- Access to application logs
- Permission to run diagnostic commands

## Instructions

### Step 1: Debug Bundle Script

```bash
#!/bin/bash
# webflow-debug-bundle.sh
set -euo pipefail

BUNDLE_DIR="webflow-debug-$(date +%Y%m%d-%H%M%S)"
mkdir -p "$BUNDLE_DIR"

echo "=== Webflow Debug Bundle ===" | tee "$BUNDLE_DIR/summary.txt"
echo "Generated: $(date -u +%Y-%m-%dT%H:%M:%SZ)" | tee -a "$BUNDLE_DIR/summary.txt"
echo "" >> "$BUNDLE_DIR/summary.txt"

# --- Environment ---
echo "--- Environment ---" >> "$BUNDLE_DIR/summary.txt"
echo "Node.js: $(node --version 2>/dev/null || echo 'not found')" >> "$BUNDLE_DIR/summary.txt"
echo "npm: $(npm --version 2>/dev/null || echo 'not found')" >> "$BUNDLE_DIR/summary.txt"
echo "OS: $(uname -s) $(uname -r)" >> "$BUNDLE_DIR/summary.txt"
echo "WEBFLOW_API_TOKEN: ${WEBFLOW_API_TOKEN:+[SET]}${WEBFLOW_API_TOKEN:-[NOT SET]}" >> "$BUNDLE_DIR/summary.txt"
echo "WEBFLOW_SITE_ID: ${WEBFLOW_SITE_ID:+[SET]}${WEBFLOW_SITE_ID:-[NOT SET]}" >> "$BUNDLE_DIR/summary.txt"

# --- SDK Version ---
echo "" >> "$BUNDLE_DIR/summary.txt"
echo "--- SDK Version ---" >> "$BUNDLE_DIR/summary.txt"
npm list webflow-api 2>/dev/null >> "$BUNDLE_DIR/summary.txt" || echo "webflow-api: not installed" >> "$BUNDLE_DIR/summary.txt"
echo "Latest available: $(npm view webflow-api version 2>/dev/null || echo 'unknown')" >> "$BUNDLE_DIR/summary.txt"

# --- API Connectivity ---
echo "" >> "$BUNDLE_DIR/summary.txt"
echo "--- API Connectivity ---" >> "$BUNDLE_DIR/summary.txt"

if [ -n "${WEBFLOW_API_TOKEN:-}" ]; then
  # Token validation (list sites)
  HTTP_CODE=$(curl -s -o "$BUNDLE_DIR/sites-response.json" -w "%{http_code}" \
    -H "Authorization: Bearer $WEBFLOW_API_TOKEN" \
    https://api.webflow.com/v2/sites 2>/dev/null)
  echo "Sites endpoint: HTTP $HTTP_CODE" >> "$BUNDLE_DIR/summary.txt"

  if [ "$HTTP_CODE" = "200" ]; then
    SITE_COUNT=$(cat "$BUNDLE_DIR/sites-response.json" | python3 -c "import sys,json; print(len(json.load(sys.stdin).get('sites',[])))" 2>/dev/null || echo "parse error")
    echo "Accessible sites: $SITE_COUNT" >> "$BUNDLE_DIR/summary.txt"
  fi

  # Rate limit headers
  echo "" >> "$BUNDLE_DIR/summary.txt"
  echo "--- Rate Limit Status ---" >> "$BUNDLE_DIR/summary.txt"
  curl -s -I -H "Authorization: Bearer $WEBFLOW_API_TOKEN" \
    https://api.webflow.com/v2/sites 2>/dev/null | \
    grep -i "x-ratelimit\|retry-after\|content-type" >> "$BUNDLE_DIR/summary.txt" || echo "Could not read headers" >> "$BUNDLE_DIR/summary.txt"
else
  echo "Skipped (no WEBFLOW_API_TOKEN set)" >> "$BUNDLE_DIR/summary.txt"
fi

# --- Webflow Platform Status ---
echo "" >> "$BUNDLE_DIR/summary.txt"
echo "--- Webflow Platform Status ---" >> "$BUNDLE_DIR/summary.txt"
curl -s https://status.webflow.com/api/v2/status.json 2>/dev/null | \
  python3 -c "import sys,json; d=json.load(sys.stdin); print(f\"Status: {d['status']['description']}\")" 2>/dev/null \
  >> "$BUNDLE_DIR/summary.txt" || echo "Could not reach status page" >> "$BUNDLE_DIR/summary.txt"

# --- Configuration (redacted) ---
echo "" >> "$BUNDLE_DIR/summary.txt"
echo "--- Config (redacted) ---" >> "$BUNDLE_DIR/summary.txt"
for envfile in .env .env.local .env.production; do
  if [ -f "$envfile" ]; then
    echo "[$envfile]" >> "$BUNDLE_DIR/config-redacted.txt"
    sed 's/=.*/=***REDACTED***/' "$envfile" >> "$BUNDLE_DIR/config-redacted.txt"
    echo "" >> "$BUNDLE_DIR/config-redacted.txt"
  fi
done
[ -f "$BUNDLE_DIR/config-redacted.txt" ] && echo "See config-redacted.txt" >> "$BUNDLE_DIR/summary.txt" || echo "No .env files found" >> "$BUNDLE_DIR/summary.txt"

# --- Recent Error Logs ---
echo "" >> "$BUNDLE_DIR/summary.txt"
echo "--- Recent Errors ---" >> "$BUNDLE_DIR/summary.txt"
if [ -d "logs" ]; then
  grep -ri "webflow\|429\|401\|403\|500" logs/ 2>/dev/null | tail -50 >> "$BUNDLE_DIR/errors.txt" || true
  echo "See errors.txt" >> "$BUNDLE_DIR/summary.txt"
else
  echo "No logs/ directory found" >> "$BUNDLE_DIR/summary.txt"
fi

# --- Package Bundle ---
tar -czf "$BUNDLE_DIR.tar.gz" "$BUNDLE_DIR"
rm -rf "$BUNDLE_DIR"

echo ""
echo "Bundle created: $BUNDLE_DIR.tar.gz"
echo "Review for sensitive data before sharing."
```

### Step 2: TypeScript Diagnostic Script

For deeper programmatic diagnostics:

```typescript
// webflow-diagnostics.ts
import { WebflowClient } from "webflow-api";

interface DiagnosticReport {
  timestamp: string;
  sdk: { version: string; installed: boolean };
  auth: { valid: boolean; error?: string };
  sites: Array<{ id: string; name: string; lastPublished: string | null }>;
  collections: Array<{ siteId: string; id: string; name: string; itemCount: number }>;
  rateLimits: { note: string };
  platformStatus: string;
}

async function runDiagnostics(): Promise<DiagnosticReport> {
  const report: DiagnosticReport = {
    timestamp: new Date().toISOString(),
    sdk: { version: "unknown", installed: false },
    auth: { valid: false },
    sites: [],
    collections: [],
    rateLimits: { note: "Check response headers for X-RateLimit-Remaining" },
    platformStatus: "unknown",
  };

  // 1. SDK Version
  try {
    const pkg = await import("webflow-api/package.json", { assert: { type: "json" } });
    report.sdk = { version: pkg.default.version, installed: true };
  } catch {
    report.sdk = { version: "unknown", installed: true };
  }

  // 2. Auth Check
  const webflow = new WebflowClient({
    accessToken: process.env.WEBFLOW_API_TOKEN!,
  });

  try {
    const { sites } = await webflow.sites.list();
    report.auth = { valid: true };
    report.sites = (sites || []).map(s => ({
      id: s.id!,
      name: s.displayName!,
      lastPublished: s.lastPublished || null,
    }));

    // 3. Collections for each site
    for (const site of sites || []) {
      const { collections } = await webflow.collections.list(site.id!);
      for (const col of collections || []) {
        report.collections.push({
          siteId: site.id!,
          id: col.id!,
          name: col.displayName!,
          itemCount: col.itemCount || 0,
        });
      }
    }
  } catch (err: any) {
    report.auth = { valid: false, error: `${err.statusCode}: ${err.message}` };
  }

  // 4. Platform Status
  try {
    const res = await fetch("https://status.webflow.com/api/v2/status.json");
    const data = await res.json();
    report.platformStatus = data.status?.description || "unknown";
  } catch {
    report.platformStatus = "unreachable";
  }

  return report;
}

runDiagnostics().then(report => {
  console.log(JSON.stringify(report, null, 2));
}).catch(console.error);
```

### Step 3: Run Diagnostics

```bash
# Bash bundle
chmod +x webflow-debug-bundle.sh
./webflow-debug-bundle.sh

# TypeScript diagnostics
npx tsx webflow-diagnostics.ts
```

## Sensitive Data Handling

**ALWAYS REDACT before sharing:**
- API tokens and OAuth secrets
- Customer emails and PII from form submissions
- Webhook secrets

**Safe to include:**
- HTTP status codes and error messages
- SDK/Node.js versions
- Site IDs and collection IDs (not sensitive)
- Rate limit headers
- Platform status

## Output

- `webflow-debug-YYYYMMDD-HHMMSS.tar.gz` archive containing:
  - `summary.txt` — Environment, SDK version, connectivity, rate limits
  - `sites-response.json` — API response (if token valid)
  - `config-redacted.txt` — Environment files with values masked
  - `errors.txt` — Recent error logs

## Error Handling

| Issue | Cause | Solution |
|-------|-------|----------|
| `curl: command not found` | curl not installed | `apt install curl` or use TypeScript diagnostics |
| Sites endpoint 401 | Token expired | Generate new token |
| Status page unreachable | Network issue | Check DNS/firewall |
| Empty error logs | No logs/ directory | Check app logging configuration |

## Resources

- [Webflow Status Page](https://status.webflow.com)
- [Webflow Support](https://support.webflow.com)
- [API Reference](https://developers.webflow.com/data/reference/rest-introduction)

## Next Steps

For rate limit issues, see `webflow-rate-limits`.

Related Skills

workhuman-debug-bundle

1868
from jeremylongshore/claude-code-plugins-plus-skills

Workhuman debug bundle for employee recognition and rewards API. Use when integrating Workhuman Social Recognition, or building recognition workflows with HRIS systems. Trigger: "workhuman debug bundle".

wispr-debug-bundle

1868
from jeremylongshore/claude-code-plugins-plus-skills

Wispr Flow debug bundle for voice-to-text API integration. Use when integrating Wispr Flow dictation, WebSocket streaming, or building voice-powered applications. Trigger: "wispr debug bundle".

webflow-webhooks-events

1868
from jeremylongshore/claude-code-plugins-plus-skills

Implement Webflow webhook registration, signature verification, and event handling for form_submission, site_publish, ecomm_new_order, page_created, and more. Use when setting up webhook endpoints, implementing event-driven workflows, or handling Webflow notifications. Trigger with phrases like "webflow webhook", "webflow events", "webflow webhook signature", "handle webflow events", "webflow notifications".

webflow-upgrade-migration

1868
from jeremylongshore/claude-code-plugins-plus-skills

Analyze, plan, and execute Webflow SDK upgrades (webflow-api v1 to v3) with breaking change detection, API v1-to-v2 migration, and deprecation handling. Trigger with phrases like "upgrade webflow", "webflow migration", "webflow breaking changes", "update webflow SDK", "webflow v1 to v2".

webflow-security-basics

1868
from jeremylongshore/claude-code-plugins-plus-skills

Apply Webflow API security best practices — token management, scope least privilege, OAuth 2.0 secret rotation, webhook signature verification, and audit logging. Use when securing API tokens, implementing least privilege access, or auditing Webflow security configuration. Trigger with phrases like "webflow security", "webflow secrets", "secure webflow", "webflow API key security", "webflow token rotation".

webflow-sdk-patterns

1868
from jeremylongshore/claude-code-plugins-plus-skills

Apply production-ready Webflow SDK patterns — singleton client, typed error handling, pagination helpers, and raw response access for the webflow-api package. Use when implementing Webflow integrations, refactoring SDK usage, or establishing team coding standards. Trigger with phrases like "webflow SDK patterns", "webflow best practices", "webflow code patterns", "idiomatic webflow", "webflow typescript".

webflow-reference-architecture

1868
from jeremylongshore/claude-code-plugins-plus-skills

Implement Webflow reference architecture — layered project structure, client wrapper, CMS sync service, webhook handlers, and caching layer for production integrations. Trigger with phrases like "webflow architecture", "webflow project structure", "how to organize webflow", "webflow integration design", "webflow best practices".

webflow-rate-limits

1868
from jeremylongshore/claude-code-plugins-plus-skills

Handle Webflow Data API v2 rate limits — per-key limits, Retry-After headers, exponential backoff, request queuing, and bulk endpoint optimization. Use when hitting 429 errors, implementing retry logic, or optimizing API request throughput. Trigger with phrases like "webflow rate limit", "webflow throttling", "webflow 429", "webflow retry", "webflow backoff", "webflow too many requests".

webflow-prod-checklist

1868
from jeremylongshore/claude-code-plugins-plus-skills

Execute Webflow production deployment checklist — token security, rate limit hardening, health checks, circuit breakers, gradual rollout, and rollback procedures. Use when deploying Webflow integrations to production or preparing for launch. Trigger with phrases like "webflow production", "deploy webflow", "webflow go-live", "webflow launch checklist", "webflow production ready".

webflow-performance-tuning

1868
from jeremylongshore/claude-code-plugins-plus-skills

Optimize Webflow API performance with response caching, bulk endpoint batching, CDN-cached live item reads, pagination optimization, and connection pooling. Use when experiencing slow API responses or optimizing request throughput. Trigger with phrases like "webflow performance", "optimize webflow", "webflow latency", "webflow caching", "webflow slow", "webflow batch".

webflow-observability

1868
from jeremylongshore/claude-code-plugins-plus-skills

Set up observability for Webflow integrations — Prometheus metrics for API calls, OpenTelemetry tracing, structured logging with pino, Grafana dashboards, and alerting for rate limits, errors, and latency. Trigger with phrases like "webflow monitoring", "webflow metrics", "webflow observability", "monitor webflow", "webflow alerts", "webflow tracing".

webflow-multi-env-setup

1868
from jeremylongshore/claude-code-plugins-plus-skills

Configure Webflow across development, staging, and production environments with per-environment API tokens, site IDs, and secret management via Vault/AWS/GCP. Trigger with phrases like "webflow environments", "webflow staging", "webflow dev prod", "webflow environment setup", "webflow config by env".