- name
- Webflow
- slug
- webflow
- version
- 1.0.0
- description
- Build, launch, and optimize Webflow sites with responsive design, CMS architecture, and clean handoffs.
- metadata
- {"clawdbot":{"emoji":"🌐","requires":{"bins":[]},"os":["linux","darwin","win32"]}}
Quick 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-firstCreate 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.