webflow-mcp:flowkit-naming

Flowkit 命名システム

Webflow Designer ツールを使って、Webflow プロジェクトに FlowKit の CSS 命名規則を適用します。

重要な注意事項

すべての操作には必ず Webflow MCP ツールを使用してください。

• 作業を始める前に、Webflow MCP の webflow_guide_tool を使ってベストプラクティスを確認します
• Webflow MCP の data_sites_tool でアクション list_sites を指定し、対象サイトを特定します
• Webflow MCP の data_pages_tool でアクション list_pages を指定し、名前またはスラッグで対象ページを検索します。ヘッドレスで実行でき、Designer は不要です
• Webflow MCP の data_element_tool を使って現在のクラスを調べ、新しいクラスを適用します。ヘッドレスで実行し、ページの ID を直接渡します
• Webflow MCP の data_style_tool を使って、FlowKit に準拠したスタイルを作成、更新します。ヘッドレスで実行します
• 対応しているスタイルプロパティを確認するには、Webflow MCP の webflow_guide_tool を使います
• designer_tool を使うのは、ユーザーが Designer で現在開いているページを操作したい場合、またはキャンバス上の要素をインタラクティブに選択したい場合に限ります
• Webflow の操作には、ほかのツールや方法を使用しないでください
• すべてのツール呼び出しには、必須の context パラメーターを含めてください（15～25 語、三人称の視点）
• 基本的なワークフローに Designer への接続は不要です。 明示的なページ ID を指定すれば、ページの取得、クラスの調査、スタイルの作成、クラスの適用をすべてヘッドレスで実行できます。Designer が必要なのは、上記の任意の designer_tool の機能を使う場合のみです。

手順

フェーズ 1：調査とセットアップ

1. タスクを特定します：ユーザーが次のどれを行うのかを判断します。
   • 新しいコンポーネントクラスを作成する
   • 既存のクラス名を監査する
   • ページのセクション全体を構築する
   • FlowKit に準拠していないクラスを FlowKit にリファクタリングする
2. 対象ページを取得します：Webflow MCP の data_pages_tool でアクション list_pages を指定し、名前またはスラッグでページを検索します。Designer への接続は不要です。ユーザーが Designer で現在開いているページを操作したい場合は、代わりに designer_tool でアクション get_current_page を指定します。
3. 作業範囲を確認します：対象の要素またはセクションを確認します

フェーズ 2：分析（既存クラスを監査する場合）

4. すべての要素を取得します：Webflow MCP の data_element_tool を使って、対象ページの要素を取得します
5. クラスを抽出します：現在適用されているクラス名をすべて特定します
6. 問題を分類します：
   • fk- プレフィックスがない
   • 大文字・小文字が不適切（大文字または大文字と小文字が混在）
   • 区切り文字が不適切（ハイフンの代わりにアンダースコアを使用）
   • セマンティックではない命名
   • コンポーネント構造に一貫性がない
7. 監査レポートを作成します：現在の名前と、FlowKit に準拠した名前の候補を提示します

フェーズ 3：候補の生成

8. FlowKit のパターンを適用します：FlowKit v2 の規則に従ってクラス名を生成します
9. 種類別に構成します：
   • コンポーネントのラッパー：fk-[component]
   • 子要素：fk-[component]-[element]
   • 状態修飾子：is-[state] を使ったコンボクラス
   • レイアウトユーティリティ：fk-flex、fk-grid、fk-stack
   • 余白ユーティリティ：fk-space-[size]、fk-py-[size]、fk-px-[size]
   • タイポグラフィユーティリティ：fk-text-[style]
10. 候補を検証します：すべての候補が FlowKit の規則に従っていることを確認します
11. プレビューを表示します：候補クラスを含む階層構造を表示します

フェーズ 4：適用（ユーザーが確認した場合）

12. スタイルを作成します：Webflow MCP の data_style_tool を使って、FlowKit に準拠した新しいクラススタイルを作成します
13. 要素を更新します：Webflow MCP の data_element_tool を使って、要素にクラスを適用します
14. バッチで処理します：要素が多い場合は、10～15 個ずつ処理します
15. 進捗を表示します：更新中の要素を表示します

フェーズ 5：検証と報告

16. 適用を検証します：クラスが正しく適用されたことを確認します
17. レポートを作成します：作成または更新した内容を表示します
18. ドキュメントを提供します：使用した FlowKit の構造を説明します
19. 次のステップを提案します：追加で実装する FlowKit のパターンを提案します

FlowKit 命名リファレンス

命名の基本パターン

パターン	目的	例
fk-[component]	コンポーネントのラッパー（基底クラス）	fk-card、fk-nav、fk-hero
fk-[component]-[element]	コンポーネント内の子要素	fk-card-title、fk-nav-link
fk-[component].[modifier]	コンボクラスの修飾子（状態／バリエーション）	fk-card.is-featured
fk-text-[style]	タイポグラフィユーティリティ	fk-text-xl、fk-text-bold
fk-flex / fk-grid	レイアウトユーティリティ	fk-flex-center、fk-grid-3
fk-space-[size]	余白ユーティリティ	fk-space-md、fk-py-lg
is-[state]	状態修飾子（コンボ）	is-active、is-hidden、is-disabled

レイアウトユーティリティ

fk-section              Section wrapper with padding
fk-container            Max-width container (centered)
fk-flex                 Flexbox container
fk-flex-center          Centered flex (both axes)
fk-flex-between         Space-between flex
fk-flex-around          Space-around flex
fk-flex-col             Flex column direction
fk-grid                 Grid container (base)
fk-grid-2               2-column grid
fk-grid-3               3-column grid
fk-grid-4               4-column grid
fk-grid-6               6-column grid
fk-stack                Vertical stack (gap between items)
fk-row                  Horizontal row
fk-wrap                 Flex wrap enabled

タイポグラフィユーティリティ

fk-text-xs              Extra small text (12px)
fk-text-sm              Small text (14px)
fk-text-md              Medium text (16px - default)
fk-text-lg              Large text (18px)
fk-text-xl              Extra large text (24px)
fk-text-2xl             2x large text (32px)
fk-text-3xl             3x large text (48px)
fk-text-bold            Bold weight (700)
fk-text-semibold        Semibold weight (600)
fk-text-medium          Medium weight (500)
fk-text-light           Light weight (300)
fk-text-center          Center aligned
fk-text-left            Left aligned
fk-text-right           Right aligned
fk-text-uppercase       Uppercase transform
fk-text-lowercase       Lowercase transform
fk-text-capitalize      Capitalize transform

余白ユーティリティ

fk-space-xs             4px spacing
fk-space-sm             8px spacing
fk-space-md             16px spacing (default)
fk-space-lg             24px spacing
fk-space-xl             32px spacing
fk-space-2xl            48px spacing
fk-space-3xl            64px spacing

Directional Spacing:
fk-py-[size]            Padding vertical (top + bottom)
fk-px-[size]            Padding horizontal (left + right)
fk-pt-[size]            Padding top
fk-pb-[size]            Padding bottom
fk-pl-[size]            Padding left
fk-pr-[size]            Padding right

fk-my-[size]            Margin vertical (top + bottom)
fk-mx-[size]            Margin horizontal (left + right)
fk-mt-[size]            Margin top
fk-mb-[size]            Margin bottom
fk-ml-[size]            Margin left
fk-mr-[size]            Margin right

色のユーティリティ

fk-bg-primary           Primary background color
fk-bg-secondary         Secondary background color
fk-bg-accent            Accent background color
fk-bg-light             Light background
fk-bg-dark              Dark background
fk-text-primary         Primary text color
fk-text-secondary       Secondary text color
fk-text-muted           Muted text color

境界線とビジュアルのユーティリティ

fk-rounded              Border radius (default)
fk-rounded-sm           Small border radius
fk-rounded-lg           Large border radius
fk-rounded-full         Fully rounded (pill/circle)
fk-border               Border (1px solid)
fk-border-top           Border top only
fk-border-bottom        Border bottom only
fk-shadow               Box shadow (default)
fk-shadow-sm            Small shadow
fk-shadow-lg            Large shadow

状態修飾子（コンボクラス）

is-active               Active state (navigation, tabs)
is-hidden               Hidden visibility
is-visible              Visible visibility
is-disabled             Disabled state
is-loading              Loading state
is-error                Error state
is-success              Success state
is-primary              Primary variant
is-secondary            Secondary variant
is-featured             Featured/highlighted variant
is-horizontal           Horizontal layout variant
is-vertical             Vertical layout variant

例

例 1：ヒーローセクションの作成

ユーザーのプロンプト：

Build a hero section with FlowKit naming

ステップ 1：分析

🎨 FlowKit Hero Section Structure

I'll create a hero section following FlowKit v2 conventions.

Structure:
fk-section (wrapper with padding)
└── fk-container (max-width container)
    └── fk-hero (component wrapper)
        ├── fk-hero-content + fk-flex + fk-flex-col + fk-flex-center
        │   ├── fk-hero-eyebrow + fk-text-sm + fk-text-uppercase + fk-mb-sm
        │   ├── fk-hero-title + fk-text-3xl + fk-text-bold + fk-mb-md
        │   ├── fk-hero-subtitle + fk-text-lg + fk-text-muted + fk-mb-lg
        │   └── fk-hero-actions + fk-flex + fk-space-md
        │       ├── fk-button.is-primary
        │       └── fk-button.is-secondary
        └── fk-hero-image + fk-rounded-lg

Total classes to create: 12 base classes + 2 combo classes
Ready to create these in Webflow Designer? (yes/no)

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

🔄 Creating FlowKit Hero Classes...

Progress: ████████████████████ 100% (14/14 classes)

✅ Classes Created:

**Layout Classes:**
- ✅ fk-section - Section wrapper with padding
- ✅ fk-container - Max-width container
- ✅ fk-hero - Hero component wrapper

**Element Classes:**
- ✅ fk-hero-content - Hero content container
- ✅ fk-hero-eyebrow - Small label above title
- ✅ fk-hero-title - Main hero heading
- ✅ fk-hero-subtitle - Supporting text
- ✅ fk-hero-actions - Button container
- ✅ fk-hero-image - Hero image wrapper

**Utility Classes:**
- ✅ fk-flex, fk-flex-col, fk-flex-center
- ✅ fk-text-sm, fk-text-lg, fk-text-3xl
- ✅ fk-text-uppercase, fk-text-bold, fk-text-muted
- ✅ fk-mb-sm, fk-mb-md, fk-mb-lg
- ✅ fk-space-md, fk-rounded-lg

**Component Classes:**
- ✅ fk-button (with combo classes: is-primary, is-secondary)

---

📋 Usage Guide:

1. Create a Section element → Apply `fk-section`
2. Add Container inside → Apply `fk-container`
3. Add Div inside → Apply `fk-hero`
4. Build content structure following the hierarchy above
5. Use combo classes for button variants: `fk-button.is-primary`

🎉 Your FlowKit hero section structure is ready!

例 2：既存のクラスの監査

ユーザーのプロンプト：

Check these classes: feature-card, FK-Button, fk_hero_title, cardTitle

回答：

📋 FlowKit Audit Report

Checking 4 classes against FlowKit v2 conventions...

---

## Issues Found: 4

### 1. `feature-card` ⚠️
**Issue:** Missing FlowKit prefix
**Reason:** All FlowKit classes must start with `fk-`
**Suggested:** `fk-feature-card` or `fk-card.is-feature`
**Fix:** Rename class to include `fk-` prefix

### 2. `FK-Button` ❌
**Issue:** Incorrect case (uppercase)
**Reason:** FlowKit uses lowercase only
**Suggested:** `fk-button`
**Fix:** Convert to lowercase: `fk-button`

### 3. `fk_hero_title` ❌
**Issue:** Wrong separator (underscore)
**Reason:** FlowKit uses hyphens, not underscores
**Suggested:** `fk-hero-title`
**Fix:** Replace underscores with hyphens

### 4. `cardTitle` ❌
**Issue:** Multiple violations
  - Missing `fk-` prefix
  - CamelCase instead of kebab-case
**Reason:** FlowKit requires `fk-` prefix and hyphen separation
**Suggested:** `fk-card-title`
**Fix:** Add prefix and convert to kebab-case

---

## FlowKit Naming Rules:

✅ **Correct patterns:**
- `fk-card` (component)
- `fk-card-title` (element)
- `fk-button.is-primary` (with modifier)
- `fk-text-xl` (utility)

❌ **Incorrect patterns:**
- `card` (no prefix)
- `FK-Card` (wrong case)
- `fk_card` (wrong separator)
- `cardTitle` (camelCase)

Would you like me to rename these classes in Webflow Designer? (yes/no)

例 3：カードコンポーネントの構築

ユーザーのプロンプト：

Create a product card component with FlowKit classes

回答：

🎨 FlowKit Product Card Component

Structure:
fk-card (base component)
├── fk-card-image-wrapper
│   └── fk-card-image + fk-rounded-lg
├── fk-card-badge + fk-text-xs + fk-text-uppercase + fk-bg-accent
├── fk-card-content + fk-space-md
│   ├── fk-card-category + fk-text-sm + fk-text-muted
│   ├── fk-card-title + fk-text-lg + fk-text-bold
│   ├── fk-card-description + fk-text-md
│   └── fk-card-price + fk-text-xl + fk-text-bold + fk-text-primary
└── fk-card-footer + fk-flex + fk-flex-between + fk-pt-md + fk-border-top
    ├── fk-card-rating + fk-flex + fk-space-xs
    └── fk-button.is-primary + fk-text-sm

---

## Variants (Combo Classes):

### Featured Card
`fk-card.is-featured`
- Highlighted border/shadow
- Accent background
- Use for promoted products

### Horizontal Layout
`fk-card.is-horizontal`
- Side-by-side image/content
- Better for list views
- Image on left, content on right

### Compact Size
`fk-card.is-compact`
- Reduced padding
- Smaller text sizes
- Use in tight layouts

---

## Responsive Modifiers:

Desktop (default):
- `fk-grid-3` (3 cards per row)

Tablet:
- Add combo: `fk-grid-3.tablet-2`

Mobile:
- Add combo: `fk-grid-3.tablet-2.mobile-1`

---

Ready to create these classes? (yes/no)

例 4：FlowKit へのリファクタリング

ユーザーのプロンプト：

Refactor my navigation to use FlowKit naming

ステップ 1：現在の分析

🔍 Analyzing Current Navigation Classes...

Found 8 elements with non-FlowKit classes:
├── navbar → fk-nav
├── navbar-container → fk-nav-container
├── logo-wrapper → fk-nav-logo
├── menu → fk-nav-menu
├── menu-item → fk-nav-link
├── menu-item active → fk-nav-link.is-active
├── button-group → fk-nav-actions
└── btn-primary → fk-button.is-primary

---

## Migration Plan:

**Phase 1: Create FlowKit Classes** (8 classes)
- Create all `fk-nav-*` classes
- Create utility classes: `fk-flex`, `fk-flex-between`, `fk-flex-center`
- Create `fk-button` with `is-primary` modifier

**Phase 2: Update Elements** (8 elements)
- Replace old classes with new FlowKit classes
- Apply combo classes where needed
- Preserve existing styles

**Phase 3: Cleanup** (optional)
- Old classes can be removed after verification
- Keep for now to maintain backwards compatibility

---

Proceed with migration? (yes/no)

ステップ 2：移行後

✅ Navigation Refactored to FlowKit

**Classes Created:** 8
**Elements Updated:** 8
**Time elapsed:** ~3 seconds

---

## Updated Structure:

fk-nav
├── fk-nav-container + fk-flex + fk-flex-between
│   ├── fk-nav-logo
│   ├── fk-nav-menu + fk-flex + fk-flex-center + fk-space-md
│   │   ├── fk-nav-link (x5)
│   │   └── fk-nav-link.is-active (current page)
│   └── fk-nav-actions + fk-flex + fk-space-sm
│       ├── fk-button.is-secondary
│       └── fk-button.is-primary

---

## Before → After:

| Old Class | New FlowKit Class |
|-----------|-------------------|
| navbar | fk-nav ✅ |
| navbar-container | fk-nav-container ✅ |
| logo-wrapper | fk-nav-logo ✅ |
| menu | fk-nav-menu ✅ |
| menu-item | fk-nav-link ✅ |
| menu-item active | fk-nav-link.is-active ✅ |
| button-group | fk-nav-actions ✅ |
| btn-primary | fk-button.is-primary ✅ |

---

🎉 Navigation is now FlowKit compliant!

**Next steps:**
- Test navigation on all breakpoints
- Verify active states work correctly
- Consider adding `fk-nav.is-transparent` for transparent header variant
- Consider adding `fk-nav.is-sticky` for sticky navigation

ガイドライン

フェーズ 1：重要な要件

FlowKit のプレフィックスルール：

• すべてのコンポーネントクラスと要素クラスは、必ず fk- で始めます
• 例外：状態修飾子には is- プレフィックスを使用します（コンボクラスとして）
• 例外：サードパーティの統合に使うユーティリティクラスは、プレフィックスを省略できます

大文字と小文字の区別：

• すべてのクラス名は小文字のみを使用します
• 大文字は一切使用しません
• キャメルケースやパスカルケースは使用しません

区切り文字のルール：

• 単語の区切りにはハイフン（-）を使用します
• アンダースコア（_）は使用しません
• スペースや特殊文字は使用しません

命名構造：

Component:        fk-[component]
Element:          fk-[component]-[element]
Sub-element:      fk-[component]-[element]-[detail]
Utility:          fk-[property]-[value]
State modifier:   is-[state] (combo class only)
Responsive:       .[breakpoint]-[value] (combo class)

フェーズ 2：コンポーネントの命名規則

コンポーネント名：

• 簡潔で意味が明確な名前にします
• card、nav、hero、footer など、一般的な Web コンポーネントの用語を使用します
• 過度に具体的な名前は避けます。fk-product-feature-card より fk-card を優先します
• バリエーションには修飾子を使用します。fk-card-featured ではなく fk-card.is-featured とします

要素の階層：

• 親コンポーネント：fk-card
• 直接の子要素：fk-card-[element]（例：fk-card-title）
• 深いネスト：3 階層を超えないようにします
• 悪い例：fk-card-content-section-text-wrapper
• 良い例：fk-card-content、fk-card-text

一般的なコンポーネントのパターン：

カード：

fk-card
├── fk-card-image
├── fk-card-content
│   ├── fk-card-title
│   └── fk-card-text
└── fk-card-footer

ナビゲーション：

fk-nav
├── fk-nav-logo
├── fk-nav-menu
│   └── fk-nav-link
└── fk-nav-actions

ヒーロー：

fk-hero
├── fk-hero-content
│   ├── fk-hero-title
│   ├── fk-hero-subtitle
│   └── fk-hero-actions
└── fk-hero-media

フォーム：

fk-form
├── fk-form-group
│   ├── fk-form-label
│   └── fk-form-input
└── fk-form-actions

フェーズ 3：ユーティリティクラス

ユーティリティの命名：

• 形式：fk-[property]-[value]
• 例：fk-text-lg、fk-space-md、fk-grid-3

余白ユーティリティ：

• T シャツサイズを使用します：xs、sm、md、lg、xl、2xl、3xl
• 方向：py（垂直）、px（水平）、pt（上）、pr（右）、pb（下）、pl（左）
• マージンも同様です：my、mx、mt、mr、mb、ml

タイポグラフィユーティリティ：

• サイズ：fk-text-[xs|sm|md|lg|xl|2xl|3xl]
• 太さ：fk-text-[light|medium|semibold|bold]
• 配置：fk-text-[left|center|right]
• 変換：fk-text-[uppercase|lowercase|capitalize]

レイアウトユーティリティ：

• Flexbox：fk-flex、fk-flex-col、fk-flex-center、fk-flex-between
• Grid：fk-grid、fk-grid-2、fk-grid-3、fk-grid-4、fk-grid-6
• コンテナ：fk-container、fk-section

フェーズ 4：状態修飾子（コンボクラス）

状態修飾子のルール：

• 常に is- プレフィックスを付けたコンボクラスとして使用します
• ベースクラスに追加して適用します
• 例：<div class="fk-button is-primary">...</div>

一般的な状態：

is-active           Currently active/selected
is-disabled         Disabled interaction
is-hidden           Hidden visibility
is-visible          Visible (override hidden)
is-loading          Loading state
is-error            Error state
is-success          Success state
is-primary          Primary variant
is-secondary        Secondary variant
is-tertiary         Tertiary variant
is-featured         Featured/highlighted
is-horizontal       Horizontal layout
is-vertical         Vertical layout
is-expanded         Expanded state (accordions, dropdowns)
is-collapsed        Collapsed state

Webflow でのコンボクラスの適用方法：

1. 要素を選択します
2. ベースクラスを追加します：fk-button
3. コンボクラスを追加します：is-primary
4. 要素には両方のクラスが設定されます：fk-button is-primary
5. コンボクラスにスタイルを設定します：.fk-button.is-primary { ... }

フェーズ 5：レスポンシブデザイン

レスポンシブ修飾子：

• FlowKit では、レスポンシブな動作にコンボクラスを使用します
• 形式：.[breakpoint]-[value]
• 例：fk-grid-4.tablet-2.mobile-1

ブレークポイント：

Desktop (default):   No modifier needed
Tablet:              .tablet-[value]
Mobile:              .mobile-[value]

レスポンシブグリッドの例：

Base: fk-grid-4 (4 columns on desktop)
+ Combo: .tablet-2 (2 columns on tablet)
+ Combo: .mobile-1 (1 column on mobile)

Result: <div class="fk-grid-4 tablet-2 mobile-1">

レスポンシブテキストの例：

Base: fk-text-3xl (48px on desktop)
+ Combo: .tablet-2xl (32px on tablet)
+ Combo: .mobile-xl (24px on mobile)

Result: <div class="fk-text-3xl tablet-2xl mobile-xl">

フェーズ 6：ベストプラクティス

必ず守ること：

• ✅ すべてのコンポーネントと要素に fk- プレフィックスを使用します
• ✅ 単語の区切りにはハイフンを使用します
• ✅ 小文字のみを使用します
• ✅ コンポーネント名は意味が明確で簡潔なものにします
• ✅ 修飾子と状態にはコンボクラスを使用します
• ✅ ユーティリティは自由に組み合わせます（fk-flex fk-flex-center fk-space-md）
• ✅ コンポーネントと要素の階層に従います
• ✅ ブレークポイントにはレスポンシブコンボクラスを使用します

絶対にしないこと：

• ❌ コンポーネントから fk- プレフィックスを省略する
• ❌ アンダースコアやスペースを使用する
• ❌ 大文字やキャメルケースを使用する
• ❌ 過度に具体的なクラス名を作成する
• ❌ 要素を3階層より深くネストする
• ❌ FlowKit と他の命名規則を混在させる
• ❌ 独立した修飾子クラスを作成する（コンボクラスを使用します）

コンポーネントとユーティリティ：

次の場合はコンポーネントを使用します：

• 再利用可能な UI パターン（カード、ボタン、ナビゲーション）を構築するとき
• 意味的な名前が必要なとき
• サイト全体で複数のインスタンスを使用するとき
• 例：fk-card、fk-nav、fk-hero

次の場合はユーティリティを使用します：

• 単一目的のスタイル（間隔、タイポグラフィ、レイアウト）を適用するとき
• 新しいクラスを作成せずにすばやく調整するとき
• サイト全体で間隔やサイズを一貫させるとき
• 例：fk-text-lg、fk-space-md、fk-flex-center

ユーティリティの組み合わせ： ユーティリティは自由に組み合わせられます：

