Stats
Actions
Tags
From hsns
Use when designing or reviewing landing pages on HubSpot CMS Hub. Covers above-the-fold structure, CTA design, trust signals, form length, traffic-source-specific layouts, and the canonical landing-page recipes (lead capture, product launch, demo booking).
How this skill is triggered — by the user, by Claude, or both
Slash command
/hsns:hubspot-conversionThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill encodes what works on HubSpot landing pages, distilled from hundreds of A/B tests and real-world deployments. The unit of work here is "the brief's KPI conversion goal converted through HubSpot's CMS primitives."
This skill encodes what works on HubSpot landing pages, distilled from hundreds of A/B tests and real-world deployments. The unit of work here is "the brief's KPI conversion goal converted through HubSpot's CMS primitives."
Most B2B landing pages should look like this. Add fewer sections (paid social), add more (organic search, intent-driven). Don't add for the sake of adding.
1. Hero (headline + subhead + primary CTA + trust signal)
2. Differentiators (3 features grid OR 3 stat tiles)
3. Proof (customer logos, testimonial, case-study link)
4. Risk-reversal (FAQ, demo-vs-trial choice, "no credit card")
5. CTA-form (lead capture)
Every section is a HubSpot module. The brief's target: landing-page typically maps to 3-5 modules from reference/module-recipes/.
The hero is 80% of a landing page's job. Get it right.
brand_voice is your guide.If you have NONE of these, skip — fake trust signals destroy trust faster than no trust signals.
Three's the magic number. More than three dilutes; fewer than three feels thin.
<section class="features">
<h2>{{ module.section_headline }}</h2>
<div class="features__grid">
{% for feature in module.features %}
<article class="feature">
{% if feature.icon.name %}<i class="fas fa-{{ feature.icon.name }}"></i>{% endif %}
<h3>{{ feature.headline }}</h3>
<div class="feature__body">{{ feature.body }}</div>
</article>
{% endfor %}
</div>
</section>
For each feature:
Use fields.json group with occurrence for the repeater so editors can add/remove features.
Three formats, in order of preference:
Avoid: anonymous quotes, generic "trusted by 1000+ teams" without specifics.
Only when you've identified a specific objection. Common patterns:
For paid-social traffic, often the right call is to skip this section — the persona is decision-mode, not research-mode.
The form is where conversion either happens or doesn't. Three rules:
| Value exchange | Field count |
|---|---|
| Email-only newsletter | 1 (email) |
| Whitepaper / report download | 2-3 (email, name, optionally company) |
| Webinar registration | 3-4 |
| Demo booking | 4-6 (email, name, company, role, optionally team size) |
| Free trial / signup | 5-7 |
Each extra field cuts conversion by ~7-15%. Cut unless it's used for sales qualification.
In HubSpot, drop the form via the form field type and {% form %} tag (HubSpot's embed). Don't roll a custom form unless you have a specific reason — HubSpot's form has CRM integration, spam filtering, GDPR consent, conditional fields, and reCAPTCHA built in.
50% of paid-social traffic is mobile. Build mobile-first.
/hsns:nano decides for landing pagesWhen target: landing-page, the architect agent (hs-architect) plans:
module_map — typically: hero-split + feature-grid + cta-form. Add proof-logos or testimonial-card if the brief mentions trust signals.dnd_strategy: single-area — one editable canvas. Editor can rearrange or add sections.content_schema — realistic copy in the brief's voice. Not Lorem ipsum.success_signals — Lighthouse mobile ≥ 85, form submits on sandbox, all fields.json keys referenced.After /hsns:ship, track:
HubSpot's analytics expose all of this per landing-page automatically. Consumer repos can add a success_signals carry-over to future /hsns:think briefs to set baselines.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub todoviernes/hs-nano-stack --plugin hsns