simbiot-harness/skills/presale-landing/SKILL.md

---

name: presale-landing description: Use when making or reworking a presale/product landing (Simbiot, coop products): structure, sections, honest product mockups, Stripe CTA. Ensures a selling page with a distinct non-AI-look and provable quality instead of a generic template. metadata: origin: t-261002151630-84bd7f (Лэндос Simbiot), first skill born via meta-skill-factory scope: Simbiot presale/product pages; adapted per product

Presale landing: from content to a selling page

Trigger rule

• Task: make a landing / rework a presale / a v2 version of a page exists
• There is an offer (or it's given by the task setting)
• Payment provider link (Stripe or similar) is available, or it's known that a placeholder link is temporarily put with a P0 remark

Steps

1. Sources

Gather before the layout: base page (docs/simbiot_presale_landing.html), the current site (simbiot.cil.by), pricing directive (docs/PRICE-DIRECTIVE-SIMBIOT.md), the sales plan (docs/SALES-PLAN-PRESALE-PAGE.md), packaging (docs/PACKAGE-SIMBIOT-PRESALE.md), live Telegram threads (sales/presale) — don't rewrite the texts from scratch if they already exist.

2. Locked structure

Mandatory sections in this order (each — a specific promise to the visitor):

1. Hero — one specific offer (who it's for + result + form of delivery). H1 ≤ 10 words, under it 1 sentence + CTA button.
2. «Что это» — 2–3 blocks «problem → mechanism → outcome».
3. «Что включено» — a specific list (Stripe-equipping, AI inference, agents in the product, hosting, etc. — taken from «Что включено», not «a suite of possibilities»).
4. «Как это работает» — 3 steps from the visitor's side.
5. Visuals of the product — honest mockups: real UI, real TG-dialog. No «sleek abstract renders» — each mockup is labeled and recognizable.
6. Social proof — who did it, statuses, numbers (only confirmed items; nothing invented).
7. Tariff plans — 2–3 plans, the price and limits from the pricing directive, a CTA per plan.
8. Final CTA — the same Stripe-link.
9. Footer: who makes it, contacts, legal minimum.

3. Visual language (per ui-skills frontend-design)

• One accent color per page, a calm scale of backgrounds, no «rainbow» gradients.
• Typography: a distinct heading font (not «default Inter in default weight»), font sizes: 1 H1 / page, h2 2× smaller, body 1×.
• Layout grids: max-width ~1100px, alternating bands (light / dark / light) give the page a rhythm; on mobile — a single column, no horizontal scroll.
• Motion: 1–2 animations with meaning (the appearance of blocks in the viewport, a smooth hover on CTA), no decorative bounces. prefers-reduced-motion — mandatory.
• Not-AI-look: don't use a standard set of icons, no «emoji-steps», real numbers instead of adjectives ("2494 у.е." not "недорогой").

4. Quality gates (mandatory checks before handing the result)

• CTA is clicked (the Stripe-link is alive — no 404; the opening checked).
• Places counter and other numbers are up-to-date (if a live billing — from the API/billing, not hardcoded).
• No «lorem ipsum» or unfinished blocks.
• Lighthouse (or equivalent): Performance ≥ 70 / Accessibility ≥ 90.
• The layout doesn't break on 375px width and 1440px (screenshot or resize).
• Each section answers: "What do I, the visitor, do with this?" — if there's no reply to a section, it gets removed or merged into another one.
• prefers-reduced-motion handled, animations not «forever».

Common mistakes

• «Vague» hero (an offer without a number/verb) — the visitor leaves without scrolling.
• A fake count, hardcoded «10 мест» — kills trust (P1 t-...08ba09).
• AI-look: a standard set of icons, emoji-steps, gradients «to make it pretty».
• Sections without a promise («Our advantages» with 4 cards of platitudes) — merge or remove.
• Visuals «not from the product» — renders unrelated to the real UI.

Done when

• Page lives on the URL/hosting (or in the repo under docs/site/).
• Quality gates are passed and recorded in the task report.
• The CTA leads to a living Stripe-link (or a P0-remark is left).
• A v2 version of the page is in the repo history (or the diff is in the commit).

Related skills

• meta-skill-factory — how skills like this are born (don't produce single-use ones).
• improve-ui / improve-animations (ui-skills) — audits of the ready page.