<div class="fk-flex fk-flex-center fk-space-md fk-py-lg">
  Content
</div>

コンポーネントとユーティリティの組み合わせ：

<div class="fk-card fk-shadow-lg fk-rounded-lg">
  <div class="fk-card-content fk-space-lg">
    <h3 class="fk-card-title fk-text-xl fk-text-bold">Title</h3>
  </div>
</div>

フェーズ 7：よくある間違いと修正方法

間違い 1：プレフィックスがない

❌ card, button, nav
✅ fk-card, fk-button, fk-nav

間違い 2：大文字・小文字が誤っている

❌ FK-Card, fk-Button, Fk-nav
✅ fk-card, fk-button, fk-nav

間違い 3：区切り文字が誤っている

❌ fk_card_title, fk.card.title
✅ fk-card-title

間違い 4：キャメルケース／パスカルケース

❌ fkCardTitle, FkCardTitle
✅ fk-card-title

間違い 5：修飾子を独立したクラスとして使用

❌ <div class="fk-button-primary">
✅ <div class="fk-button is-primary">

間違い 6：ネストが深すぎる

❌ fk-hero-content-wrapper-section-title-text
✅ fk-hero-content, fk-hero-title

間違い 7：名前が具体的すぎる

❌ fk-product-feature-card-with-image-and-price
✅ fk-card (use combo: is-product)

間違い 8：レスポンシブパターンが誤っている

❌ fk-grid-3-tablet-2 (single class)
✅ fk-grid-3 tablet-2 (two classes)

フェーズ 8：FlowKit のバージョンに関する注意事項

FlowKit v2（現行）：

• 新しい命名規則（ここに記載）
• レスポンシブコンボを備えた拡張グリッドシステム
• ユーティリティコレクションの拡充
• コンポーネントライブラリの改善
• 変数システムの改善

v2 の主な変更点：

• すべてのコンポーネントで fk- プレフィックスを標準化
• 状態修飾子（コンボクラス）に is- プレフィックスを導入
• レスポンシブコンボクラス（.tablet-、.mobile-）を追加
• 間隔のスケールを拡張（xs から 3xl）
• より意味的なユーティリティ名

v1 からの移行： v1 の FlowKit クラスを使用している場合：

1. fk- プレフィックスがない箇所に追加します
2. 修飾子を is- コンボクラスに変換します
3. レスポンシブクラスをコンボ形式に更新します
4. 間隔ユーティリティが新しいスケールに対応しているか確認します

フェーズ 9：パフォーマンスの最適化

クラスの作成：

• まず基本コンポーネントクラスを作成します
• 次に要素クラスを作成します
• 最後にユーティリティクラスを作成します
• data_style_tool は一度に10～15クラスずつ使用します

要素の更新：

• 要素は10～15個ずつグループに分けて処理します
• 大規模なバッチでは進捗を表示します
• 要素が50個を超える場合は、バッチサイズをユーザーに確認します

Designer への接続（オプションの designer_tool 便利機能を使用する場合のみ）：

• クラスの確認、スタイルの作成、要素の更新（data_element_tool、data_style_tool）に Designer は必要ありません。これは、ユーザーが Designer で現在開いているページを操作するよう依頼した場合、または要素を対話的に選択する場合にのみ適用されます
• バッチ処理の途中で接続が切れた場合は、次の designer_tool アクションを実行する前に一時停止し、再接続するようユーザーに依頼します
• バッチごとに進捗を保存します

フェーズ 10：エラー処理

よくあるエラー：

1. Designer に接続されていない（designer_tool を使用する場合のみ該当）：

❌ Error: Cannot get current page or select elements - Designer not connected

Solution:
1. Open Webflow Designer
2. Open the target site
3. Connect to Designer in Claude Code
4. Retry operation

(Not needed for the default headless workflow — use `data_pages_tool` with `list_pages` instead.)

2. クラスがすでに存在する：

⚠️ Warning: Class 'fk-button' already exists

Options:
1. Skip creation (use existing)
2. Update existing class
3. Create with different name

