devlink-command

Name: devlink-command
Author: webflow

106stars16forks

How to install devlink-command?

webflow/webflow-skills/devlink-command

$npx -y skills add webflow/webflow-skills --skill devlink-command

Installs into the current project.

Summary

Export Webflow Designer components to React/Next.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs, and provide integration examples. Use when building with Webflow designs in Reac

Files · 1

View on GitHub

SKILL.md

1	# DevLink
2
3	Export and sync Webflow Designer components to React/Next.js code with validation, diffs, and integration guidance.
4
5	## Important Note
6
7	ALWAYS use Bash tool for all Webflow CLI operations:
8	- Execute `webflow devlink sync` via Bash tool
9	- Use Read tool to examine synced files and webflow.json (never modify)
10	- Use Glob tool to discover generated components
11	- Verify CLI installation: `webflow --version`
12	- Check authentication: Use `webflow auth login` for site authentication
13	- DO NOT use Webflow MCP tools for CLI workflows
14	- All CLI commands require proper descriptions (not context parameters)
15
16	Package Manager Detection:
17	- Check for lock files: `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn)
18	- If no lock file found, ask user which package manager to use (npm/pnpm/yarn)
19	- Use detected package manager for all install/build commands
20
21	## Instructions
22
23	### Phase 1: Environment Verification
24	1. Verify CLI installed: Run `webflow --version` to confirm CLI is installed
25	2. Check authentication: Verify site authentication (created via `webflow auth login`)
26	3. Discover project state: Check if webflow.json exists with devlink configuration
27	4. Identify target framework: Determine if React, Next.js, or other
28
29	### Phase 2: DevLink Configuration
30	5. Check for existing config: Look for `webflow.json` with devlink section
31	6. Read configuration: If exists, show current devlink settings:
32	- `rootDir`: Directory to export components into
33	- `cssModules`: Whether to use CSS modules
34	- `fileExtensions`: File extensions for generated files
35	- Other configuration options
36	7. Ask operation type: Clarify what user wants to do:
37	- Configure DevLink for first time
38	- Sync all components
39	- Sync specific components (using `components` regex pattern)
40	- Update existing sync
41	8. Store baseline (if updating): Use Read tool to capture current files before sync
42
43	### Phase 3: Sync Execution
44	9. Run sync command: Execute `webflow devlink sync` with options:
45	- `--api-token` or `-t`: Override API token from .env
46	- `--site-id` or `-s`: Override site ID from .env
47	10. Monitor sync progress: Show CLI output and sync status
48	11. Capture sync results: Record files created/modified in rootDir
49	12. Validate generated code:
50	- Check for TypeScript errors (if using TS)
51	- Verify import statements
52	- Confirm component exports
53	- Check CSS module references
54
55	### Phase 4: Analysis & Diff Preview
56	13. Compare before/after: Show what changed:
57	- New files created in rootDir
58	- Existing files modified
59	- Components added or updated
60	14. Show file diffs: Display key changes for modified files
61	15. Analyze component structure:
62	- Component count
63	- New components added
64	- Updated components
65	- CSS files generated
66	16. List dependencies: Show what needs to be imported
67
68	### Phase 5: Integration Guidance
69	17. Provide import statements: Show exact code to import components
70	18. Show usage examples: Demonstrate how to use each component
71	19. Document sync timestamp: Record when sync occurred
72	20. Provide next steps: Guide user on testing and integration
73
74	## Examples
75
76	### Example 1: First-Time DevLink Setup
77
78	User prompt:
79	```
80	Sync my Webflow components to my Next.js project
81	```
82
83	Step 1: Environment Verification
84	```
85	🔍 DevLink Environment Check
86
87	Checking CLI installation...
88	✓ Webflow CLI installed: v1.5.2
89
90	Current directory: /Users/user/projects/my-nextjs-app
91	Framework detected: Next.js 14
92
93	Checking for DevLink configuration...
94	⚠️ No webflow.json with devlink configuration found
95
96	This appears to be your first DevLink sync.
97	Ready to configure? (yes/no)
98	```
99
100	User confirms: yes
101
102	Step 2: Configuration Setup
103	```
104	📋 DevLink Configuration
105
106	DevLink syncs Webflow components to your local project as React code.
107
108	Configuration needed in webflow.json:
109
110	{
111	"devlink": {
112	"rootDir": "./devlink", // Where to export components
113	"cssModules": true, // Use CSS modules
114	"fileExtensions": {
115	"js": "jsx" // or "tsx" for TypeScript
116	}
117	}
118	}
119
120	I'll help you create this configuration.
121
122	Questions:
123	1. Where should components be exported? (default: ./devlink)
124	2. Use TypeScript? (yes for tsx, no for jsx)
125	3. Use CSS modules? (recommended: yes)
126	```
127
128	User provides: ./src/devlink, yes (TypeScript), yes (CSS modules)
129
130	```
131	Creating webflow.json configuration...
132
133	{
134	"devlink": {
135	"rootDir": "./src/devlink",
136	"cssModules": true,
137	"fileExtensions": {
138	"js": "tsx"
139	}
140	}
141	}
142
143	✓ Configuration created
144
145	⚠️ Authentication Required:

People who liked this also viewed

6 picks

Type

devlink-command

106stars16forks

View on GitHub

How to install devlink-command?

webflow/webflow-skills/devlink-command

$npx -y skills add webflow/webflow-skills --skill devlink-command

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# DevLink
2
3	Export and sync Webflow Designer components to React/Next.js code with validation, diffs, and integration guidance.
4
5	## Important Note
6
7	ALWAYS use Bash tool for all Webflow CLI operations:
8	- Execute `webflow devlink sync` via Bash tool
9	- Use Read tool to examine synced files and webflow.json (never modify)
10	- Use Glob tool to discover generated components
11	- Verify CLI installation: `webflow --version`
12	- Check authentication: Use `webflow auth login` for site authentication
13	- DO NOT use Webflow MCP tools for CLI workflows
14	- All CLI commands require proper descriptions (not context parameters)
15
16	Package Manager Detection:
17	- Check for lock files: `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn)
18	- If no lock file found, ask user which package manager to use (npm/pnpm/yarn)
19	- Use detected package manager for all install/build commands
20
21	## Instructions
22
23	### Phase 1: Environment Verification
24	1. Verify CLI installed: Run `webflow --version` to confirm CLI is installed
25	2. Check authentication: Verify site authentication (created via `webflow auth login`)
26	3. Discover project state: Check if webflow.json exists with devlink configuration
27	4. Identify target framework: Determine if React, Next.js, or other
28
29	### Phase 2: DevLink Configuration
30	5. Check for existing config: Look for `webflow.json` with devlink section
31	6. Read configuration: If exists, show current devlink settings:
32	- `rootDir`: Directory to export components into
33	- `cssModules`: Whether to use CSS modules
34	- `fileExtensions`: File extensions for generated files
35	- Other configuration options
36	7. Ask operation type: Clarify what user wants to do:
37	- Configure DevLink for first time
38	- Sync all components
39	- Sync specific components (using `components` regex pattern)
40	- Update existing sync
41	8. Store baseline (if updating): Use Read tool to capture current files before sync
42
43	### Phase 3: Sync Execution
44	9. Run sync command: Execute `webflow devlink sync` with options:
45	- `--api-token` or `-t`: Override API token from .env
46	- `--site-id` or `-s`: Override site ID from .env
47	10. Monitor sync progress: Show CLI output and sync status
48	11. Capture sync results: Record files created/modified in rootDir
49	12. Validate generated code:
50	- Check for TypeScript errors (if using TS)
51	- Verify import statements
52	- Confirm component exports
53	- Check CSS module references
54
55	### Phase 4: Analysis & Diff Preview
56	13. Compare before/after: Show what changed:
57	- New files created in rootDir
58	- Existing files modified
59	- Components added or updated
60	14. Show file diffs: Display key changes for modified files
61	15. Analyze component structure:
62	- Component count
63	- New components added
64	- Updated components
65	- CSS files generated
66	16. List dependencies: Show what needs to be imported
67
68	### Phase 5: Integration Guidance
69	17. Provide import statements: Show exact code to import components
70	18. Show usage examples: Demonstrate how to use each component
71	19. Document sync timestamp: Record when sync occurred
72	20. Provide next steps: Guide user on testing and integration
73
74	## Examples
75
76	### Example 1: First-Time DevLink Setup
77
78	User prompt:
79	```
80	Sync my Webflow components to my Next.js project
81	```
82
83	Step 1: Environment Verification
84	```
85	🔍 DevLink Environment Check
86
87	Checking CLI installation...
88	✓ Webflow CLI installed: v1.5.2
89
90	Current directory: /Users/user/projects/my-nextjs-app
91	Framework detected: Next.js 14
92
93	Checking for DevLink configuration...
94	⚠️ No webflow.json with devlink configuration found
95
96	This appears to be your first DevLink sync.
97	Ready to configure? (yes/no)
98	```
99
100	User confirms: yes
101
102	Step 2: Configuration Setup
103	```
104	📋 DevLink Configuration
105
106	DevLink syncs Webflow components to your local project as React code.
107
108	Configuration needed in webflow.json:
109
110	{
111	"devlink": {
112	"rootDir": "./devlink", // Where to export components
113	"cssModules": true, // Use CSS modules
114	"fileExtensions": {
115	"js": "jsx" // or "tsx" for TypeScript
116	}
117	}
118	}
119
120	I'll help you create this configuration.
121
122	Questions:
123	1. Where should components be exported? (default: ./devlink)
124	2. Use TypeScript? (yes for tsx, no for jsx)
125	3. Use CSS modules? (recommended: yes)
126	```
127
128	User provides: ./src/devlink, yes (TypeScript), yes (CSS modules)
129
130	```
131	Creating webflow.json configuration...
132
133	{
134	"devlink": {
135	"rootDir": "./src/devlink",
136	"cssModules": true,
137	"fileExtensions": {
138	"js": "tsx"
139	}
140	}
141	}
142
143	✓ Configuration created
144
145	⚠️ Authentication Required:

People who liked this also viewed

6 picks

Type