# Webflow Mcp:cms Collection Setup

> Create a new CMS collection in Webflow with specified fields and relationships. Use when setting up blog posts, products, team members, portfolios, or other content types with custom fields.

- **Type:** Skill
- **Install:** `agentstack add skill-webflow-webflow-skills-cms-collection-setup`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [webflow](https://agentstack.voostack.com/s/webflow)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [webflow](https://github.com/webflow)
- **Source:** https://github.com/webflow/webflow-skills/tree/main/plugins/webflow-skills/skills/cms-collection-setup

## Install

```sh
agentstack add skill-webflow-webflow-skills-cms-collection-setup
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# CMS Collection Setup

Create a new CMS collection with custom fields, relationships, and proper configuration.

## Important Note

**ALWAYS use Webflow MCP tools for all operations:**
- Use Webflow MCP's `webflow_guide_tool` to get best practices before starting
- Use Webflow MCP's `data_sites_tool` with action `list_sites` to identify available sites
- Use Webflow MCP's `data_sites_tool` with action `get_site` to retrieve site details and plan limits
- Use Webflow MCP's `data_cms_tool` with action `get_collection_list` to check for naming conflicts
- Use Webflow MCP's `data_cms_tool` with action `create_collection` to create the collection
- Use Webflow MCP's `data_cms_tool` with action `create_collection_static_field` to create static fields
- Use Webflow MCP's `data_cms_tool` with action `create_collection_option_field` to create option fields
- Use Webflow MCP's `data_cms_tool` with action `create_collection_reference_field` to create reference/multi-reference fields
- Use Webflow MCP's `data_cms_tool` with action `get_collection_details` to verify collection was created correctly
- DO NOT use any other tools or methods for Webflow operations
- All tool calls must include the required `context` parameter (15-25 words, third-person perspective)

## Instructions

### Phase 1: Site Selection & Discovery
1. **Get site information**: Use Webflow MCP's `data_sites_tool` with action `list_sites` to identify target site
2. **Confirm site**: Ask user to select site if multiple available
3. **Check plan limits**: Use Webflow MCP's `data_sites_tool` with action `get_site` to verify collection limits
4. **List existing collections**: Use Webflow MCP's `data_cms_tool` with action `get_collection_list` to check for conflicts
5. **Validate naming**: Ensure new collection name doesn't conflict with existing

### Phase 2: Requirements Gathering
6. **Get collection details**: Ask user for:
   - Collection display name (e.g., "Blog Posts")
   - Singular name (e.g., "Blog Post")
   - Optional: Custom slug (default: auto-generated from display name)
7. **Get field definitions**: For each field, gather:
   - Field name (e.g., "Author Name", "Publish Date")
   - Field type (Text, Rich Text, Image, Option, Reference, etc.)
   - Required vs optional
   - Any validation rules or help text
8. **Identify relationships**: Determine if collection needs:
   - Reference fields (one-to-many relationships)
   - Multi-reference fields (many-to-many relationships)
   - Option fields (controlled vocabulary)

### Phase 3: Schema Validation & Planning
9. **Validate field types**: Check all field types are supported
10. **Check field limits**: Ensure within Webflow limits:
    - Max fields per collection: varies by plan
    - Max 5 multi-reference fields per collection
11. **Plan creation order**: Organize fields by dependency:
    - Create collections in order if references exist
    - Create referenced collections first
    - Create option fields before reference fields
12. **Generate preview**: Show complete schema with all fields

### Phase 4: User Approval
13. **Show complete preview**: Display:
    - Collection name and slug
    - All fields with types and properties
    - Any relationships to other collections
    - Plan limit verification
14. **Validate schema**: Check for common issues:
    - Missing required fields (name, slug always required)
    - Invalid field types
    - Reference to non-existent collections
    - Exceeding plan limits
15. **Request confirmation**: Wait for explicit "create" approval

### Phase 5: Collection Creation
16. **Create collection**: Use Webflow MCP's `data_cms_tool` with action `create_collection` with:
    - Display name
    - Singular name
    - Optional slug
17. **Capture collection ID**: Save for field creation
18. **Show progress**: Report collection created successfully

### Phase 6: Field Creation
19. **Create fields in order**: For each field:
    - Use appropriate creation tool based on type
    - Static fields: `data_cms_tool` with action `create_collection_static_field`
    - Option fields: `data_cms_tool` with action `create_collection_option_field`
    - Reference fields: `data_cms_tool` with action `create_collection_reference_field`
20. **Set field properties**:
    - Display name
    - Required flag
    - Help text (if provided)
    - Validation rules (if applicable)
21. **Show progress**: Report each field created
22. **Handle errors**: If field creation fails, report and continue

### Phase 7: Verification & Reporting
23. **Verify collection**: Use Webflow MCP's `data_cms_tool` with action `get_collection_details` to retrieve full schema
24. **Confirm all fields**: Check that all requested fields were created
25. **Generate report**: Show:
    - Collection ID
    - Collection name and slug
    - All fields created with IDs
    - Any failures or warnings
26. **Provide next steps**: Suggest:
    - Use bulk-cms-update to add initial items
    - Create collection pages in Designer
    - Set up relationships if applicable

## Field Type Reference

### Static Field Types

**PlainText** - Short text (max 256 chars) or long text
- Use for: Titles, names, descriptions, excerpts
- Properties: maxLength validation (256 for short)
- Example: "Title", "Author Name", "Excerpt"

**RichText** - Formatted text with HTML
- Use for: Blog content, bios, articles, long descriptions
- Properties: No length limit
- Example: "Post Content", "Bio", "Description"

**Email** - Email address
- Use for: Contact emails, author emails
- Properties: Email format validation
- Example: "Contact Email", "Author Email"

**Phone** - Phone number
- Use for: Contact numbers
- Properties: E.164 format
- Example: "Phone Number", "Mobile"

**Link** - External URL or internal link
- Use for: Website links, social media, external resources
- Properties: URL validation
- Example: "Website", "LinkedIn Profile"

**Number** - Numeric values
- Use for: Prices, ratings, counts, order numbers
- Properties: Integer or decimal
- Example: "Price", "Rating", "Order"

**Image** - Single image
- Use for: Featured images, photos, thumbnails
- Properties: Max 4MB per image
- Example: "Featured Image", "Photo", "Thumbnail"

**MultiImage** - Multiple images (up to 25)
- Use for: Galleries, product photos
- Properties: Max 25 images, 4MB each
- Example: "Gallery", "Product Photos"

**File** - File upload
- Use for: PDFs, documents, downloads
- Properties: Max 4MB per file
- Example: "Resume PDF", "Brochure", "Manual"

**Video** - Video embed (YouTube/Vimeo)
- Use for: Video content
- Properties: Embed URL
- Example: "Tutorial Video", "Demo"

**DateTime** - Date and/or time
- Use for: Publish dates, event dates, deadlines
- Properties: ISO 8601 format
- Example: "Publish Date", "Event Date"

**Switch** - Boolean (true/false)
- Use for: Featured flags, visibility toggles
- Properties: Boolean value
- Example: "Featured", "Published", "Active"

**Color** - Color value
- Use for: Theme colors, accents, brand colors
- Properties: Hex format
- Example: "Brand Color", "Accent Color"

### Option Field Type

**Option** - Single choice from predefined list
- Use for: Status, category, type, priority
- Properties: List of option names
- Example: "Status" (Draft, Review, Published)
- Creation: Use `data_cms_tool` with action `create_collection_option_field` with options array

**Example:**
```json
{
  "type": "Option",
  "displayName": "Status",
  "metadata": {
    "options": [
      {"name": "Draft"},
      {"name": "In Review"},
      {"name": "Published"}
    ]
  }
}
```

### Reference Field Types

**Reference** - Link to one item in another collection (one-to-many)
- Use for: Author → Post, Category → Post, Brand → Product
- Properties: Collection ID of referenced collection
- Example: "Author" (reference to Authors collection)
- Creation: Use `data_cms_tool` with action `create_collection_reference_field` with collectionId

**MultiReference** - Link to multiple items in another collection (many-to-many)
- Use for: Post → Tags, Product → Features, Project → Technologies
- Properties: Collection ID of referenced collection
- Limit: Max 5 multi-reference fields per collection
- Example: "Tags" (reference to Tags collection)
- Creation: Use `data_cms_tool` with action `create_collection_reference_field` with collectionId

**Reference Field Example:**
```json
{
  "type": "Reference",
  "displayName": "Author",
  "metadata": {
    "collectionId": "abc123..."
  }
}
```

**Multi-Reference Field Example:**
```json
{
  "type": "MultiReference",
  "displayName": "Tags",
  "metadata": {
    "collectionId": "xyz789..."
  }
}
```

## Examples

### Example 1: Simple Blog Collection

**User prompt:**
```
Create a Blog Posts collection with title, content, author, and publish date
```

**Step 1: Discovery**
```
🔍 CMS Collection Setup

Available sites:
1. Company Website
2. Blog Site

Which site? (1/2)
```

**Step 2: After User Selects Site**
```
📊 Existing Collections on Company Website:

Currently: 0 collections
Plan limit: 20 collections (CMS Plan)

✅ You have capacity to create new collections.

---

📋 Collection Requirements

Display Name: Blog Posts
Singular Name: Blog Post
Slug: blog-posts (auto-generated)

Fields to create:
1. Title - Text (required)
2. Content - Rich Text (required)
3. Author - Text
4. Publish Date - Date/Time (required)

Is this correct? (yes/no)
If you want to add/modify fields, describe the changes.
```

**Step 3: Preview**
```
📋 Preview: Create "Blog Posts" Collection

Collection:
├── Display Name: Blog Posts
├── Singular Name: Blog Post
├── Slug: blog-posts
└── Site: Company Website

Fields (6 total):
├── name (PlainText, required) ← Auto-created
├── slug (PlainText, required) ← Auto-created
├── title (PlainText, required)
├── content (RichText, required)
├── author (PlainText)
└── publish-date (DateTime, required)

✅ Validation Passed:
- Collection name available
- Within plan limits (0/20 collections)
- All field types valid
- No dependency issues

⚠️ Type "create" to proceed.
```

**Step 4: Creation**
```
🔄 Creating Collection...

✅ Collection created: Blog Posts (ID: 64f1a2b3...)

Adding fields...
├── ✅ title (PlainText)
├── ✅ content (RichText)
├── ✅ author (PlainText)
└── ✅ publish-date (DateTime)

Progress: ████████████████████ 100% (4/4 fields)

🎉 Collection Setup Complete!

Collection: Blog Posts
ID: 64f1a2b3...
Fields: 6 (2 auto-created + 4 custom)

---

💡 Next Steps:
1. Use bulk-cms-update to add initial blog posts
2. Create collection template page in Designer
3. Set up collection list page for blog index
4. Configure SEO settings for dynamic pages
```

### Example 2: Collection with Relationships

**User prompt:**
```
Create a Products collection with name, price, description, images, brand, and tags
```

**Step 1: After Initial Gathering**
```
📋 Collection Analysis

I see you want:
- Brand: This should be a reference field
- Tags: This should be a multi-reference field

This requires creating additional collections first:
1. Brands collection
2. Tags collection

Then we can create Products with references to them.

Would you like me to:
A) Create all three collections (Brands, Tags, Products)
B) Just create Products (you'll add relationships later)
C) Modify the requirements

Your choice? (A/B/C)
```

**Step 2: After User Selects "A"**
```
📋 Preview: Create 3 Collections

---

### 1. Brands Collection

Fields (4 total):
├── name (PlainText, required) ← Auto
├── slug (PlainText, required) ← Auto
├── logo (Image)
└── description (PlainText)

---

### 2. Tags Collection

Fields (3 total):
├── name (PlainText, required) ← Auto
├── slug (PlainText, required) ← Auto
└── color (Color)

---

### 3. Products Collection

Fields (9 total):
├── name (PlainText, required) ← Auto
├── slug (PlainText, required) ← Auto
├── price (Number, required)
├── description (RichText)
├── images (MultiImage)
├── brand (Reference → Brands)
└── tags (MultiReference → Tags)

---

Creation Order:
1. Brands (no dependencies)
2. Tags (no dependencies)
3. Products (references 1 & 2)

✅ Validation:
- All collections available
- Within plan limits (0/20 collections)
- Multi-reference limit: 1/5 ✅
- All dependencies resolvable

⚠️ Type "create" to proceed with all 3 collections.
```

**Step 3: Creation**
```
🔄 Creating Collections...

[1/3] Creating Brands...
✅ Brands collection created (ID: abc123...)
├── ✅ logo (Image)
└── ✅ description (PlainText)

[2/3] Creating Tags...
✅ Tags collection created (ID: def456...)
└── ✅ color (Color)

[3/3] Creating Products...
✅ Products collection created (ID: ghi789...)
├── ✅ price (Number)
├── ✅ description (RichText)
├── ✅ images (MultiImage)
├── ✅ brand (Reference → Brands)
└── ✅ tags (MultiReference → Tags)

Progress: ████████████████████ 100% (3/3 collections)

🎉 All Collections Created!

Summary:
├── Brands (ID: abc123...)
├── Tags (ID: def456...)
└── Products (ID: ghi789...)

---

💡 Next Steps:
1. Add brand items first (use bulk-cms-update)
2. Add tag items (use bulk-cms-update)
3. Then add products with brand/tag references
4. Create collection pages in Designer
```

### Example 3: Team Members with Option Field

**User prompt:**
```
Create a Team Members collection with name, role (dropdown: Designer, Developer, Manager), bio, photo, email
```

**Step 1: Preview**
```
📋 Preview: Create "Team Members" Collection

Collection:
├── Display Name: Team Members
├── Singular Name: Team Member
└── Slug: team-members

Fields (7 total):
├── name (PlainText, required) ← Auto
├── slug (PlainText, required) ← Auto
├── role (Option, required)
│   Options:
│   ├── Designer
│   ├── Developer
│   └── Manager
├── bio (RichText)
├── photo (Image)
└── email (Email)

✅ Validation Passed

⚠️ Type "create" to proceed.
```

**Step 2: Creation**
```
🔄 Creating Collection...

✅ Collection created: Team Members (ID: jkl012...)

Adding fields...
├── ✅ role (Option: 3 options)
├── ✅ bio (RichText)
├── ✅ photo (Image)
└── ✅ email (Email)

Progress: ████████████████████ 100% (4/4 fields)

🎉 Collection Setup Complete!

Collection: Team Members
Fields: 6 (2 auto + 4 custom)

Field Details:
- role: Option field with 3 choices
  • Designer
  • Developer
  • Manager

---

💡 Next Steps:
1. Add team member items
2. Create team page in Designer
3. Consider adding:
   - LinkedIn profile (Link field)
   - Years of experience (Number field)
   - Specializations (MultiReference to Skills collection)
```

### Example 4: Complex E-commerce Setup

**User prompt:**
```
Create an e-commerce setup with Products, Categories, Brands, and Features
```

**Step 1: Requirements Clarification**
```
📋 E-commerce Collection Planning

I'll create 4 collections:

1. **Categories** - Product categories
2. **Brands** - Product brands
3. **Features** - Product features (e.g., "Waterproof", "Wireless")
4. **Products** - Main product catalog

Relationships:
- Product → Category (Reference)
- Product → Brand (Reference)
- Product → Features (MultiReference)

Fields per collection:

**Categories:**
- Name, Slug (auto)
- Description
- Parent Category (self-reference for hierarchy)
- Icon

**Brands:**
- Name, Slug (auto)
- Logo
- Description

**Features:**
- Name, Slug (auto)
- Icon
- Description

**Products:**
- Name, Slug (auto)
- Price
- Sale Price
- Description
- Images (MultiImage)
- Category (Reference → Categories)
- Brand (Reference → Brands)
- Features (MultiReference → Features)
- In Stock (Switch)
- SKU (PlainText)

Is this structure good? (yes/modify/cancel)
```

**Step 2: Preview (User says "yes")**
```
📋 Preview: Create E-commerce Collections

---

### Collection 1: Categories

Fields (5 total):
├── name (PlainText, required)
├── slug (PlainText, required)
├── description (PlainText)
├── parent-category (Reference → Categories) ← Self-reference
└── icon (Image)

---

### Collection 2: Brands

Fields (4 total):
├── name (PlainText, required)
├── slug (PlainText, required)
├── logo (Image)
└── description (PlainText)

---

### Collectio

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [webflow](https://github.com/webflow)
- **Source:** [webflow/webflow-skills](https://github.com/webflow/webflow-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-webflow-webflow-skills-cms-collection-setup
- Seller: https://agentstack.voostack.com/s/webflow
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.