# Webflow

> Build, launch, and optimize Webflow sites with responsive design, CMS architecture, and clean handoffs.

- Skill: `johnalbertini14-glitch/webflow` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add johnalbertini14-glitch/webflow`
- Raw SKILL.md: https://api.skillmd.com/api/skills/johnalbertini14-glitch/webflow/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: johnalbertini14-glitch (https://skillmd.com/u/johnalbertini14-glitch)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/johnalbertini14-glitch/webflow

---


## 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:**
```markdown
# 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

1. **Always check all breakpoints** — Desktop looks great, mobile is broken. Test tablet/mobile-landscape/mobile-portrait BEFORE showing to client.

2. **Name classes semantically** — `hero-heading` not `heading-23`. You'll thank yourself during handoff.

3. **Set up CMS before content** — Define collections, fields, and relationships first. Migrating content between structures is painful.

4. **Calculate TRUE hosting cost** — Basic Hosting ≠ CMS Hosting ≠ Business Hosting. Forms, CMS items, staging all cost extra.

5. **Test forms with real submissions** — Webflow form notifications fail silently. Verify delivery before launch.

6. **Never trust auto-generated responsive** — Webflow guesses wrong. Manual breakpoint adjustment is mandatory.

7. **Audit before publish** — Missing alt text, 404s, broken links, favicon, OG image, SSL, redirects. Use pre-launch checklist every time.

8. **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`.