3. クラス名が無効：

❌ Error: Class name 'fk-My Button' is invalid

Issues:
- Contains spaces
- Contains uppercase

Suggested: 'fk-my-button'

4. スタイルプロパティがサポートされていない：

⚠️ Warning: Property 'custom-property' not supported

This may be:
- Custom CSS property
- Webflow doesn't support via Designer API
- Typo in property name

Recommendation: Apply manually in Designer

エッジケース

ケース 1：サードパーティ連携クラス サードパーティライブラリ（アニメーション、スライダーなど）と連携する場合：

• サードパーティのクラスは分けておきます
• FlowKit のラッパーを追加します：<div class="fk-slider"><div class="swiper">...</div></div>
• サードパーティのクラスに FlowKit の命名を強制しないでください

ケース 2：レガシーコードの移行 既存の大規模サイトを移行する場合：

• まず FlowKit クラスを作成します
• 新しいセクションに適用します
• 古いセクションを徐々にリファクタリングします
• 後方互換性のため、両方のシステムを一時的に併用します

ケース 3：独自の命名要件 クライアントに既存の命名システムがある場合：

• FlowKit のメリットを説明します
• 並べて比較した例を提示します
• ハイブリッド方式を提案します：新しいコンポーネントには FlowKit を使い、既存のコンポーネントには従来の方式を維持します
• または全面的にリファクタリングします（時間はかかりますが、長期的にはより効果的です）

ケース 4：コンポーネントライブラリの競合 サイトで別のフレームワーク（Bootstrap、Tailwind）を使用している場合：

• FlowKit は併用できますが、推奨はされません
• 主となるシステムを 1 つ選びます
• カスタムコンポーネントには FlowKit を使います
• あらかじめ用意されたコンポーネントには別のフレームワークを使います

ケース 5：ユーティリティクラスの増えすぎ 1 つの要素にユーティリティクラスが多すぎる場合：

• 代わりにコンポーネントクラスを作成することを検討します
• 例：fk-flex fk-flex-center fk-space-md fk-py-lg fk-px-xl fk-rounded-lg fk-shadow の代わりに
• 次のように作成します：fk-panel にこれらのプロパティを組み込みます

本番環境用チェックリスト

FlowKit の実装が完了したと判断する前に、以下を確認します。

セットアップ：

• 対象サイトを特定済み
• 対象ページを確認済み（data_pages_tool の list_pages を使用するか、現在開いているページを使用する場合は designer_tool を使用）
• ユーザーと範囲を定義済み

コンポーネント構造：

• すべてのコンポーネントが fk- プレフィックスを使用
• コンポーネント階層が論理的（最大 3 階層）
• 要素名がセマンティック
• モディファイアが is- プレフィックス付きのコンボクラスを使用

ユーティリティ：

• スペーシングユーティリティが T シャツサイズ（xs-3xl）を使用
• タイポグラフィユーティリティがすべてのテキストスタイルを網羅
• レイアウトユーティリティが flex/grid のニーズに対応
• カラーユーティリティがブランドに適合

レスポンシブ対応：

• 主要なコンポーネントにレスポンシブコンボクラスを定義済み
• ブレークポイントのモディファイアをテスト済み（タブレット、モバイル）
• グリッドシステムが適切に調整

状態：

• 状態モディファイアを定義済み（is-active、is-disabled など）
• ホバー／フォーカス状態が正しく動作
• アクティブ状態が適切にスタイル設定

ドキュメント：

• コンポーネント構造を文書化済み
• ユーティリティクラスを一覧化済み
• レスポンシブ動作を説明済み
• 状態モディファイアを文書化済み

検証：

• すべてのクラスが命名規則に準拠
• 大文字を使用していない
• アンダースコアを使用していない
• すべてに適切なプレフィックスが付いている

パフォーマンス：

• クラスをまとめて作成
• 大規模な操作では進捗を表示
• クラスを重複して作成していない

ユーザーエクスペリエンス：

• 明確なフィードバックを提供
• 進捗インジケーターを表示
• 完了を確認
• 次のステップを提案