Skill This
AI Skill Report Card

Building Webflow Sites

A-85·Feb 25, 2026·Source: Web
Quick Start15 / 15
1. Create new project → Enable staging
2. Set up global styles first:
   - Typography: h1-display, h2-section, body-large, body-small
   - Colors: primary-500, secondary-300, neutral-100
   - Spacing: space-xs (8px), space-sm (16px), space-md (24px)
3. Build component with BEM classes: hero__title, hero__subtitle, hero__cta
4. Configure CMS collection with slug, SEO fields, and status
Recommendation▾
Reduce the number of sub-sections to make it more concise - consider combining 'Design Token System' and 'BEM Class Naming' into a single 'Styling System' section
Workflow15 / 15

Phase 1: Foundation Setup

  • Enable staging environment
  • Create global color swatches (primary, secondary, neutral scales)
  • Define typography system (display, heading, body, caption styles)
  • Set up base spacing variables

Phase 2: Component Architecture

  • Build reusable components with BEM naming
  • Create CMS collections with required fields
  • Configure dynamic content binding
  • Set up global classes for utilities

Phase 3: Interactions & Polish

  • Add IX2 interactions (max 3 per page)
  • Configure SEO settings per page
  • Test responsive behavior
  • Optimize for performance

Phase 4: Launch Preparation

  • Review SEO checklist
  • Test all CMS functionality
  • Verify staging → production workflow
  • Set up client editor access
Recommendation▾
Make examples more concrete by showing actual Webflow interface steps rather than just class structures and collection schemas
BEM Class Naming System

Structure: block__element--modifier

// Component blocks
hero, navbar, footer, card, section

// Elements within blocks  
hero__title, hero__subtitle, hero__image, hero__cta
navbar__logo, navbar__menu, navbar__item

// Modifiers for variations
button--primary, button--secondary, button--large
card--featured, section--dark, hero--minimal

Utility Classes:

// Spacing
u-margin-top-md, u-padding-bottom-lg
// Typography  
u-text-center, u-text-bold
// Layout
u-flex-center, u-width-full
CMS Collection Architecture

Standard Fields for All Collections:

- Name (plain text) - required
- Slug (auto-generated) - required  
- Status (option: draft, published) - required
- Featured (switch) - optional
- SEO Title (plain text) - required
- SEO Description (plain text) - required
- OG Image (image) - optional

Content-Specific Fields:

Blog Posts: Author (reference), Category (reference), Content (rich text), Featured Image
Portfolio: Client Name, Project Type (option), Gallery (multi-image), Services Used (multi-reference)
Team Members: Role, Bio (rich text), Headshot, Social Links (link fields)

Collection Settings:

  • Singular: "Blog Post" → Plural: "Blog Posts"
  • Template page slug: /blog/[slug]
  • Enable API access for headless needs
IX2 Interactions Best Practices

Trigger Types Priority:

  1. Page Load - Hero animations, fade-ins
  2. Scroll Into View - Section reveals, counters
  3. Hover - Button states, image overlays
  4. Click - Mobile menus, modals

Animation Chaining:

Timeline: Section Reveal
1. 0.0s: Move Y 50px, Opacity 0%
2. 0.3s: Move Y 0px, Opacity 100% (ease out)
3. 0.5s: Scale child elements 0.95 → 1.0

Performance Limits:

  • Max 3 interactions per page
  • Avoid animating layout properties (width, height)
  • Use transform and opacity only
  • Disable interactions on mobile for heavy animations
Design Token System

Global Color Swatches:

Primary Scale: primary-50, primary-100, primary-300, primary-500, primary-700, primary-900
Secondary Scale: secondary-50, secondary-100, secondary-300, secondary-500, secondary-700, secondary-900
Neutral Scale: neutral-0 (white), neutral-100, neutral-300, neutral-500, neutral-700, neutral-900
Semantic: success-500, warning-500, error-500

Typography Styles:

Display: font-family, 48px/1.2, 700 weight
H1 Section: font-family, 36px/1.3, 600 weight  
H2 Subsection: font-family, 28px/1.4, 600 weight
Body Large: font-family, 18px/1.6, 400 weight
Body Regular: font-family, 16px/1.6, 400 weight
Caption: font-family, 14px/1.4, 400 weight

Spacing System:

space-xs: 8px
space-sm: 16px  
space-md: 24px
space-lg: 32px
space-xl: 48px
space-2xl: 64px
SEO Configuration Checklist

Page-Level Settings:

  • Page title (50-60 chars): "Service Name | Company Name"
  • Meta description (150-160 chars): Action-oriented with keywords
  • OG title: Same as page title or custom
  • OG description: Same as meta or custom
  • OG image: 1200x630px, under 1MB

Global Settings:

  • Site name and tagline
  • Default OG image
  • Favicon (32x32, 16x16, apple-touch-icon)
  • Google Analytics/Tag Manager
  • Search console verification

Schema Markup (Custom Code):

HTML
<!-- Organization Schema -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Company Name",
  "url": "https://website.com",
  "logo": "https://website.com/logo.png"
}
</script>

XML Sitemap:

  • Auto-generated at /sitemap.xml
  • Submit to Google Search Console
  • Include in robots.txt
Publishing Workflow

Staging Environment:

1. Design changes → Save to staging
2. Test all functionality on staging URL
3. Client review and approval on staging
4. Publish staging → production
5. Verify live site functionality

Client Access Setup:

  • Editor role for content updates
  • Designer role for basic styling (if needed)
  • Limit access to relevant CMS collections only
  • Provide training documentation
Examples18 / 20

Example 1: Hero Component Input: Create hero section with title, subtitle, and CTA Output:

Classes:
- hero (section)
- hero__container (div with max-width)
- hero__content (text wrapper)
- hero__title (h1 with display style)
- hero__subtitle (p with body-large style)  
- hero__cta (link with button--primary class)

CMS Binding:
- hero__title → Page Settings → SEO Title
- hero__subtitle → Custom field "hero_description"

Example 2: Blog Collection Setup Input: Create blog with author system and categories Output:

Collections:
1. Blog Posts: title, slug, author (ref), category (ref), content, featured_image, status
2. Authors: name, slug, bio, avatar, social_links
3. Categories: name, slug, description, color

Template bindings:
- List page: Filter by status = published
- Detail page: Display author info via reference field
- Category filtering via URL parameters
Recommendation▾
Add input/output pairs that show specific client requests transformed into actionable Webflow implementations
Best Practices
  • Start with globals - Colors, typography, spacing before building
  • Component-first thinking - Build reusable blocks with proper naming
  • CMS planning - Design collection structure before building templates
  • Mobile-first responsive - Design mobile, enhance for desktop
  • Staging workflow - Always test changes before publishing
  • Client handoff - Document CMS fields and editing workflow
Common Pitfalls
  • Don't use combo classes excessively (max 3 per element)
  • Don't create page-specific styles (use components + modifiers)
  • Don't ignore CMS field limits (400 chars for plain text)
  • Don't animate layout properties (causes reflow)
  • Don't skip SEO settings (major ranking factor)
  • Don't publish directly to production without staging review
  • Don't create too many similar collections (use option fields instead)
0
Grade A-AI Skill Framework
Scorecard
Criteria Breakdown
Quick Start
15/15
Workflow
15/15
Examples
18/20
Completeness
20/20
Format
15/15
Conciseness
12/15
Save to My Skills