webflow-code-component:troubleshoot-deploy
Debug deployment failures for Webflow Code Components. Analyzes error messages, identifies root causes, and provides specific fixes for common issues.
- Installs
- 980
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/webflow/webflow-skills --skill webflow-code-component:troubleshoot-deploy- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads webflow-code-component:troubleshoot-deploy automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Troubleshoot Deploy
Debug and fix deployment issues for Webflow Code Components.
When to Use This Skill
Use when:
webflow library sharefailed with an error- Components deployed but aren't working correctly
- User shares an error message from deployment
- Bundle or compilation errors occurred
Do NOT use when:
- Deployment hasn't been attempted yet (use deploy-guide instead)
- Validating before deployment (use pre-deploy-check instead)
- General code quality issues (use component-audit instead)
Instructions
Phase 1: Gather Information
-
Get error details:
- Ask for exact error message
- Request output from
npx webflow library share - Check if
npx webflow library loghas additional info
-
Understand context:
- First deploy or update?
- Recent changes made?
- Working previously?
Phase 2: Diagnose
-
Identify error category:
- Authentication errors
- Build/compilation errors
- Bundle size errors
- Network/upload errors
- Configuration errors
-
Analyze root cause:
- Parse error message
- Check common causes
- Identify specific issue
Phase 3: Provide Solution
-
Give specific fix:
- Step-by-step resolution
- Code examples if needed
- Verification steps
-
Prevent recurrence:
- Explain why it happened
- Suggest preventive measures
Common Error Reference
For detailed solutions to each error, see references/ERROR_CATALOG.md.
Quick Reference
| Error | Category | Quick Fix |
|---|---|---|
| "Authentication failed" | Auth | Regenerate API token in Workspace Settings |
| "Insufficient permissions" | Auth | Check workspace role and token |
| "Module not found" | Build | npm install --save-dev @webflow/react |
| "TypeScript errors" | Build | Run npx tsc --noEmit to find error |
| "Unexpected token" | Build | Check file extension is .tsx |
| "Bundle size exceeds limit" | Bundle | Tree-shake imports, lazy load heavy components |
| "Component not rendering" | Runtime | Check SSR issues, browser console |
| "Styles not appearing" | Runtime | Import CSS in .webflow.tsx file |
| "webflow.json not found" | Config | Create webflow.json in project root |
| "No components found" | Config | Check glob pattern and file extension |
| "Invalid JSON in webflow.json" | Config | Fix JSON syntax (trailing commas, comments) |
| "429 Too Many Requests" | Network | Wait 60 seconds and retry |
| "Request timed out" | Network | Check connectivity, proxy, Webflow status |
| "JavaScript heap out of memory" | Memory | NODE_OPTIONS="--max-old-space-size=4096" |
| "Circular dependency" | Build | Extract shared code, break import cycles |
Most Common Fixes
Authentication:
# Regenerate token, then:
export WEBFLOW_WORKSPACE_API_TOKEN=your-new-token
npx webflow library share
Missing Dependencies:
npm install --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react
SSR Issues:
// Wrap browser APIs in useEffect or disable SSR:
declareComponent(Component, { options: { ssr: false } });
Missing Styles:
// In .webflow.tsx, import styles:
import "./Component.module.css";
Debugging Commands
# Check recent deploy logs
npx webflow library log
# Verbose deploy output (shows detailed errors)
npx webflow library share --verbose
# Type check without deploying
npx tsc --noEmit
Validation
The issue is resolved when all of the following are true:
| Success Criteria | How to Verify |
|---|---|
| Deploy completes without errors | npx webflow library share exits cleanly |
| Components appear in Designer | Open Add panel in Designer and find your library |
| Import logs confirm success | npx webflow library log shows successful import |
Guidelines
Error Analysis Process
- Read the full error message - Often contains the solution
- Check the error category - Auth, build, bundle, or runtime
- Look for file paths - Points to exact location
- Check line numbers - For code errors
- Search error message - May be a known issue
When to Escalate
If none of the solutions work, gather this data before escalating:
- Deploy logs:
npx webflow library log - Verbose output:
npx webflow library share --verbose - Node.js version:
node -v - Package versions:
npm list @webflow/webflow-cli @webflow/data-types @webflow/react - Configuration: Contents of
webflow.json - Error message: Full error output (not just the summary line)
Then:
- Check Webflow status page for outages
- Search the Webflow Community Forum for your error message
- Contact Webflow Support with the collected data above
FAQ
What does the webflow-code-component:troubleshoot-deploy skill do?
Debug deployment failures for Webflow Code Components. Analyzes error messages, identifies root causes, and provides specific fixes for common issues.
How do I install webflow-code-component:troubleshoot-deploy?
Run npx skills add https://github.com/webflow/webflow-skills --skill webflow-code-component:troubleshoot-deploy in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/webflow-code-component:troubleshoot-deploy/ (personal) or .claude/skills/webflow-code-component:troubleshoot-deploy/ (project).
Which AI agents can use webflow-code-component:troubleshoot-deploy?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is webflow-code-component:troubleshoot-deploy safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains webflow-code-component:troubleshoot-deploy?
It is published by webflow in webflow/webflow-skills. It has 980 recorded installs.
More from webflow/webflow-skills
webflow-cli:cloud
webflow/webflow-skills
Create, build, and deploy Webflow Cloud apps from the CLI (site-attached or project apps), and manage existing ones — apps, domains, environments, deployments, build/runtime logs, and environment variables including secrets. Use when initializing or deploying a Cloud app, importing an existing GitHub repository, setting up CI/CD (GitHub Actions or GitHub-linked deploys), setting or importing secrets, retrying or rolling back a deployment, diagnosing a failed build, or resolving app/environment/workspace IDs from webflow.json or env vars.
webflow-cli:code-component
webflow/webflow-skills
Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and bundle code, validate output, and deploy to workspace using library share. Use when building custom components for designers.
webflow-cli:designer-extension
webflow/webflow-skills
Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default/react/typescript-alt), bundles extensions for upload, and serves locally for development.
webflow-code-component:component-audit
webflow/webflow-skills
Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React best practices.
webflow-cli:troubleshooter
webflow/webflow-skills
Diagnose and fix Webflow CLI issues including installation problems, authentication failures, build errors, and bundle problems. Uses CLI diagnostic flags (--version, --help, --verbose, --debug-bundler) for troubleshooting.
webflow-code-component:component-scaffold
webflow/webflow-skills
Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config/dependencies.
Popular devops & cloud skills
microsoft-foundry
microsoft/azure-skills
Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and resources end to end. USE FOR: foundry, azd ai agent, azd provision/deploy, hosted agent scaffold/develop/run/deploy/troubleshoot, prompt agent create, managed harness agent create, GitHub Copilot harness agent, create agent, update agent, add tool to agent, invoke agent, agent insights, evaluate agent, batch eval, continuous eval, continuous monitoring, agent CI/CD, optimize prompt, improve prompt, optimize agent instructions, Agent Optimizer scaffold, dataset curation from traces, deploy model, model fine-tuning (SFT/DPO/RFT), Foundry project, RBAC, role assignment, permissions, quota, capacity, region, deployment failure, AI Services, create Foundry resource, knowledge index, customize deployment, onboard, availability, training-data, grader, distillation, large file upload. DO NOT USE FOR: Azure Functions, App Service, general Azure deploy (use azure-deploy), general Azure prep (use azure
azure-diagnostics
microsoft/azure-skills
Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deployment failure, troubleshoot container apps, container app 503 or target port mismatch, troubleshoot functions, function telemetry missing or stopped after a config/connection-string change, troubleshoot AKS, VM RDP, Linux SSH, VM black screen, can't connect to VM, reset VM password, NSG or firewall blocking, kubectl cannot connect, kube-system/CoreDNS failures, pod pending, crashloop, node not ready, upgrade failures, analyze logs, KQL, insights, image pull failures, cold start issues, health probe failures, resource health, root cause of errors, troubleshoot event hubs, troubleshoot service bus, messaging SDK error, AMQP connection failure, message lock lost, lock renewal during long-running processing, service bus dead letter.
azure-prepare
microsoft/azure-skills
Prepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Terraform), and Dockerfiles for the Azure Developer CLI (azd) workflow. USE ONLY when the user explicitly wants to use azd as the deployment tool, or the project already has an azure.yaml file. DO NOT USE FOR: non-azd deployments, Python App Service code-only deploys (use python-appservice-deploy), or cross-cloud migration (use azure-cloud-migrate). WHEN: prepare app for azd, create azure.yaml, set up azd infrastructure, modernize app for Azure with azd, deploy with azd, function app, timer trigger, service bus trigger, event-driven function, managed identity, generate Bicep, generate Terraform, create and deploy to Azure.
azure-ai
microsoft/azure-skills
Use for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybrid search, speech-to-text, text-to-speech, transcription, OCR. WHEN: AI Search, query search, vector search, hybrid search, semantic search, speech-to-text, text-to-speech, transcribe, OCR, convert text to speech.
azure-deploy
microsoft/azure-skills
Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application — use azure-prepare instead. This skill runs azd up, azd deploy, terraform apply, and az deployment commands with built-in error recovery. Requires .azure/deployment-plan.md from azure-prepare and validated status from azure-validate. WHEN: "run azd up", "run azd deploy", "execute deployment", "push to production", "push to cloud", "go live", "ship it", "bicep deploy", "terraform apply", "publish to Azure", "launch on Azure". DO NOT USE WHEN: "create and deploy", "build and deploy", "create a new app", "set up infrastructure", "create and deploy to Azure using Terraform" — use azure-prepare for these.
azure-validate
microsoft/azure-skills
Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity permissions, and prerequisites before deploying. WHEN: validate my app, check deployment readiness, run preflight checks, verify configuration, check if ready to deploy, validate azure.yaml, validate Bicep, test before deploying, troubleshoot deployment errors, validate Azure Functions, validate function app, validate serverless deployment, verify RBAC roles, check role assignments, review managed identity permissions, what-if analysis, validate Container Apps deployment.