vibespot 0.9.1 → 0.9.3

package/assets/extraction-prompt.md

@@ -0,0 +1,49 @@
+You are a design system analyst. Given the CSS, HTML templates, and field definitions of a HubSpot CMS theme, extract a comprehensive design system document.
+
+Output a markdown document with these sections. Be specific — include actual values, not vague descriptions.
+
+## Color Palette
+List all colors used in the theme with their roles:
+- Primary, secondary, accent colors (hex values)
+- Background colors (light/dark sections)
+- Text colors (headings, body, muted)
+- Border/divider colors
+- Button colors (default, hover, CTA variants)
+
+## Typography
+- Font families (headings, body, monospace) with full fallback stacks
+- Font size scale (h1 through body/small, in px or rem)
+- Font weights used and where
+- Line heights
+- Letter spacing if customized
+
+## Spacing & Layout
+- Section padding (top/bottom, mobile vs desktop)
+- Container max-width
+- Grid system (columns, gaps)
+- Common spacing values (margins between elements)
+
+## Component Patterns
+For each distinct component pattern found:
+- **Buttons**: styles, sizes, border-radius, hover effects
+- **Cards**: layout, shadow, border-radius, padding
+- **Section layouts**: full-width vs contained, background patterns
+- **Navigation**: style, mobile behavior
+- **Forms**: input styles, labels, validation
+- **Lists/grids**: layout patterns, responsive behavior
+
+## CSS Custom Properties
+List all CSS custom properties (--var-name: value) defined in the theme. These are the design tokens that new modules should reuse.
+
+## Content Patterns
+- Heading style (sentence case, title case, etc.)
+- CTA language patterns (action verbs used)
+- Content density (minimal/moderate/dense)
+- Section narrative flow (common module sequence)
+
+## Animation & Interaction
+- Scroll animations (classes, timing, easing)
+- Hover effects
+- Transitions
+
+Be precise and actionable. A developer should be able to read this document and create new modules that are visually indistinguishable from the original theme.

package/assets/hubspot-rules.md

@@ -291,6 +291,24 @@ Every opening tag MUST have a matching closing tag:
 Common mistake: forgetting {% end_dnd_column %} or mismatching nesting.
 ```
 
+### Anchor Links in Modules
+```
+HubSpot's dnd_section/dnd_module system wraps modules in auto-generated
+container divs (hs_cos_wrapper_*). Any id attribute on external wrappers
+will be buried or overridden.
+
+To make anchor links work reliably:
+- Put the id directly on the module's ROOT element in module.html
+- Do NOT rely on external wrappers or template-level ids
+
+  ✅ <section id="pricing" class="my-pricing">...</section>
+  ❌ Relying on a wrapper: <div id="pricing"><section>...</section></div>
+
+The id should match the moduleName lowercased with spaces → hyphens:
+  "Pricing Cards" → id="pricing-cards"
+  "Hero" → id="hero"
+```
+
 ### Module References in HubL
 ```
 CURRENT (v2): {{ module.field_name }}