From webflow-code-component-skills
Debugs Webflow Code Component deployment failures. Analyzes errors from `webflow library share`, diagnoses auth, build, bundle, network, config issues, and provides specific fixes.
npx claudepluginhub webflow/webflow-skills --plugin webflow-code-component-skillsThis skill uses the workspace's default tool permissions.
Debug and fix deployment issues for Webflow Code Components.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Debug and fix deployment issues for Webflow Code Components.
Use when:
webflow library share failed with an errorDo NOT use when:
Get error details:
npx webflow library sharenpx webflow library log has additional infoUnderstand context:
Identify error category:
Analyze root cause:
Give specific fix:
Prevent recurrence:
For detailed solutions to each error, see references/ERROR_CATALOG.md.
| 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 |
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";
# 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
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 |
If none of the solutions work, gather this data before escalating:
npx webflow library lognpx webflow library share --verbosenode -vnpm list @webflow/webflow-cli @webflow/data-types @webflow/reactwebflow.jsonThen: