heard-webflow-code
Installation
SKILL.md
Heard Webflow Code
Goal
Create Webflow embeds for Heard (joinheard.com) that behave like isolated components inside the existing Webflow site. Preserve the site’s nav, footer, forms, buttons, typography, and global interactions.
Non-Negotiables
- Do not include document shell tags in embed markup: no
<!doctype>,<html>,<head>,<body>, metadata, viewport, or<title>. - Wrap custom embed markup in one namespaced root, for example
<div class="hlp-page">...</div>. - Prefix custom classes with the embed namespace, for example
hlp-. - Do not write global CSS selectors from embed CSS: avoid
html,body,:root,*,a,p,h1,button,ul,img,svg. - Do not write broad scoped link rules like
.hlp-page aunless the embed intentionally owns every link style. - Do not style or override Heard Webflow
.nav_link, navbar, footer, form, modal, or other site-wide classes. - Keep readable source separate from minified Webflow paste output.
Preferred File Shape
Use one readable source file with three clear sections: