/component-scaffold

name: webflow-code-component:component-scaffold
description: Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config/dependencies.
compatibility: Node.js 18+, React 18+, TypeScript, @webflow/webflow-cli
metadata:
  author: webflow
  version: "1.0"

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:

**Quick setup** creates minimal config:

   // webflow.json
   {
     "library": {
       "name": "My Component Library",
       "components": ["./src/components/**/*.webflow.tsx"]
     }
   }

And installs dependencies.

**Optional:** `webflow.json` also supports a `"globals"` field pointing to a globals file (e.g., `"globals": "./src/globals.webflow.ts"`). The globals file is used for global CSS imports (e.g., Tailwind) and exporting decorator arrays. Add this when using styled-components, Emotion, or Tailwind.

**Only proceed to Phase 1 after prerequisites are confirmed.**

---

Phase 1: Gather Requirements

1. **Get component name**: Ask user for the component name

• Must be PascalCase (e.g., "Accordion", "ProductCard")
• Suggest name if user provides description instead

2. **Determine component type**: Ask what kind of component

• Interactive (buttons, forms, accordions)
• Display (cards, banners, testimonials)
• Layout (grids, containers, sections)
• Data-driven (lists, tables, charts)

3. **Identify props needed**: Based on component type, suggest props

• Text content → `props.Text()` or `props.RichText()`
• Canvas-editable text → `props.TextNode()`
• Images → `props.Image()`
• Links → `props.Link()`
• Numeric values → `props.Number()`
• Variants/styles → `props.Variant()`
• Nested content → `props.Slot()`
• Toggles → `props.Boolean()`
• Show/hide sections → `props.Visibility()`
• HTML element IDs → `props.Id()`

4. **Styling approach**: Ask preferred styling method

• CSS Modules (default, recommended)
• Tailwind CSS
• styled-components
• Emotion
• Sass / Less
• Plain CSS
• Other supported: MUI (uses Emotion), Shadcn/UI (uses Tailwind)

5. **SSR requirements**: Determine if component needs client-only features

• Uses browser APIs? → `ssr: false`
• Pure presentation? → `ssr: true` (default)

Phase 2: Validate Project Setup

6. **Check project structure**:

• Verify `webflow.json` exists
• Check for required dependencies
• Identify components directory pattern

7. **Check for conflicts**:

• Ensure component name doesn't already exist
• Verify no `.webflow.tsx` file with same name

Phase 3: Generate Files

8. **Create directory structure**:

src/components/[ComponentName]/
├── [ComponentName].tsx
├── [ComponentName].webflow.tsx
└── [ComponentName].module.css (if CSS Modules)

9. **Generate React component** (`[ComponentName].tsx`):

import React from "react";
import styles from "./[ComponentName].module.css";

export interface [ComponentName]Props {
  // Props interface based on user requirements
}

export const [ComponentName]: React.FC<[ComponentName]Props> = ({
  // Destructured props with defaults
}) => {
  return (
    <div className={styles.container}>
      {/* Component JSX */}
    </div>
  );
};

10. **Generate definition file** (`[ComponentName].webflow.tsx`):

import { declareComponent } from "@webflow/react";
import { props } from "@webflow/data-types";
import { [ComponentName] } from "./[ComponentName]";
import "./[ComponentName].module.css";

export default declareComponent([ComponentName], {
  name: "[Co