BX Webflow Framework

A barebones, component-first Webflow starter. Custom (Client-First style) class naming, a self-contained per-section script system, an optional smart vendor loader, and full Cursor + Claude Code tooling. Everything beyond the cloneable is optional.

Why it's built this way

Webflow ships per-page CSS, so utility-class frameworks lose most of their payoff while adding composition overhead. This template leans on semantic, component-scoped classes instead — clear to read, easy to map to Figma, and simpler for AI to set properties on without recalling token soup.

Classes, containers & structure

Client-First with a few tweaks: the component name comes first, element parts follow, separated by underscores (hyphens inside multi-word names).

Typical section structure

.element_section.padding-global
├── .section-css   # per-section CSS embed
├── {{Spacer Component}}
├── .element_contain.container-medium
│   └── .element_layout
├── {{Spacer Component}}
└── .section-js    # per-section JS embed (paste minified script here)

Three wiring patterns

Markup hooks always use the data- prefix and the Client-First word pattern: data-{middle}-{facet}="{value}". Pick the pattern that matches what you're marking.

Modular section & component scripts

Each section or component owns one script, pasted into its .section-js / .component-js embed. Scripts are idempotent, multi-instance safe, and declare their own namespace window.bx_[component]. Shared libraries are requested through the dispatcher — never loaded with a raw <script> tag.

/*! 13/03/26 v1 hero-slider: Swiper nav + pagination, A11y */
(() => {
  const ns = 'bx_hero-slider';
  if (!window[ns]) window[ns] = { instances: new Map() };

  // Declare what this section needs; the loader unions all
  // requests on the page and loads each library once.
  window.bx_vendors.swiper.request(
    ['Navigation', 'Pagination', 'A11y'],
    initHeroSlider,
    { priority: true } // above-the-fold → load immediately
  );

  function initHeroSlider() {
    // query .hero-slider_section, init each .swiper once
  }
})();

Every code/sections/*.js and code/components/*.js file opens with a fixed three-part preamble:

• Banner — one /*! … */ line: date, version, name, one-line summary (survives minification).
• Description — what it does, DOM/classes, vendors, a11y, and any script-only data-* state.
• Data attributes — the author-facing data-* hooks you wire up in Webflow.

Minification & comments

Full source files are encouraged to be heavily commented — the three-part preamble plus inline notes are what let an agent understand a script's behaviour and safely extend it. You ship the minified version: a Cursor minification plugin generates a -min companion for each file (e.g. project_section_faq-min.js), and that’s what goes into the Webflow embed. Never edit the -min files by hand — they’re regenerated from source.

Smart shared vendor dispatcher

The default head snippet only creates an empty window.bx_vendors object, so the framework stays optional. Enable the presets a project needs in code/global/src/project_global_vendors.js, minify, and paste over the placeholder. Sections then request() what they need; the dispatcher collects every declaration and loads each library once per page with the union of requested modules.

If no section requests a library on a page, nothing loads for it — zero cost. GSAP is supplied by Webflow when Interactions need it; don't add a GSAP loader, feature-detect window.gsap instead.

Prefer not to use it? You can always drop a library’s <script> straight into a page’s custom code and init it yourself — the loader is optional. But the dispatcher exists for a reason: a single deduplicated load per page, only the modules each page needs, and modular sections that stay self-contained. For optimal performance and portability, the vendor script is the better default.

Shipped components & their data hooks

Drop-in scripts that live in code/components/ and code/sections/. Expand each for what it does and the markup hooks it reads — click any attribute to copy it.

Folder structure

Scripts stay close to what they belong to. Readable source lives in the repo; you minify and paste the output into Webflow.

ProjectName/
├── .cursor/           # Cursor rules, agents, skills
│   ├── rules/  agents/  skills/
│   └── mcp.json        # project MCP config (Webflow)
├── .claude/           # Claude Code agents + skills
├── CLAUDE.md           # Claude project instructions
├── assets/            # cms/ · meta/ · pages/
├── code/
│   ├── global/         # head, body, styles (+ src/ for vendor source)
│   ├── sections/       # per-section scripts
│   └── components/     # dialog, video, …
├── docs/              # this doc + COMPONENT_SCRIPT_PATTERN.md
├── fonts/
└── tools/

Project-level AI skills

Shipped for both Cursor (.cursor/skills/) and Claude Code (.claude/skills/). The AI reads them when relevant or when you @-mention them.

Editors & rules

Cursor and Claude Code share the same rules — Cursor via .cursor/, Claude Code via CLAUDE.md + .claude/. Rules cover the section-script pattern, accessibility, asset naming, never editing minified output, and Webflow/Figma setup.

Using the cloneable