webflow-cli:code-component

What this skill does

# Code Component

Create, build, and deploy React components to Webflow Designer with comprehensive validation and deployment verification.

## Important Note

**ALWAYS use Bash tool for all Webflow CLI operations:**
- Execute `webflow` CLI commands via Bash tool
- Use Read tool to examine generated files (never modify)
- Use Glob tool to discover project files
- Verify CLI installation: `webflow --version`
- Check authentication: On first `webflow library share`, workspace authentication happens automatically
- 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: Environment Verification
1. **Verify CLI installed**: Run `webflow --version` to confirm CLI is installed
2. **Check project state**: Determine if user has existing React project or needs guidance
3. **Identify workspace**: Explain that workspace authentication happens on first share
4. **Review configuration**: Check if webflow.json exists with library configuration

### Phase 2: Project Configuration
5. **Ask operation type**: Clarify what user wants to do:
   - Configure existing React project for Code Components
   - Add components to already-configured project
   - Build and share existing library
6. **Configure webflow.json**: Add library configuration to webflow.json:
   - Library name (appears in Webflow Designer)
   - Components glob pattern (e.g., `./src/**/*.webflow.tsx`)
   - Optional bundleConfig for custom webpack
7. **Read configuration files**: Use Read tool to show:
   - `webflow.json` - Library configuration
   - `package.json` - Dependencies and scripts
   - Component file structure
8. **Verify dependencies**: Ensure React is installed and build scripts exist

### Phase 3: Build & Bundle Validation
9. **Run build**: Execute user's build command (e.g., `npm run build`, `yarn build`)
10. **Validate build output**: Check for build errors or warnings
11. **Run bundle command**: Execute `webflow library bundle` for local validation
12. **Analyze bundle**:
    - Bundle size (should be < 2MB)
    - Dependencies included
    - Output location (default: `./dist`)
    - Validation warnings
13. **Preview bundle details**: Show bundle summary with validation status

### Phase 4: Preview & Approval
14. **Show deployment preview**:
    - Library name from webflow.json
    - Component files included
    - Bundle size and validation status
    - Target workspace (will be selected on first share)
    - Explain workspace authentication if first time
15. **Explain deployment**: What happens when library is shared
16. **Require explicit confirmation**: User must type "share" or "deploy" to proceed
17. **Confirm workspace**: Explain browser will open for workspace selection (first time only)

### Phase 5: Deployment & Verification
18. **Execute share command**: Run `webflow library share`
19. **Monitor deployment**: Show CLI output and progress
20. **Handle workspace auth**: If first time, guide user through browser authentication
21. **Verify deployment success**: Confirm library appears in workspace
22. **Show .env updates**: Explain WEBFLOW_WORKSPACE_ID and WEBFLOW_WORKSPACE_API_TOKEN added
23. **Provide next steps**:
    - How to use components in Designer
    - How to update components
    - Testing recommendations
    - Using `webflow library log` for debugging

## Examples

### Example 1: Configure Existing React Project

**User prompt:**
```
I have a React project with some components I want to share to Webflow
```

**Step 1: Environment Verification**
```
🔍 Webflow CLI Environment Check

Checking CLI installation...
✓ Webflow CLI installed: v1.5.2

Current directory: /Users/user/projects/my-components
✓ Found package.json with React project
✓ Found src/ directory with components

Checking webflow.json...
⚠️ No webflow.json found - needs configuration

Ready to configure for Code Components? (yes/no)
```

*User confirms: yes*

**Step 2: Project Configuration**
```
📋 Configure Code Components Library

I'll help you add the library configuration to webflow.json.

Questions:
1. What should your library be called in Webflow Designer?
   Example: "My Component Library"

2. Where are your component files located?
   Pattern examples:
   - "./src/**/*.webflow.tsx" (components with .webflow.tsx extension)
   - "./src/components/**/*.tsx" (all components in src/components/)
   - "./src/Button.tsx" (specific files)

Let me know the library name and component pattern.
```

*User provides: "Acme Components" and "./src/**/*.webflow.tsx"*

```
Creating webflow.json configuration...

{
  "library": {
    "name": "Acme Components",
    "components": ["./src/**/*.webflow.tsx"]
  }
}

✓ Configuration ready

Found component files:
- src/Button.webflow.tsx
- src/Card.webflow.tsx
- src/Hero.webflow.tsx

Next: Build your components and run bundle command.
```

**Step 3: Build & Bundle Validation**
```
🔨 Building Components

What build command do you use? (e.g., npm run build, yarn build)
```

*User responds: npm run build*

```
Executing: npm run build

Output:
✓ TypeScript compilation successful
✓ Components built to dist/

Creating bundle for validation...
Executing: webflow library bundle

Output:
✓ Analyzing 3 components
✓ Bundling dependencies
✓ Creating bundle
✓ Bundle created: dist/bundle.js

📦 Bundle Analysis:
- Size: 287 KB (✓ within 2MB limit)
- Components: 3 (Button, Card, Hero)
- Dependencies: [email protected], [email protected]
- Output: ./dist
- Validation: ✅ All checks passed
```

**Step 4: Preview & Approval**
```
📋 Deployment Preview

Library: Acme Components
Components: 3 (Button, Card, Hero)
Bundle Size: 287 KB

Workspace Authentication:
⚠️ This appears to be your first deployment. When you run 'share':
1. Browser will open for workspace authentication
2. Select your target Webflow workspace
3. Grant access to deploy components
4. CLI will create .env with credentials:
   - WEBFLOW_WORKSPACE_ID
   - WEBFLOW_WORKSPACE_API_TOKEN

Validation Status: ✅ Ready to deploy
- Bundle size: ✓ 287 KB (< 2MB limit)
- Dependencies: ✓ Valid (React 18.2.0)
- Configuration: ✓ webflow.json valid
- Components: ✓ 3 components found

⚠️ Type "share" to deploy this library to your workspace.
```

*User confirms: share*

**Step 5: Deployment & Verification**
```
🚀 Deploying Library

Executing: webflow library share

Output:
✓ Bundling library (287 KB)
✓ Opening browser for workspace authentication...

[Browser opens - user authenticates and selects workspace]

✓ Workspace authenticated: Acme Corp
✓ Uploading bundle
✓ Validating components
✓ Registering with workspace
✓ Library deployed successfully

✅ Library Deployed: Acme Components

Workspace: Acme Corp
Components: 3 (Button, Card, Hero)
Version: Latest
Status: Active

📁 Environment Updated:
Created .env file with:
- WEBFLOW_WORKSPACE_ID=workspace_abc123
- WEBFLOW_WORKSPACE_API_TOKEN=************

⚠️ Important: Add .env to your .gitignore file!

📋 Next Steps:
1. Open Webflow Designer
2. Go to Add Elements → Code Components
3. Find "Acme Components" in the list
4. Drag components onto canvas to use

💡 To update components:
1. Make changes to your component files
2. Run: npm run build
3. Run: webflow library share
   (No re-authentication needed - uses .env credentials)

🔍 For debugging:
- View logs: webflow library log
- Bundle locally: webflow library bundle
- Check bundle size: webflow library bundle --verbose

Component Library URL: https://webflow.com/dashboard/workspaces/acme-corp/components
```

### Example 2: Update Existing Library

**User prompt:**
```
Update my Code Components library with new changes
```

**Step 1: Environment Verification**
```
🔍 Code Components Library Check

Che