К основному содержанию
скилл CX Codex

webflow-cli:troubleshooter — скилл для Claude Code: чинит сбои

Разбирает ошибки Webflow CLI: установку, авторизацию, сборку и бандл. Пригодится, когда команда падает, а причина непонятна.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add webflow/webflow-skills --skill webflow-cli:troubleshooter -a claude-code
npx skills add webflow/webflow-skills --skill webflow-cli-troubleshooter -a claude-code
Открыть на GitHub

Что делает webflow-cli:troubleshooter

Скилл ведёт агента по трём фазам: сначала вы описываете, какая команда упала и что она вывела, потом агент гоняет диагностику, затем предлагает и применяет починку. Диагностика идёт через Bash: webflow --version для проверки установки, webflow auth login при проблемах с авторизацией, --verbose для подробного вывода и --debug-bundler для конфигурации сборщика. Синтаксис команды проверяется через webflow <command> --help.

Перед установкой пакетов скилл ищет lock-файл: package-lock.json для npm, pnpm-lock.yaml для pnpm, yarn.lock для yarn. Если ни одного нет, он спросит, какой менеджер использовать, и дальше будет ставить и собирать только через него. Это заметно, когда в проекте несколько менеджеров и команды конфликтуют между собой.

Внутри есть готовые разборы частых случаев: CLI не найден, старая версия, неизвестная команда, провалилась авторизация, ошибка импорта при сборке, отсутствующая зависимость вроде styled-components, битый node_modules. Для каждого — диагностическая команда, исправление и повторный прогон для проверки. Работает в Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode.

Какие задачи решает

  • понять, почему webflow: command not found
  • обновить старую версию CLI
  • разобрать ошибку импорта при сборке библиотеки
  • увидеть итоговую конфигурацию сборщика
  • починить битый node_modules

Примеры запросов агенту

  • Сборка падает, помоги разобраться: запусти webflow library bundle --verbose и объясни ошибку
  • Бандл сыпет ошибками webpack — прогони webflow library bundle --debug-bundler и покажи конфиг
  • Пишет «Not authenticated» — проведи меня через webflow auth login

Как установить webflow-cli:troubleshooter

1Через Skills CLI (Vercel)

npx skills add webflow/webflow-skills --skill webflow-cli:troubleshooter -a claude-code
npx skills add webflow/webflow-skills --skill webflow-cli-troubleshooter -a claude-code

2Вручную: положить файлы

~/.claude/skills/webflow-cli-troubleshooter/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/webflow-cli-troubleshooter/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о webflow-cli:troubleshooter

Как установить webflow-cli:troubleshooter в Claude?

Выполните npx skills add webflow/webflow-skills --skill webflow-cli:troubleshooter -a claude-code. Файл скилла окажется в ~/.claude/skills/webflow-cli-troubleshooter/SKILL.md.

Что делает webflow-cli:troubleshooter?

Проводит диагностику сбоев Webflow CLI и предлагает исправление. Проверяет версию, авторизацию, синтаксис команды, а для сборки включает --verbose и --debug-bundler.

Нужен ли Webflow MCP для этого скилла?

Нет. Скилл прямо просит не использовать MCP-инструменты Webflow в CLI-сценариях: все диагностические команды идут через Bash, а конфиги читаются обычным чтением файлов.

Исходный текст

SKILL.md · MIT
---
name: webflow-cli:troubleshooter
description: 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 CLI Troubleshooter

Diagnose and resolve Webflow CLI issues with diagnostic commands and automated fixes.

## Important Note

**ALWAYS use Bash tool for all diagnostic operations:**
- Execute diagnostic commands via Bash tool
- Use Read tool to examine configuration files
- Verify CLI installation: `webflow --version`
- Check authentication: `webflow auth login` (if needed)
- Use CLI diagnostic flags: `--verbose`, `--debug-bundler`, `--help`
- DO NOT use Webflow MCP tools for CLI workflows
- All CLI commands require proper descriptions (not context parameters)

**Package Manager Detection:**
- Check for lock files: `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn)
- If no lock file found, ask user which package manager to use (npm/pnpm/yarn)
- Use detected package manager for all install/build commands

## Instructions

### Phase 1: Issue Identification
1. **Ask user to describe issue**: What command failed or what error occurred
2. **Determine error category**:
   - CLI not installed or wrong version
   - Authentication failed
   - Build/bundle failed
   - Command not recognized
3. **Capture error message**: Get exact error output

### Phase 2: Run Diagnostics
4. **Check CLI installation**: Run `webflow --version`
5. **Check authentication**: Run `webflow auth login` if needed
6. **Run command with --verbose**: Execute failed command with `--verbose` flag for detailed output
7. **Use --debug-bundler** (if bundle issue): Run with `--debug-bundler` flag to see bundler config
8. **Check --help**: Run `webflow <command> --help` to verify command syntax

### Phase 3: Analyze & Fix
9. **Identify root cause**: Parse error messages and diagnostic output
10. **Present fix**: Show specific solution based on CLI error
11. **Apply fix**: Execute fix commands
12. **Verify**: Re-run original command to confirm resolution

## Examples

### Example 1: CLI Not Installed

**User prompt:**
```
Getting "webflow: command not found"
```

**Diagnostics:**
```
🔍 Checking CLI Installation

