webflow-code-component:component-scaffold

コンポーネントのひな形作成

適切なファイル構成、React コンポーネント、および .webflow.tsx 定義ファイルを備えた、新しい Webflow コードコンポーネントを生成します。

このスキルを使用する場面

次の場合に使用します：

• コードコンポーネントを一から作成する場合
• ユーザーがコンポーネントのひな形作成、生成、作成を依頼した場合
• 適切な Webflow のファイル構成で新しいコンポーネントを開始する場合

次の場合は使用しないでください：

• 既存の React コンポーネントを変換する場合（convert-component スキルを使用）
• 既存のコンポーネントを変更する場合（直接回答するか、component-audit を使用）
• コンポーネントについて質問しているだけの場合（直接回答）
• カスタムバンドラー設定を含む複雑なプロジェクトをセットアップする場合（代わりに local-dev-setup を使用）

注： このスキルでは、基本的なセットアップ（webflow.json と依存関係）を自動で処理できます。Tailwind、カスタム webpack 設定、またはモノレポ構成が必要な複雑なセットアップに限り、local-dev-setup を使用してください。

手順

フェーズ 0：前提条件の確認（最初に実行）

要件を聞き取る前に、Webflow コードコンポーネント用にプロジェクトがセットアップされていることを確認します。

1. webflow.json を確認：

   # Look for webflow.json in project root
   

   • 見つからない場合：作成を提案するか、local-dev-setup スキルを呼び出します

2. package.json に必要な依存関係があるか確認：

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

   • 見つからない場合：次のコマンドでのインストールを提案します：

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

3. components ディレクトリを確認：

   • 既存のパターン（例：src/components/）を探します
   • コンポーネントがない場合は、webflow.json の設定に基づいて作成場所を決定します

4. セットアップ状況を報告：

   前提条件がすべて満たされている場合：

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

   前提条件が不足している場合：

   ⚠️ 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:
   

   クイックセットアップでは、最小限の設定を作成します：

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

   また、依存関係をインストールします。

   任意： webflow.json は、globals ファイルを指定する "globals" フィールドにも対応しています（例："globals": "./src/globals.webflow.ts"）。globals ファイルは、グローバル CSS のインポート（例：Tailwind）やデコレーター配列のエクスポートに使用します。styled-components、Emotion、または Tailwind を使用する場合に追加してください。

前提条件を確認してから、フェーズ 1 に進んでください。

---

フェーズ 1：要件の聞き取り

1. コンポーネント名を確認：ユーザーにコンポーネント名を尋ねます

   • PascalCase にする必要があります（例：「Accordion」、「ProductCard」）
   • ユーザーが名前ではなく説明を提示した場合は、名前を提案します

2. コンポーネントの種類を決定：どのような種類のコンポーネントか尋ねます

   • インタラクティブ（ボタン、フォーム、アコーディオン）
   • 表示（カード、バナー、お客様の声）
   • レイアウト（グリッド、コンテナー、セクション）
   • データ駆動型（リスト、テーブル、グラフ）

3. 必要な props を特定：コンポーネントの種類に基づいて props を提案します

   • テキストコンテンツ → props.Text() または props.RichText()
   • キャンバス上で編集可能なテキスト → props.TextNode()
   • 画像 → props.Image()
   • リンク → props.Link()
   • 数値 → props.Number()
   • バリエーション／スタイル → props.Variant()
   • ネストされたコンテンツ → props.Slot()
   • 切り替え → props.Boolean()
   • セクションの表示／非表示 → props.Visibility()
   • HTML 要素 ID → props.Id()

4. スタイリング方法：希望するスタイリング方法を尋ねます

   • CSS Modules（デフォルト、推奨）
   • Tailwind CSS
   • styled-components
   • Emotion
   • Sass / Less
   • Plain CSS
   • その他の対応技術：MUI（Emotion を使用）、Shadcn/UI（Tailwind を使用）

5. SSR 要件：クライアント専用の機能が必要かどうかを確認します

   • ブラウザー API を使用する場合 → ssr: false
   • 表示のみの場合 → ssr: true（デフォルト）

フェーズ 2：プロジェクト設定の検証

