Webflow
Verified@ivangdavila
npx machina-cli add skill @ivangdavila/webflow --openclawQuick Reference
| Topic | File |
|---|---|
| Responsive design, breakpoints | design.md |
| CMS collections, headless API | cms.md |
| Forms, analytics, third-party | integrations.md |
| SEO, performance, accessibility | optimization.md |
Memory Storage
User preferences stored at ~/webflow/memory.md. Read on activation.
Format:
# Webflow Memory
## Profile
- role: freelancer | agency | founder | developer | marketer
- design-source: figma | sketch | from-scratch | template
- cms-needs: none | blog | multi-collection | headless
## Preferences
- class-naming: bem | utility | semantic
- breakpoints: mobile-first | desktop-first
Create folder on first use: mkdir -p ~/webflow
Critical Rules
-
Always check all breakpoints — Desktop looks great, mobile is broken. Test tablet/mobile-landscape/mobile-portrait BEFORE showing to client.
-
Name classes semantically —
hero-headingnotheading-23. You'll thank yourself during handoff. -
Set up CMS before content — Define collections, fields, and relationships first. Migrating content between structures is painful.
-
Calculate TRUE hosting cost — Basic Hosting ≠ CMS Hosting ≠ Business Hosting. Forms, CMS items, staging all cost extra.
-
Test forms with real submissions — Webflow form notifications fail silently. Verify delivery before launch.
-
Never trust auto-generated responsive — Webflow guesses wrong. Manual breakpoint adjustment is mandatory.
-
Audit before publish — Missing alt text, 404s, broken links, favicon, OG image, SSL, redirects. Use pre-launch checklist every time.
-
Export code = cleanup required — Webflow's exported HTML/CSS is bloated. Budget time for cleanup if moving off platform.
Scope
This skill covers Webflow design, development, and project management. For general web design principles, see ui-design. For landing page conversion strategy, see landing-pages.
Overview
Webflow enables building, launching, and optimizing sites with responsive design and a structured CMS. This skill covers planning breakpoints, configuring CMS collections, and integrating forms and analytics to ensure a smooth client handoff. It emphasizes pre-launch audits, accessibility, SEO, and performance improvements.
How This Skill Works
Start by planning responsive breakpoints and a semantic CMS schema (collections and fields). Build the site in Webflow using those structures, wire up forms, third-party integrations, and analytics, then perform a thorough pre-launch audit and prepare a clean handoff with reusable components and documented settings.
When to Use It
- When designing a responsive marketing site that needs a CMS-driven blog or content sections
- When building a portfolio or multi-collection site with reusable components
- When preparing a client handoff and production deployment
- When launching a product landing page with forms and analytics integrations
- When migrating from static HTML to Webflow and requiring a clean export/hand-off
Quick Start
- Step 1: Plan breakpoints and CMS schema using design.md and cms.md as references
- Step 2: Build in Webflow with responsive layouts, CMS collections, and semantic class names; connect forms and integrations
- Step 3: Run a pre-launch audit (accessibility, SEO, redirects), test forms, and prepare handoff/export
Best Practices
- Test across all breakpoints (desktop, tablet, mobile) before presenting to the client
- Name classes semantically (e.g., hero-heading) to ease handoff
- Set up CMS before content; define collections, fields, and relationships
- Audit pre-publish: ensure alt text, 404s, broken links, favicon, OG image, SSL, and redirects
- Budget hosting and CMS costs; plan for forms, CMS items, and staging
Example Use Cases
- Marketing site redesign with a responsive breakpoints strategy and a CMS-powered blog
- Designer portfolio site using CMS collections for projects and case studies
- Product launch microsite with integrated forms and analytics tracking
- Content-heavy site migrated from static HTML to Webflow with clean export-ready code
- Client handoff workflow featuring semantic naming, pre-launch audit, and documentation