Executing: webflow --version

Error: bash: webflow: command not found

❌ Webflow CLI not installed
```

**Fix:**
```
📋 Fix: Install Webflow CLI

Executing: npm install -g @webflow/cli

✓ CLI installed

Verifying...
Executing: webflow --version

Output: @webflow/cli/1.5.2

✅ Issue resolved
```

### Example 2: Build Failed

**User prompt:**
```
Build is failing but I don't know why
```

**Diagnostics:**
```
🔍 Running Build with Diagnostics

Executing: webflow library bundle --verbose

Output:
[verbose] Loading webflow.json
[verbose] Found library config
[verbose] Building components from ./src/**/*.webflow.tsx
[verbose] Running bundler
Error: Failed to resolve import './missing-file.ts'

❌ Build failed: Missing import file
```

**Fix:**
```
📋 Fix: Missing Import

Issue: Component imports './missing-file.ts' which doesn't exist

Solutions:
1. Create the missing file
2. Fix the import path
3. Remove the import if not needed

Check your component imports and ensure all files exist.
```

### Example 3: Bundle Configuration Issue

**User prompt:**
```
Bundle is failing with webpack errors
```

**Diagnostics:**
```
🔍 Checking Bundle Configuration

Executing: webflow library bundle --debug-bundler

Output:
[debug-bundler] Final bundler configuration:
{
  "entry": "./src/Component.tsx",
  "output": {
    "path": "/dist",
    "filename": "bundle.js"
  },
  "resolve": {
    "extensions": [".ts", ".tsx", ".js"]
  }
}

Error: Module not found: Can't resolve 'styled-components'

❌ Bundle failed: Missing dependency
```

**Fix:**
```
📋 Fix: Install Missing Dependency

Executing: npm install styled-components

✓ Dependency installed

Retrying bundle...
Executing: webflow library bundle

✓ Bundle created successfully

✅ Issue resolved
```

## Guidelines

### CLI Diagnostic Commands

**Version Check:**
```bash
webflow --version
# or
webflow -V
```

**Command Help:**
```bash
webflow --help                    # General help
webflow library --help            # Library commands help
webflow library bundle --help     # Specific command help
```

**Verbose Output:**
```bash
# Add --verbose to any command for detailed debugging
webflow library bundle --verbose
webflow cloud deploy --verbose
webflow extension bundle --verbose
```

**Debug Bundler:**
```bash
# Show final bundler configuration
webflow library bundle --debug-bundler
webflow extension bundle --debug-bundler
```

### Common Issues & Fixes

**Issue: CLI Not Found**
- **Diagnostic:** `webflow --version` fails
- **Fix:** `npm install -g @webflow/cli`
- **Verify:** `webflow --version` shows version

**Issue: Wrong CLI Version**
- **Diagnostic:** `webflow --version` shows old version
- **Fix:** `npm update -g @webflow/cli`
- **Verify:** Latest version installed

**Issue: Command Not Recognized**
- **Diagnostic:** "Unknown command" error
- **Fix:** Check command with `webflow --help`
- **Verify:** Use correct command syntax

**Issue: Authentication Failed**
- **Diagnostic:** "Not authenticated" error
- **Fix:** `webflow auth login`
- **Verify:** Authentication succeeds

**Issue: Build Failed**
- **Diagnostic:** Run with `--verbose` flag
- **Fix:** Fix errors shown in verbose output
- **Verify:** Build succeeds

**Issue: Bundle Configuration Error**
- **Diagnostic:** Run with `--debug-bundler` flag
- **Fix:** Adjust bundler config in webflow.json
- **Verify:** Bundle succeeds

**Issue: Missing Dependencies**
- **Diagnostic:** "Module not found" errors
- **Fix:** `npm install` or install specific package
- **Verify:** Build/bundle succeeds

**Issue: Corrupted node_modules**
- **Diagnostic:** Unexplained build failures
- **Fix:** `rm -rf node_modules && npm install`
- **Verify:** Build succeeds

### Error Handling

**CLI Not Installed:**
```
❌ Webflow CLI Not Found

Install:
npm install -g @webflow/cli

Verify:
webflow --version

Docs: https://developers.webflow.com/cli
```

**Authentication Required:**
```
❌ Authentication Failed

Fix:
webflow auth login

Follow browser prompts to authenticate
```

**Build/Bundle Failed:**
```
❌ Build Failed

Run with diagnostics:
webflow library bundle --verbose --debug-bundler

This shows:
- Detailed build steps
- Import resolution
- Bundler configuration
- Exact error location

Fix the errors shown in output
```

**Unknown Error:**
```
❌ Unknown Issue