6. プロジェクト構成を確認：

   • webflow.json が存在することを確認します
   • 必要な依存関係を確認します
   • コンポーネントのディレクトリパターンを特定します

7. 競合を確認：

   • コンポーネント名が既存のものと重複しないことを確認します
   • 同じ名前の .webflow.tsx ファイルがないことを確認します

フェーズ 3：ファイルの生成

8. ディレクトリ構造を作成する：

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

9. React コンポーネントを生成する（[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. 定義ファイルを生成する（[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: "[ComponentName]",
  description: "[User-provided or generated description]",
  group: "[Category]",
  props: {
    // Props configuration based on requirements
  },
  options: {
    applyTagSelectors: true,
    ssr: true // or false based on requirements
  }
});

デコレーターに関する注意： declareComponent は、プロバイダーでコンポーネントをラップするための省略可能な decorators 配列も受け取ります。組み込みのデコレーターには、styledComponentsShadowDomDecorator（styled-components 用）と emotionShadowDomDecorator（Emotion 用）があります。グローバルデコレーターは、webflow.json で参照される globals ファイルからエクスポートできます。詳しくは、以下の globals ファイルに関する注記をご覧ください。

11. スタイルを生成する（CSS Modules を使用する場合）：

.container {
  /* Base styles */
}

フェーズ 4：ガイダンスの提示

12. 作成したファイルを表示する：作成したすべてのファイルをパスとともに一覧表示します

13. 次のステップを説明する：

    • コンポーネントのロジックを実装する
    • スタイリングを追加する
    • React プロジェクトを実行してローカルでテストする（例：npm run dev）
    • npx webflow library share で Webflow にデプロイする

14. Shadow DOM への配慮：

Note: Code components run inside Shadow DOM. Site-level CSS classes won't work
inside your component. Use component-scoped styles (CSS Modules, etc.).
Site CSS variables DO work — use var(--variable-name, fallback).

15. 命名に関する警告：

⚠️ Important: Do not rename the .webflow.tsx file after deployment.
Renaming creates a new component and breaks existing instances.

例

ユーザープロンプト：

Create an accordion component

ステップ 1：要件の確認

📦 New Component: Accordion

I'll create an accordion component. Let me confirm the requirements:

**Props to include:**
1. `title` (Text) - The accordion header text
2. `content` (Rich Text) - The expandable content
3. `defaultOpen` (Boolean) - Whether to start expanded
4. `icon` (Variant) - Chevron style: "arrow" | "plus" | "none"

**Styling:** CSS Modules (recommended for Shadow DOM)

**SSR:** Enabled (no browser-only APIs needed)

Does this look right? Any props to add or remove?

ステップ 2：ユーザーの確認後

📁 Creating Component Files...

Created:
├── src/components/Accordion/Accordion.tsx
├── src/components/Accordion/Accordion.webflow.tsx
└── src/components/Accordion/Accordion.module.css

✅ Component scaffold complete!

---

**Accordion.tsx** - React component with:
- Props: title, content, defaultOpen, icon
- State management for open/closed
- Accessible keyboard navigation
- CSS Module classes

**Accordion.webflow.tsx** - Webflow definition with:
- All props configured for Designer editing
- Default values set
- SSR enabled

---

💡 Next Steps:
1. Review and customize the generated code
2. Test locally by running your React project (e.g., `npm run dev`)
3. Deploy to Webflow: `npx webflow library share`

⚠️ Remember: Don't rename .webflow.tsx files after deployment!

生成された Accordion.tsx：

import React, { useState } from "react";
import styles from "./Accordion.module.css";

export interface AccordionProps {
  title: string;
  content: string;
  defaultOpen?: boolean;
  icon?: "arrow" | "plus" | "none";
}

export const Accordion: React.FC<AccordionProps> = ({
  title,
  content,
  defaultOpen = false,
  icon = "arrow"
}) => {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  return (
    <div className={styles.accordion}>
      <button
        className={styles.header}
        onClick={() => setIsOpen(!isOpen)}
        aria-expanded={isOpen}
      >
        <span className={styles.title}>{title}</span>
        {icon !== "none" && (
          <span className={`${styles.icon} ${isOpen ? styles.open : ""}`}>
            {icon === "arrow" ? "▼" : "+"}
          </span>
        )}
      </button>
      {isOpen && (
        <div
          className={styles.content}
          dangerouslySetInnerHTML={{ __html: content }}
        />
      )}
    </div>
  );
};

生成された Accordion.webflow.tsx：

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

export default declareComponent(Accordion, {
  name: "Accordion",
  description: "Expandable content section with customizable header and icon",
  group: "Interactive",
  props: {
    title: props.Text({
      name: "Title",
      defaultValue: "Accordion Title"
    }),
    content: props.RichText({
      name: "Content",
      defaultValue: "<p>Accordion content goes here.</p>"
    }),
    defaultOpen: props.Boolean({
      name: "Start Expanded",
      defaultValue: false
    }),
    icon: props.Variant({
      name: "Icon Style",
      options: ["arrow", "plus", "none"],
      defaultValue: "arrow"
    })
  },
  options: {
    applyTagSelectors: true,
    ssr: true
  }
});

ガイドライン

Prop の型の選択

ユーザーの要望	Prop の型	注記
編集可能なテキスト	props.Text()	1 行、最大 256 文字
書式付きの長文テキスト	props.RichText()	HTML コンテンツ
キャンバス上で編集可能なテキスト	props.TextNode()	ダブルクリックして編集
画像のアップロード	props.Image()	画像オブジェクトを返します
URL／リンク	props.Link()	{ href, target, preload } を返します
数値入力	props.Number()	数値
トグル／フラグ	props.Boolean()	true／false
スタイルのオプション	props.Variant()	ドロップダウンで選択
入れ子のコンテンツ	props.Slot()	内部に他のコンポーネントを配置
HTML ID	props.Id()	アクセシビリティ用

コンポーネントのカテゴリ（グループ）

• インタラクティブ：ボタン、フォーム、アコーディオン、タブ、モーダル
• 表示：カード、バナー、お客様の声、バッジ
• レイアウト：グリッド、コンテナー、セクション、区切り線
• ナビゲーション：メニュー、パンくずリスト、ページネーション
• メディア：ギャラリー、動画プレーヤー、カルーセル
• データ：テーブル、リスト、グラフ、カウンター

SSR の判断フロー

Set ssr: false if ANY of these apply:

1. Browser APIs — Uses window, document, localStorage, or similar
2. Dynamic/personalized content — User-specific dashboards, authenticated views, client data
3. Heavy/interactive UI — Charts, 3D scenes, maps, animation-driven elements
4. Non-deterministic output — Random numbers, time-based values, anything that renders differently server vs client

Otherwise → Keep ssr: true (default)

ファイルの命名規則

• コンポーネント名：PascalCase（ProductCard）
• ファイル名には同じ名前を使用します：ProductCard.tsx、ProductCard.webflow.tsx
• CSS Modules：ProductCard.module.css
• ディレクトリ：src/components/ProductCard/

デフォルト値のベストプラクティス

常に意味のあるデフォルト値を設定してください：

props: {
  title: props.Text({
    name: "Title",
    defaultValue: "Card Title"  // ✅ Good
  }),
  count: props.Number({
    name: "Count",
    defaultValue: 0  // ✅ Good
  })
}

次のようにはしないでください：

props: {
  title: props.Text({
    name: "Title"
    // ❌ Missing defaultValue
  })
}

エラー処理

コンポーネント名がすでに存在する場合：

⚠️ Component "Button" already exists at src/components/Button/

Options:
1. Choose a different name
2. Update existing component (use component-audit skill)
3. Delete existing and create new

Which would you like to do?

webflow.json が見つからない場合：

❌ No webflow.json found in project root

This file is required for code components. Would you like me to:
1. Create a basic webflow.json
2. Run local-dev-setup skill for full project initialization

Choose an option (1/2):

コンポーネント名が無効な場合：

⚠️ Invalid component name: "my-button"

Component names must be:
- PascalCase (e.g., "MyButton")
- Start with a letter
- Contain only letters and numbers

Suggested name: "MyButton"

Use this name? (yes/no)