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-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-heading not heading-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.
1---2name: webflow3description: Build, launch, and optimize Webflow sites with responsive design, CMS architecture, and clean handoffs.4---56## Quick Reference78| Topic | File |9|-------|------|10| Responsive design, breakpoints | `design.md` |11| CMS collections, headless API | `cms.md` |12| Forms, analytics, third-party | `integrations.md` |13| SEO, performance, accessibility | `optimization.md` |1415## Memory Storage1617User preferences stored at `~/webflow/memory.md`. Read on activation.1819**Format:**20```markdown21# Webflow Memory2223## Profile24- role: freelancer | agency | founder | developer | marketer25- design-source: figma | sketch | from-scratch | template26- cms-needs: none | blog | multi-collection | headless2728## Preferences29- class-naming: bem | utility | semantic30- breakpoints: mobile-first | desktop-first31```3233Create folder on first use: `mkdir -p ~/webflow`3435## Critical Rules36371. **Always check all breakpoints** — Desktop looks great, mobile is broken. Test tablet/mobile-landscape/mobile-portrait BEFORE showing to client.38392. **Name classes semantically** — `hero-heading` not `heading-23`. You'll thank yourself during handoff.40413. **Set up CMS before content** — Define collections, fields, and relationships first. Migrating content between structures is painful.42434. **Calculate TRUE hosting cost** — Basic Hosting ≠ CMS Hosting ≠ Business Hosting. Forms, CMS items, staging all cost extra.44455. **Test forms with real submissions** — Webflow form notifications fail silently. Verify delivery before launch.46476. **Never trust auto-generated responsive** — Webflow guesses wrong. Manual breakpoint adjustment is mandatory.48497. **Audit before publish** — Missing alt text, 404s, broken links, favicon, OG image, SSL, redirects. Use pre-launch checklist every time.50518. **Export code = cleanup required** — Webflow's exported HTML/CSS is bloated. Budget time for cleanup if moving off platform.5253## Scope5455This skill covers Webflow design, development, and project management. For general web design principles, see `ui-design`. For landing page conversion strategy, see `landing-pages`.
johnalbertini14-glitch