code-component-command

Name: code-component-command
Author: webflow

106stars16forks

How to install code-component-command?

webflow/webflow-skills/code-component-command

$npx -y skills add webflow/webflow-skills --skill code-component-command

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Code Component
2
3	Create, build, and deploy React components to Webflow Designer with comprehensive validation and deployment verification.
4
5	## Important Note
6
7	ALWAYS use Bash tool for all Webflow CLI operations:
8	- Execute `webflow` CLI commands via Bash tool
9	- Use Read tool to examine generated files (never modify)
10	- Use Glob tool to discover project files
11	- Verify CLI installation: `webflow --version`
12	- Check authentication: On first `webflow library share`, workspace authentication happens automatically
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 project state: Determine if user has existing React project or needs guidance
26	3. Identify workspace: Explain that workspace authentication happens on first share
27	4. Review configuration: Check if webflow.json exists with library configuration
28
29	### Phase 2: Project Configuration
30	5. Ask operation type: Clarify what user wants to do:
31	- Configure existing React project for Code Components
32	- Add components to already-configured project
33	- Build and share existing library
34	6. Configure webflow.json: Add library configuration to webflow.json:
35	- Library name (appears in Webflow Designer)
36	- Components glob pattern (e.g., `./src/*/.webflow.tsx`)
37	- Optional bundleConfig for custom webpack
38	7. Read configuration files: Use Read tool to show:
39	- `webflow.json` - Library configuration
40	- `package.json` - Dependencies and scripts
41	- Component file structure
42	8. Verify dependencies: Ensure React is installed and build scripts exist
43
44	### Phase 3: Build & Bundle Validation
45	9. Run build: Execute user's build command (e.g., `npm run build`, `yarn build`)
46	10. Validate build output: Check for build errors or warnings
47	11. Run bundle command: Execute `webflow library bundle` for local validation
48	12. Analyze bundle:
49	- Bundle size (should be < 2MB)
50	- Dependencies included
51	- Output location (default: `./dist`)
52	- Validation warnings
53	13. Preview bundle details: Show bundle summary with validation status
54
55	### Phase 4: Preview & Approval
56	14. Show deployment preview:
57	- Library name from webflow.json
58	- Component files included
59	- Bundle size and validation status
60	- Target workspace (will be selected on first share)
61	- Explain workspace authentication if first time
62	15. Explain deployment: What happens when library is shared
63	16. Require explicit confirmation: User must type "share" or "deploy" to proceed
64	17. Confirm workspace: Explain browser will open for workspace selection (first time only)
65
66	### Phase 5: Deployment & Verification
67	18. Execute share command: Run `webflow library share`
68	19. Monitor deployment: Show CLI output and progress
69	20. Handle workspace auth: If first time, guide user through browser authentication
70	21. Verify deployment success: Confirm library appears in workspace
71	22. Show .env updates: Explain WEBFLOW_WORKSPACE_ID and WEBFLOW_WORKSPACE_API_TOKEN added
72	23. Provide next steps:
73	- How to use components in Designer
74	- How to update components
75	- Testing recommendations
76	- Using `webflow library log` for debugging
77
78	## Examples
79
80	### Example 1: Configure Existing React Project
81
82	User prompt:
83	```
84	I have a React project with some components I want to share to Webflow
85	```
86
87	Step 1: Environment Verification
88	```
89	🔍 Webflow CLI Environment Check
90
91	Checking CLI installation...
92	✓ Webflow CLI installed: v1.5.2
93
94	Current directory: /Users/user/projects/my-components
95	✓ Found package.json with React project
96	✓ Found src/ directory with components
97
98	Checking webflow.json...
99	⚠️ No webflow.json found - needs configuration
100
101	Ready to configure for Code Components? (yes/no)
102	```
103
104	User confirms: yes
105
106	Step 2: Project Configuration
107	```
108	📋 Configure Code Components Library
109
110	I'll help you add the library configuration to webflow.json.
111
112	Questions:
113	1. What should your library be called in Webflow Designer?
114	Example: "My Component Library"
115
116	2. Where are your component files located?
117	Pattern examples:
118	- "./src/*/.webflow.tsx" (components with .webflow.tsx extension)
119	- "./src/components/*/.tsx" (all components in src/components/)
120	- "./src/

People who liked this also viewed

6 picks

Type

code-component-command

106stars16forks

View on GitHub

How to install code-component-command?

webflow/webflow-skills/code-component-command

$npx -y skills add webflow/webflow-skills --skill code-component-command

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Code Component
2
3	Create, build, and deploy React components to Webflow Designer with comprehensive validation and deployment verification.
4
5	## Important Note
6
7	ALWAYS use Bash tool for all Webflow CLI operations:
8	- Execute `webflow` CLI commands via Bash tool
9	- Use Read tool to examine generated files (never modify)
10	- Use Glob tool to discover project files
11	- Verify CLI installation: `webflow --version`
12	- Check authentication: On first `webflow library share`, workspace authentication happens automatically
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 project state: Determine if user has existing React project or needs guidance
26	3. Identify workspace: Explain that workspace authentication happens on first share
27	4. Review configuration: Check if webflow.json exists with library configuration
28
29	### Phase 2: Project Configuration
30	5. Ask operation type: Clarify what user wants to do:
31	- Configure existing React project for Code Components
32	- Add components to already-configured project
33	- Build and share existing library
34	6. Configure webflow.json: Add library configuration to webflow.json:
35	- Library name (appears in Webflow Designer)
36	- Components glob pattern (e.g., `./src/*/.webflow.tsx`)
37	- Optional bundleConfig for custom webpack
38	7. Read configuration files: Use Read tool to show:
39	- `webflow.json` - Library configuration
40	- `package.json` - Dependencies and scripts
41	- Component file structure
42	8. Verify dependencies: Ensure React is installed and build scripts exist
43
44	### Phase 3: Build & Bundle Validation
45	9. Run build: Execute user's build command (e.g., `npm run build`, `yarn build`)
46	10. Validate build output: Check for build errors or warnings
47	11. Run bundle command: Execute `webflow library bundle` for local validation
48	12. Analyze bundle:
49	- Bundle size (should be < 2MB)
50	- Dependencies included
51	- Output location (default: `./dist`)
52	- Validation warnings
53	13. Preview bundle details: Show bundle summary with validation status
54
55	### Phase 4: Preview & Approval
56	14. Show deployment preview:
57	- Library name from webflow.json
58	- Component files included
59	- Bundle size and validation status
60	- Target workspace (will be selected on first share)
61	- Explain workspace authentication if first time
62	15. Explain deployment: What happens when library is shared
63	16. Require explicit confirmation: User must type "share" or "deploy" to proceed
64	17. Confirm workspace: Explain browser will open for workspace selection (first time only)
65
66	### Phase 5: Deployment & Verification
67	18. Execute share command: Run `webflow library share`
68	19. Monitor deployment: Show CLI output and progress
69	20. Handle workspace auth: If first time, guide user through browser authentication
70	21. Verify deployment success: Confirm library appears in workspace
71	22. Show .env updates: Explain WEBFLOW_WORKSPACE_ID and WEBFLOW_WORKSPACE_API_TOKEN added
72	23. Provide next steps:
73	- How to use components in Designer
74	- How to update components
75	- Testing recommendations
76	- Using `webflow library log` for debugging
77
78	## Examples
79
80	### Example 1: Configure Existing React Project
81
82	User prompt:
83	```
84	I have a React project with some components I want to share to Webflow
85	```
86
87	Step 1: Environment Verification
88	```
89	🔍 Webflow CLI Environment Check
90
91	Checking CLI installation...
92	✓ Webflow CLI installed: v1.5.2
93
94	Current directory: /Users/user/projects/my-components
95	✓ Found package.json with React project
96	✓ Found src/ directory with components
97
98	Checking webflow.json...
99	⚠️ No webflow.json found - needs configuration
100
101	Ready to configure for Code Components? (yes/no)
102	```
103
104	User confirms: yes
105
106	Step 2: Project Configuration
107	```
108	📋 Configure Code Components Library
109
110	I'll help you add the library configuration to webflow.json.
111
112	Questions:
113	1. What should your library be called in Webflow Designer?
114	Example: "My Component Library"
115
116	2. Where are your component files located?
117	Pattern examples:
118	- "./src/*/.webflow.tsx" (components with .webflow.tsx extension)
119	- "./src/components/*/.tsx" (all components in src/components/)
120	- "./src/

People who liked this also viewed

6 picks

Type