Gather info:
1. What command are you running?
2. Run command with --verbose flag
3. Check command syntax with --help
4. Share full error output

This helps identify the specific problem
```

### File Operations

**Reading Config Files:**
```
# View webflow.json
Read: webflow.json

# View package.json
Read: package.json

# View build output
Read: dist/
```

**Discovering Files:**
```
# Find config files
Glob: **/webflow.json

# Find components
Glob: src/**/*.webflow.tsx

# Find logs
Glob: **/*.log
```

### Best Practices

**Always Start With:**
1. Check CLI version: `webflow --version`
2. Check command syntax: `webflow <command> --help`
3. Run with verbose: Add `--verbose` flag

**For Build/Bundle Issues:**
1. Use `--verbose` for detailed output
2. Use `--debug-bundler` to see config
3. Check import paths
4. Verify dependencies installed

**For Authentication Issues:**
1. Run `webflow auth login`
2. Follow browser prompts
3. Verify workspace access

**For Installation Issues:**
1. Check Node.js version: `node --version`
2. Install CLI globally: `npm install -g @webflow/cli`
3. Verify installation: `webflow --version`

## Quick Reference

**Workflow:** identify → diagnose → fix → verify

**Diagnostic Flags:**
- `--version` / `-V` - Check CLI version
- `--help` / `-h` - Show command help
- `--verbose` - Detailed debugging output
- `--debug-bundler` - Show bundler config

**Common Fixes:**
- Not installed → `npm install -g @webflow/cli`
- Wrong version → `npm update -g @webflow/cli`
- Auth failed → `webflow auth login`
- Build failed → Check `--verbose` output
- Bundle error → Check `--debug-bundler` output
- Missing deps → `npm install`

**Documentation:** https://developers.webflow.com/cli

© webflow · MIT · webflow/webflow-skills

Похожие скиллы

Все скиллы по теме «Настройка агента: память, контекст, субагенты» →
devops-troubleshooter davila7 Субагент исследует логи, сбои развёртывания и проблемы мониторинга. Подключайте его, когда нужно найти причину инцидента и подготовить исправление. 2 328установок base44-troubleshooter base44 Скилл разбирает сбои в приложениях Base44 по логам бэкенд-функций и истории запусков workflow. Пригодится, когда автоматизация перестала срабатывать. CX Codex +1 9 900установок ctx-upgrade mksglu Скилл автоматически обновляет context-mode с GitHub, пересобирает плагин, переустанавливает глобально и настраивает хуки. Запускается одной командой. CX Codex +1 1 600установок cyrus-setup-prerequisites cyrusagents Проверяет Node.js, jq и gh CLI, ставит пакет cyrus-ai и готовит каталог ~/.cyrus перед настройкой Cyrus. CX Codex +1 1 000установок scaffold-cli mblode Разворачивает новый TypeScript CLI и npm-пакет по готовым шаблонам: конфиги, исходники, CI и публикация. Пригодится, когда начинаешь инструмент с нуля. CX Codex +1 690установок rspack-v2-upgrade rstackjs Ведёт проект с Rspack 1.x через переход на вторую версию: зависимости, конфиг, проверка сборки. Пригодится, когда мажорный апгрейд страшно начинать вручную. CX Codex +1 515установок

Из того же набора21

webflow-code-component:component-audit Проверяет код-компоненты Webflow на архитектурные решения: что вынесено в props, как устроено состояние, где нужны слоты и Shadow DOM. CX Codex +1 1 000установок webflow-cli:designer-extension Скилл ведёт агента по всему циклу работы с Designer Extensions в Webflow: выбор шаблона, инициализация проекта, локальный сервер и сборка бандла. CX Codex +1 1 000установок webflow-cli:code-component Скилл настраивает React-проект, проверяет сборку компонентов и публикует их в Webflow Designer через Webflow CLI. Пригодится фронтендерам, создающим библиотеки для дизайнеров. CX Codex +1 1 000установок webflow-cli:cloud Скилл ведёт агента через создание, сборку и деплой приложений Webflow Cloud из командной строки, включая переменные окружения и логи сборки. CX Codex +1 1 000установок webflow-code-component:component-scaffold Генерирует структуру кодового компонента Webflow с файлом React и схемой props. Помогает быстро начать разработку без ручной настройки манифеста. CX Codex +1 997установок webflow-cli:devlink Выгружает компоненты Webflow Designer в код React и Next.js, синхронизирует правки дизайна и показывает, что изменилось после каждого sync. CX Codex +1 998установок webflow-code-component:convert-component Превращает готовый React-компонент в Webflow Code Component: разбирает пропсы, строит файл .webflow.tsx и показывает, что придётся переписать. CX Codex +1 995установок webflow-code-component:pre-deploy-check Проверяет компоненты Webflow Code Components перед публикацией: размер бандла, зависимости, пропсы, SSR и стили. Пригодится, когда до webflow library share остался один шаг. CX Codex +1 988установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой