webflow-cli:devlink

What this skill does

# DevLink

Export and sync Webflow Designer components to React/Next.js code with validation, diffs, and integration guidance.

## Important Note

**ALWAYS use Bash tool for all Webflow CLI operations:**
- Execute `webflow devlink sync` via Bash tool
- Use Read tool to examine synced files and webflow.json (never modify)
- Use Glob tool to discover generated components
- Verify CLI installation: `webflow --version`
- Check authentication: Use `webflow auth login` for site authentication
- 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 authentication**: Verify site authentication (created via `webflow auth login`)
3. **Discover project state**: Check if webflow.json exists with devlink configuration
4. **Identify target framework**: Determine if React, Next.js, or other

### Phase 2: DevLink Configuration
5. **Check for existing config**: Look for `webflow.json` with devlink section
6. **Read configuration**: If exists, show current devlink settings:
   - `rootDir`: Directory to export components into
   - `cssModules`: Whether to use CSS modules
   - `fileExtensions`: File extensions for generated files
   - Other configuration options
7. **Ask operation type**: Clarify what user wants to do:
   - Configure DevLink for first time
   - Sync all components
   - Sync specific components (using `components` regex pattern)
   - Update existing sync
8. **Store baseline** (if updating): Use Read tool to capture current files before sync

### Phase 3: Sync Execution
9. **Run sync command**: Execute `webflow devlink sync` with options:
   - `--api-token` or `-t`: Override API token from .env
   - `--site-id` or `-s`: Override site ID from .env
10. **Monitor sync progress**: Show CLI output and sync status
11. **Capture sync results**: Record files created/modified in rootDir
12. **Validate generated code**:
    - Check for TypeScript errors (if using TS)
    - Verify import statements
    - Confirm component exports
    - Check CSS module references

### Phase 4: Analysis & Diff Preview
13. **Compare before/after**: Show what changed:
    - New files created in rootDir
    - Existing files modified
    - Components added or updated
14. **Show file diffs**: Display key changes for modified files
15. **Analyze component structure**:
    - Component count
    - New components added
    - Updated components
    - CSS files generated
16. **List dependencies**: Show what needs to be imported

### Phase 5: Integration Guidance
17. **Provide import statements**: Show exact code to import components
18. **Show usage examples**: Demonstrate how to use each component
19. **Document sync timestamp**: Record when sync occurred
20. **Provide next steps**: Guide user on testing and integration

## Examples

### Example 1: First-Time DevLink Setup

**User prompt:**
```
Sync my Webflow components to my Next.js project
```

**Step 1: Environment Verification**
```
🔍 DevLink Environment Check

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

Current directory: /Users/user/projects/my-nextjs-app
Framework detected: Next.js 14

Checking for DevLink configuration...
⚠️ No webflow.json with devlink configuration found

This appears to be your first DevLink sync.
Ready to configure? (yes/no)
```

*User confirms: yes*

**Step 2: Configuration Setup**
```
📋 DevLink Configuration

DevLink syncs Webflow components to your local project as React code.

Configuration needed in webflow.json:

{
  "devlink": {
    "rootDir": "./devlink",           // Where to export components
    "cssModules": true,                // Use CSS modules
    "fileExtensions": {
      "js": "jsx"                      // or "tsx" for TypeScript
    }
  }
}

I'll help you create this configuration.

Questions:
1. Where should components be exported? (default: ./devlink)
2. Use TypeScript? (yes for tsx, no for jsx)
3. Use CSS modules? (recommended: yes)
```

*User provides: ./src/devlink, yes (TypeScript), yes (CSS modules)*

```
Creating webflow.json configuration...

{
  "devlink": {
    "rootDir": "./src/devlink",
    "cssModules": true,
    "fileExtensions": {
      "js": "tsx"
    }
  }
}

✓ Configuration created

⚠️ Authentication Required:
DevLink needs your Webflow site ID and API token.

Run: webflow auth login
This will create a .env file with:
- WEBFLOW_SITE_ID
- WEBFLOW_SITE_API_TOKEN

After authentication, run sync again.
```

### Example 2: First Sync After Configuration

**User prompt:**
```
Run the DevLink sync
```

**Step 1: Verification**
```
🔍 DevLink Sync Check

Checking configuration...
✓ webflow.json found with devlink config
✓ Root directory: ./src/devlink
✓ CSS modules: enabled
✓ File extensions: tsx

Checking authentication...
✓ .env found with WEBFLOW_SITE_ID and WEBFLOW_SITE_API_TOKEN

Ready to sync components from Webflow.
```

**Step 2: Sync Execution**
```
🔄 Syncing Components

Executing: webflow devlink sync

Output:
✓ Connecting to Webflow site
✓ Fetching components
✓ Exporting components to ./src/devlink
✓ Generating React components
✓ Creating CSS module files
✓ Creating index file

Sync complete!

📁 Generated Files:
./src/devlink/
├── index.ts (module exports)
├── Navigation.tsx (component)
├── Navigation.module.css (styles)
├── Hero.tsx (component)
├── Hero.module.css (styles)
├── Footer.tsx (component)
├── Footer.module.css (styles)
└── _webflow-style.css (global styles)

📊 Sync Summary:
- Components synced: 3
- Files created: 8
- Total size: 45 KB
```

**Step 3: Integration Guidance**
```
✅ DevLink Sync Complete!

📋 Components Available:
1. Navigation
2. Hero
3. Footer

💡 How to Use:

Import components in your Next.js pages:
```tsx
import { Navigation, Hero, Footer } from './src/devlink'

export default function Home() {
  return (
    <>
      <Navigation />
      <Hero />
      <Footer />
    </>
  )
}
```

Global Styles:
Import the global DevLink styles in your _app.tsx or layout:
```tsx
import '../src/devlink/_webflow-style.css'
```

📦 No additional dependencies required!
DevLink components use only React (already in your project).

🔄 Future Updates:
Run `webflow devlink sync` again to pull latest design changes.
```

### Example 3: Update Existing Sync

**User prompt:**
```
Sync latest changes from Webflow
```

**Step 1: Pre-Sync State**
```
🔍 DevLink Update Check

Current state:
✓ Configuration: ./src/devlink
✓ Existing components: 3 (Navigation, Hero, Footer)
✓ Last sync: 2 days ago

Capturing current state for comparison...
✓ Baseline captured
```

**Step 2: Sync**
```
🔄 Syncing Updates

Executing: webflow devlink sync

Output:
✓ Connecting to Webflow site
✓ Fetching components
✓ Detecting changes
✓ Updating components
✓ Regenerating files

Sync complete!
```

**Step 3: Diff Analysis**
```
📊 Sync Analysis

Changes detected:

Modified Components:
1. Navigation.tsx
   - Added new "Contact" link
   - Updated styles for mobile view

2. Hero.tsx
   - Changed heading text
   - Updated button styling

New Components:
3. CallToAction.tsx (new)
   - New CTA section added

Unchanged:
- Footer.tsx

📁 Files Updated:
- ./src/devlink/Navigation.tsx (modified)
- ./src/devlink/Navigation.module.css (modified)
- ./src/devlink/Hero.tsx (modified)
- ./src/devlink/Hero.module.css (modified)
- ./src/devlink/CallToAction.tsx (new)
- ./src/devlink/CallToAction.module.css (new)
- ./src/devlink/index.ts (updated exports)

✅ 3 components updated, 1 new component added

💡 New Component Available:
```tsx
import { CallToAction } from './src/devlink'

<CallToAction />
```
```

### Example 4