Landing
Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth.
Before & after
Same prompt, same agent — the only difference is the skill.
A landing page is a great way to introduce your product. You'll want to include an engaging headline that describes what your tool does. Add some benefits and features to show value. Include testimonials or social proof if you have them. Make sure you have a clear call to action button. Keep the design clean and professional. You might add a demo video. Consider your target audience and what matters to them. A good landing page can help with conversions.
LANDING PAGE DELIVERABLE (single self-contained HTML file) BEFORE WRITING: Product intake locked Headline: 'AI schedules your calendar 10x faster' Audience: Small business owners, 50-500 employees Elevator pitch: 'Smart scheduling that learns your meeting patterns and books time automatically' Brand overrides: Use teal+charcoal instead of defaults Tone: Direct, no hype SECTION 1: Hero 3D CSS hero animation (rotating calendar glyph) Headline + CTA (calendar-booking deep link) GSAP scroll-trigger animation enters heading character-by-character SECTION 2: Pain → Relief Parallax depth: 'Wasting 8 hours/month on calendar admin' fades as 'Auto-book optimized slots' slides in Mouse-parallax effect creates layering illusion SECTION 3: How It Works 3-step animated timeline (scroll-driven) Step 1: 'Connect calendar' (Outlook/Google) Step 2: 'AI learns your patterns' (demo screenshot) Step 3: 'Meetings auto-book' (real UI screengrab) SECTION 4: Proof Invented stat tile: '2,400+ hours saved by Teams' Invented quote: 'Cut my admin work by 90%' — Company Name, VP Ops (generic headshot) SECTION 5: CTA + FAQ Call-to-action button: 'Start free trial' Accordion: Common questions OUTPUT: landing.html (all CSS/JS inline, no external dependencies)
About this skill
name: landing description: Use when Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth.
Landing
Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forcing intake (product + elevator pitch, audience register, brand overrides, tone) locks down positioning before any copy or markup is written, so the page reflects the actual product rather than generic boilerplate. Use whenever the user says 'landing for X', 'create a landing page', 'build a landing page', 'make a landing page for X', 'I need a web page for Y', or provides product/service details and wants a polished website. Also triggers on 'promotional page', 'product page', 'one-pager', 'web presence', 'sales page'. Outputs a single self-contained HTML file (Claude Code) or HTML artifact (Claude.ai). Supports configurable brand colors via CSS custom property overrides.
What you get
- Public GitHub repo (alirezarezvani/claude-skills)
- the landing skill folder with SKILL.md. Part of a 337-skill / 30-agent / 70-command install.
Customize your output
- Fork the repo and adapt the skill's instructions and references to your workflow.
Example output
Activates automatically when your request matches Landing; chains with the other skills, agents, and commands in the collection.
Best for
Creators, builders, and teams using Claude Code.
SKILL.md preview
---
name: landing
description: Use when the user asks for a landing page, one-pager, product page, or promotional web page and wants a premium, animated single-page HTML site built from their product details.
version: 1.0.0
category: Marketing
author: AgentVolt
license: proprietary
tags:
- marketing
---
# Landing
Generates a premium single-page HTML landing page with 3D CSS animation, GSAP scroll effects, and mouse-parallax depth, driven by a forced intake of product and positioning details before any copy or markup is written.
## When to use
- The user says "landing for X," "create a landing page," "build a landing page," or similar
… (sign up to view the full skill)More marketing & growth skills
View all Marketing & Growth skills →Paid Ads
When the user wants help with paid advertising campaigns on Google Ads, Meta (Facebook/Instagram), LinkedIn, Twitter/X, or other ad platforms.
Onboarding CRO
When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value.
Social Media Manager
When the user wants to develop social media strategy, plan content calendars, manage community engagement, or grow their social presence across platforms.
Analytics Tracking
Set up, audit, and debug analytics tracking implementation — GA4, Google Tag Manager, event taxonomy, conversion tracking, and data quality.