Landing — Premium HTML Landing Page Generator
Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. It forces a structured intake (product pitch, audience, brand, tone) to lock positioning before writing any copy, then outputs a single self-contained HTML file with inline CSS/JS and only Google Fonts + GSAP CDN as external dependencies.
✨ What it does
- Forces a 4-question intake (product pitch, audience register, brand overrides, tone) to avoid generic boilerplate.
- Generates a single self-contained HTML file with all CSS inline and JS inline, only Google Fonts + GSAP CDN external.
- Includes five required animation patterns: hero entrance timeline, mouse parallax, scroll-triggered feature cards, float
- Supports configurable brand colors via CSS custom property overrides with algorithmic palette derivation.
- Validates output with a post-generation HTML validator checking sections, CDN deps, FOUC prevention, and responsive brea
- Falls back to inferred content flagged with HTML comments when input is sparse.
🎯 When to use it
- User says 'landing for X', 'create a landing page', 'build a landing page', or 'make a landing page for X'.
- User needs a promotional page, product page, one-pager, web presence, or sales page.
- User provides product/service details and wants a polished, animated website.
- User wants a visually distinctive, production-quality landing page with premium animations.
🚀 How to use
Trigger by asking for a landing page (e.g., 'create a landing page for X'). The skill will ask up to 4 intake questions one at a time: product name + elevator pitch, audience register (technical/business/consumer/internal), brand color overrides (or 'default'), and tone (professional/playful/authoritative/minimal). Provide answers; the skill then generates the HTML file. Example prompts:
Create a landing page for Quill AI, an async standup tool for remote engineering teams.
Build a landing page for my coffee subscription service.
📄 Output: A single self-contained HTML file (e.g., quill-ai.html) written to ./landing-pages/ (or an HTML artifact in Claude.ai).
📦 Add this skill to Claude Code
# 1. Get the skills repo
git clone --depth 1 https://github.com/alirezarezvani/claude-skills /tmp/claude-skills
# 2. Copy this skill into your project (or ~/.claude/skills for all projects)
mkdir -p .claude/skills
cp -r /tmp/claude-skills/marketing/landing/skills/landing .claude/skills/landingSkill source: marketing/landing/skills/landing/SKILL.md
⚠️ Good to know
Requires at least a product name; if no elevator pitch is given, the skill pushes back once and may fall back to generic positioning with a caveat. The output is a static HTML file, not a Next.js/TSX component.
❓ FAQ
What if I only provide a product name without a pitch?
The skill will ask for a pitch once; if still not provided, it will generate content from the name semantics and audience register, flagging inferred content with HTML comments.
Can I customize the brand colors?
Yes, during intake you can provide a primary HEX, accent HEX, and optional background HEX, or say 'default' to use the dark navy + teal palette. If only primary is given, accent is derived algorithmically.
What external dependencies does the generated page use?
Only Google Fonts (Inter) and GSAP (with ScrollTrigger) via CDN; all other CSS and JS are inline in the single HTML file.
🤖 Overview, features, install steps and FAQ were generated from the project's SKILL.md on Sep 4, 2026. Always check the original source before running commands.