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".
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
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/webflow-debug-bundle/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How webflow-debug-bundle Compares
| Feature / Agent | webflow-debug-bundle | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/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
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Cursor vs Codex for AI Workflows
Compare Cursor and Codex for AI coding workflows, repository assistance, debugging, refactoring, and reusable developer skills.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
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
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
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
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
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
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
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
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
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
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
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
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
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".