webflow-code-component:pre-deploy-check

Build Validate

Validate code components before deployment to catch issues early.

When to Use This Skill

Use when:

• User is about to deploy and wants to check for issues first
• Proactively before running webflow library share
• User asks to validate, check, or verify their components
• After making significant changes to components

Do NOT use when:

• Deployment already failed (use troubleshoot-deploy instead)
• Just building for local development
• Auditing code quality (use component-audit instead)

Instructions

Phase 1: Project Structure Check

1. Verify webflow.json exists:

   • Check for required fields (library.name, library.components)
   • Validate glob pattern matches component files — the recommended pattern is "./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)" covering all supported extensions
   • Check globals path if specified — file must exist and be importable
   • Check bundleConfig path if specified — file must exist

2. Check dependencies:

   • Verify @webflow/webflow-cli installed
   • Verify @webflow/data-types installed
   • Verify @webflow/react installed
   • Check for version compatibility (check installed versions, don't assume specific versions)

3. Verify component files:

   • Find all .webflow.tsx / .webflow.ts files matching the glob pattern
   • Ensure matching React components exist
   • Check for orphaned definition files

4. Validate imports in .webflow.tsx files:

   • Must import declareComponent from @webflow/react
   • Must import props from @webflow/data-types (if props are defined)
   • Must import the actual React component being declared

Phase 2: Component Analysis

1. For each component, check:
   • declareComponent is called with the component and a config object
   • name is provided in the config
   • All props have name properties and appropriate defaultValue where applicable
   • Prop types are valid — the 11 supported types are:
     • Text (alias: String) — single line text input
     • RichText — multi-line text with formatting
     • TextNode — single/multi-line text editable on canvas
     • Link — URL input (returns { href, target, preload } object)
     • Image — image upload and selection
     • Number — numeric input
     • Boolean — true/false toggle
     • Variant — dropdown with predefined options (requires options array)
     • Visibility — show/hide controls
     • Slot — content areas for child components
     • ID — HTML element ID