webflow-code-component:component-scaffold

Component Scaffold

Generate a new Webflow Code Component with proper file structure, React component, and .webflow.tsx definition file.

When to Use This Skill

Use when:

• Creating a new code component from scratch
• User asks to scaffold, generate, or create a component
• Starting a new component with proper Webflow file structure

Do NOT use when:

• Converting an existing React component (use convert-component skill)
• Modifying existing components (answer directly or use component-audit)
• Just asking questions about components (answer directly)
• Setting up a complex project with custom bundler config (use local-dev-setup instead)

Note: This skill can handle basic setup (webflow.json + dependencies) automatically. Use local-dev-setup only for complex setups requiring Tailwind, custom webpack config, or monorepo configurations.

Instructions

Phase 0: Prerequisites Check (Run First)

Before gathering any requirements, verify the project is set up for Webflow Code Components:

1. Check for webflow.json:

   # Look for webflow.json in project root
   

   • If missing: Offer to create it or invoke local-dev-setup skill

2. Check for required dependencies in package.json:

   {
     "devDependencies": {
       "@webflow/webflow-cli": "...",
       "@webflow/data-types": "...",
       "@webflow/react": "..."
     }
   }
   

   • If missing: Offer to install them:

     npm i --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react
     

3. Check for components directory:

   • Look for existing pattern (e.g., src/components/)
   • If no components exist, determine where to create them based on webflow.json config

4. Report setup status:

   If all prerequisites met:

   ✅ Project ready for code components
   - webflow.json: Found
   - Dependencies: Installed
   - Components path: src/components/
   
   Let's create your component...
   

   If prerequisites missing:

   ⚠️ Project Setup Required
   
   Missing:
   - [ ] webflow.json configuration file
   - [ ] @webflow/webflow-cli dependency
   - [ ] @webflow/data-types dependency
   - [ ] @webflow/react dependency
   
   Would you like me to:
   1. Set up the missing items now (quick setup)
   2. Run full project initialization (local-dev-setup skill)
   
   Choose an option: