A little about this skill

Create an original product landing page with a dark floating navigation bar, graphite-and-teal headline and editable product-interface stage. Includes scroll-triggered product-depth settling, section reveals, internal diagram staggers, a workflow connection draw, three fictional single-page briefs, working sample controls and local-feedback forms. A dependency-free Node.js builder produces offline HTML; no backend or image service is included.

What you’ll get

• Reusable English instructions with concrete visual rules, edit locations and interaction requirements.
• Content-driven HTML, CSS, classic JavaScript, original interface diagrams, a licensed local font and reusable scroll-triggered motion with a complete reduced-motion path.
• A dependency-free builder and three independent fictional landing-page examples: shared studios, workshop programs and greenhouse planning.

Good fit

• Product and SaaS landing pages that explain a real workflow through a calm product-interface visual.
• Studio, program or planning concepts with one primary action and concise supporting sections.

Not for

• Live booking, payments, registration, analytics, crop guidance or account management without separate service integrations.

What you need

A coding Agent with filesystem access and Node.js 20.9+ to rebuild self-contained HTML. No build dependencies, network access, framework, image service or backend are required. The output opens from disk in a modern browser with native dialog support. Existing framework projects can adapt the recipe with their own components and router.

Make it yours

Tell your agent about your project, audience, and the result you want. The skill provides a direction and a practical workflow; your idea makes it unique. Review its instructions before running it and make sure the required tools are available.