pre-deploy-check

Name: pre-deploy-check
Author: webflow

106stars16forks

How to install pre-deploy-check?

webflow/webflow-skills/pre-deploy-check

$npx -y skills add webflow/webflow-skills --skill pre-deploy-check

Installs into the current project.

Summary

Pre-deployment validation for Webflow Code Components. Checks bundle size, dependencies, prop configurations, SSR compatibility, styling setup, and common issues before running webflow library share.

Files · 1

View on GitHub

SKILL.md

1	# Build Validate
2
3	Validate code components before deployment to catch issues early.
4
5	## When to Use This Skill
6
7	Use when:
8	- User is about to deploy and wants to check for issues first
9	- Proactively before running `webflow library share`
10	- User asks to validate, check, or verify their components
11	- After making significant changes to components
12
13	Do NOT use when:
14	- Deployment already failed (use troubleshoot-deploy instead)
15	- Just building for local development
16	- Auditing code quality (use component-audit instead)
17
18	## Instructions
19
20	### Phase 1: Project Structure Check
21
22	1. Verify webflow.json exists:
23	- Check for required fields (`library.name`, `library.components`)
24	- Validate glob pattern matches component files — the recommended pattern is `"./src/*/.webflow.@(js\|jsx\|mjs\|ts\|tsx)"` covering all supported extensions
25	- Check `globals` path if specified — file must exist and be importable
26	- Check `bundleConfig` path if specified — file must exist
27
28	2. Check dependencies:
29	- Verify `@webflow/webflow-cli` installed
30	- Verify `@webflow/data-types` installed
31	- Verify `@webflow/react` installed
32	- Check for version compatibility (check installed versions, don't assume specific versions)
33
34	3. Verify component files:
35	- Find all `.webflow.tsx` / `.webflow.ts` files matching the glob pattern
36	- Ensure matching React components exist
37	- Check for orphaned definition files
38
39	4. Validate imports in `.webflow.tsx` files:
40	- Must import `declareComponent` from `@webflow/react`
41	- Must import `props` from `@webflow/data-types` (if props are defined)
42	- Must import the actual React component being declared
43
44	### Phase 2: Component Analysis
45
46	5. For each component, check:
47	- `declareComponent` is called with the component and a config object
48	- `name` is provided in the config
49	- All props have `name` properties and appropriate `defaultValue` where applicable
50	- Prop types are valid — the 11 supported types are:
51	- Text (alias: String) — single line text input
52	- RichText — multi-line text with formatting
53	- TextNode — single/multi-line text editable on canvas
54	- Link — URL input (returns `{ href, target, preload }` object)
55	- Image — image upload and selection
56	- Number — numeric input
57	- Boolean — true/false toggle
58	- Variant — dropdown with predefined options (requires `options` array)
59	- Visibility — show/hide controls
60	- Slot — content areas for child components
61	- ID — HTML element ID
62
63	6. Validate component options:
64	- If `options` object is present, validate:
65	- `applyTagSelectors` is a boolean (default: `false`) — enables site tag selectors in Shadow DOM
66	- `ssr` is a boolean (default: `true`) — controls server-side rendering
67
68	7. Check for SSR issues:
69	- Scan for browser-only API usage outside of `useEffect` or guarded blocks:
70	- `window`, `document`, `localStorage`, `sessionStorage`, `navigator`
71	- Flag dynamic/personalized content patterns (user-specific dashboards, authenticated views)
72	- Flag heavy/interactive UI that doesn't benefit from SSR (charts, 3D scenes, maps, animation-heavy elements)
73	- Flag non-deterministic output (random numbers, time-based values that differ server vs client)
74	- Suggest `ssr: false` in options if component is purely interactive or browser-dependent
75
76	8. Check styling:
77	- Verify styles are imported in `.webflow.tsx` or via globals file
78	- Check for site class usage — site classes do NOT work in Shadow DOM
79	- Site variables DO work: `var(--variable-name, fallback)`
80	- Inherited CSS properties DO work: `font-family: inherit`
81	- Tag selectors work IF `applyTagSelectors: true` is set in component options
82	- Validate CSS-in-JS setup if used (see CSS-in-JS detection below)
83
84	9. Check for Shadow DOM + React Context issues:
85	- If a component uses slots (`props.Slot`) AND imports/uses `useContext` or a Context Provider:
86	- Warn that parent and child components in slots cannot share React Context — each child renders in its own Shadow DOM with a separate React root
87	- Suggest alternatives: Nano Stores, custom events, URL parameters, or browser storage
88
89	### Phase 3: Build Test
90
91	10. Run TypeScript/build check:
92	- Check for TypeScript compilation errors
93	- Verify all imports resolve correctly
94	- Identify any build-time issues
95
96	11. Check bundle size:
97	- If a build output exists, verify total bundle size is under 50MB (maximum bundle limit)
98	- If over limit, flag as error and suggest opti

People who liked this also viewed

6 picks

Type

pre-deploy-check

106stars16forks

View on GitHub

How to install pre-deploy-check?

webflow/webflow-skills/pre-deploy-check

$npx -y skills add webflow/webflow-skills --skill pre-deploy-check

Installs into the current project.

Summary

Pre-deployment validation for Webflow Code Components. Checks bundle size, dependencies, prop configurations, SSR compatibility, styling setup, and common issues before running webflow library share.

Files · 1

View on GitHub

SKILL.md

1	# Build Validate
2
3	Validate code components before deployment to catch issues early.
4
5	## When to Use This Skill
6
7	Use when:
8	- User is about to deploy and wants to check for issues first
9	- Proactively before running `webflow library share`
10	- User asks to validate, check, or verify their components
11	- After making significant changes to components
12
13	Do NOT use when:
14	- Deployment already failed (use troubleshoot-deploy instead)
15	- Just building for local development
16	- Auditing code quality (use component-audit instead)
17
18	## Instructions
19
20	### Phase 1: Project Structure Check
21
22	1. Verify webflow.json exists:
23	- Check for required fields (`library.name`, `library.components`)
24	- Validate glob pattern matches component files — the recommended pattern is `"./src/*/.webflow.@(js\|jsx\|mjs\|ts\|tsx)"` covering all supported extensions
25	- Check `globals` path if specified — file must exist and be importable
26	- Check `bundleConfig` path if specified — file must exist
27
28	2. Check dependencies:
29	- Verify `@webflow/webflow-cli` installed
30	- Verify `@webflow/data-types` installed
31	- Verify `@webflow/react` installed
32	- Check for version compatibility (check installed versions, don't assume specific versions)
33
34	3. Verify component files:
35	- Find all `.webflow.tsx` / `.webflow.ts` files matching the glob pattern
36	- Ensure matching React components exist
37	- Check for orphaned definition files
38
39	4. Validate imports in `.webflow.tsx` files:
40	- Must import `declareComponent` from `@webflow/react`
41	- Must import `props` from `@webflow/data-types` (if props are defined)
42	- Must import the actual React component being declared
43
44	### Phase 2: Component Analysis
45
46	5. For each component, check:
47	- `declareComponent` is called with the component and a config object
48	- `name` is provided in the config
49	- All props have `name` properties and appropriate `defaultValue` where applicable
50	- Prop types are valid — the 11 supported types are:
51	- Text (alias: String) — single line text input
52	- RichText — multi-line text with formatting
53	- TextNode — single/multi-line text editable on canvas
54	- Link — URL input (returns `{ href, target, preload }` object)
55	- Image — image upload and selection
56	- Number — numeric input
57	- Boolean — true/false toggle
58	- Variant — dropdown with predefined options (requires `options` array)
59	- Visibility — show/hide controls
60	- Slot — content areas for child components
61	- ID — HTML element ID
62
63	6. Validate component options:
64	- If `options` object is present, validate:
65	- `applyTagSelectors` is a boolean (default: `false`) — enables site tag selectors in Shadow DOM
66	- `ssr` is a boolean (default: `true`) — controls server-side rendering
67
68	7. Check for SSR issues:
69	- Scan for browser-only API usage outside of `useEffect` or guarded blocks:
70	- `window`, `document`, `localStorage`, `sessionStorage`, `navigator`
71	- Flag dynamic/personalized content patterns (user-specific dashboards, authenticated views)
72	- Flag heavy/interactive UI that doesn't benefit from SSR (charts, 3D scenes, maps, animation-heavy elements)
73	- Flag non-deterministic output (random numbers, time-based values that differ server vs client)
74	- Suggest `ssr: false` in options if component is purely interactive or browser-dependent
75
76	8. Check styling:
77	- Verify styles are imported in `.webflow.tsx` or via globals file
78	- Check for site class usage — site classes do NOT work in Shadow DOM
79	- Site variables DO work: `var(--variable-name, fallback)`
80	- Inherited CSS properties DO work: `font-family: inherit`
81	- Tag selectors work IF `applyTagSelectors: true` is set in component options
82	- Validate CSS-in-JS setup if used (see CSS-in-JS detection below)
83
84	9. Check for Shadow DOM + React Context issues:
85	- If a component uses slots (`props.Slot`) AND imports/uses `useContext` or a Context Provider:
86	- Warn that parent and child components in slots cannot share React Context — each child renders in its own Shadow DOM with a separate React root
87	- Suggest alternatives: Nano Stores, custom events, URL parameters, or browser storage
88
89	### Phase 3: Build Test
90
91	10. Run TypeScript/build check:
92	- Check for TypeScript compilation errors
93	- Verify all imports resolve correctly
94	- Identify any build-time issues
95
96	11. Check bundle size:
97	- If a build output exists, verify total bundle size is under 50MB (maximum bundle limit)
98	- If over limit, flag as error and suggest opti

People who liked this also viewed

6 picks

Type