/code-component-command

name: webflow-cli:code-component
description: 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.

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,