landing-page-ui
Installation
SKILL.md
Landing page UI
A marketing site is read once, scrolled fast and judged in seconds; an app is used every day. So the site gets the slow, expressive motion the app must never have (letters that land, words that rise, sections that clear from a blur), on a strict, repeatable page structure. Every page tells the same kind of story with the same building blocks; only the words and the product screens change.
| The job | Read |
|---|---|
| The site's own system: stylesheet, tokens, dark sections, type, buttons, press, theme and language before paint | SYSTEM.md |
| Motion: hero sequence, letters, words, scroll reveals, header menu, footer reveal, language and theme transitions, hover details | MOTION.md |
| Page structure and sections: hero, story panels and cards, carousels, plans, FAQ, closing call, 404 | SECTIONS.md |
| Pages with function: contact form, help center and its search, blog, legal documents, on-this-page navigation | CONTENT-PAGES.md |
| Being found and measured: head tags, hreflang, structured data, caching, consent and analytics | DISCOVERY.md |
| The production source of every piece above, to copy as is | reference/REFERENCE.md, page files in reference/REFERENCE-PAGES.md |
The product's own screens are app-ui; its agent's chat is agent-chat-ui; durations and curves in general are ui-animation; what copy to put in the sections is anti-slop-copy. To build it exactly, copy from reference/ rather than writing it from the description.