Skip to main content
affpapa.org
RU EN
plugin

landing — Claude Code plugin: a one-page site in a single HTML file

Builds a premium landing page as one self-contained HTML file: GSAP motion, mouse parallax, three sections.

Install into Claude Code · Plugin marketplace All methods and platforms ↓ 
/plugin marketplace add alirezarezvani/claude-skills
/plugin install landing@claude-code-skills
Open on GitHub

What landing does

The plugin asks 3–4 questions one at a time and won't move on without answers. First the product name and a one- or two-sentence pitch, then the audience register (technical, business, consumer, internal), then tone and brand colors. The default is dark navy with teal; you can supply a primary HEX, an accent and a background, and if you give only the primary the rest is derived algorithmically.

What comes out is a single .html file: a 100vh hero with a GSAP timeline entrance and depth layers behind the headline, a three-column feature grid (two columns at 900px, one at 580px) with SVG icons that reveal on scroll, and a closing CTA with a radial glow behind the button. CSS and JS live inside the file; the only externals are Google Fonts and GSAP from a CDN. Output goes to ${OUTPUT_DIR}/<product-name-kebab>.html, with ./landing-pages/ as the default directory.

Three stdlib Python scripts ship with it: brand_palette_validator.py checks HEX values and WCAG contrast, kebab_slug_generator.py turns a product name into a slug and flags duplicates, html_validator.py checks the generated markup. Don't confuse it with product-team/skills/landing-page-generator/ — that one emits Next.js TSX aimed at conversion and lead capture. Pick that one if you want form fills; pick this one when the page itself has to carry the impression.

What it helps with

  • ship a launch page as one file
  • set brand colors and check their contrast before generating
  • get entrance and scroll-reveal animation without hand-coding it
  • turn a product name into a slug and catch duplicates
  • run a structural check on the generated HTML

Example prompts for the agent

  • /cs-landing
  • create a landing page for Quill AI, pitch: a writing assistant
  • build a one-pager with primary #FF6B35 and accent #2EC4B6

How to install landing

Plugin marketplace

/plugin marketplace add alirezarezvani/claude-skills
/plugin install landing@claude-code-skills

Step by step, with commands for each platform: Claude Code plugins: marketplaces, installing, and building your own

From the same set394

The whole set →
aeo A skill that tunes content so language models cite it as an authoritative source. The target is the answer, not the search ranking. ★ 28,733repo stars notebooklm Drives Google NotebookLM from Claude: reads notebooks, adds sources, generates Studio outputs and creates new notebooks. ★ 28,733repo stars dossier Builds a dossier on a company, person or nonprofit that tests your hypothesis instead of summarising public facts. Useful before a meeting, a hire or a deal. ★ 28,733repo stars deep-research A Claude plugin that runs research through nine phases and demands at least three independent sources per thesis. Built for questions where a wrong answer costs more than the tokens. ★ 28,733repo stars deep-work Turns a task list into a time-blocked day with deep blocks, a shallow-work budget and focus-hour tracking. ★ 28,733repo stars roast Runs five independent reviewers over one idea and returns a single verdict: GO, RESHAPE or KILL. ★ 28,733repo stars reflect-skill Halts detail work and re-reads the whole conversation from the original goal, so you can see where the direction drifted. ★ 28,733repo stars handoff-engineering Compacts the current session into a markdown handoff so a fresh agent can continue. References artifacts by path or URL instead of copying them. ★ 28,733repo stars

Similar

landing-page jezweb Generates a deployable, single-file landing page using Tailwind CSS from a quick brief. CX Codex +1 1,500installs landing-page-design omer-metin A skill that turns your agent into a landing page specialist, with reference files for building, diagnosing and validating pages. CX Codex +1 447installs landing-page-copywriter OneWave-AI Writes conversion copy for landing pages, waitlists, and pricing tables using PAS, AIDA, or StoryBrand. Generates structured sections and headline variants without touching frontend code. CX Codex +1 6,500installs landing-optimizer aaron-he-zhu Audits a landing page that receives creator-campaign traffic: message match, page structure, CTA and promo codes. Useful when clicks arrive but conversion stalls. CX Codex +1 1,100installs landing-experience-checker aaron-he-zhu Audits destination pages against ad copy before launching paid campaigns. Flags headline mismatches, above-the-fold gaps, load speed, and form friction. CX Codex +1 1,000installs landing-page-conversion-audit official github Audits landing pages and checkouts for conversion leaks on paid traffic. It returns an action list ranked by revenue impact. 28installs

Nearby in Marketing and content

Everything for Marketing and content →

Questions about landing

How do I install landing in Claude?

Add the marketplace with /plugin marketplace add alirezarezvani/claude-skills, then install the plugin with /plugin install landing@claude-code-skills.

What does landing do?

It runs a short intake on product, audience, brand and tone, then generates one self-contained HTML file with a hero, a feature grid and a closing CTA.

How is landing different from landing-page-generator?

landing-page-generator in product-team outputs Next.js TSX and Tailwind for conversion and A/B tests. This plugin produces a single HTML file with GSAP motion, for pages where the visual impression matters more.

Source text

landing · MIT 
# landing

Premium single-file HTML landing page generator. Outputs one polished `.html` file with GSAP 3D animations, scroll-triggered reveals, and mouse-parallax depth — all CSS inline, all JS inline, only externals are Google Fonts + GSAP via CDN.

## Important: distinct from `product-team/skills/landing-page-generator/`

This is **NOT** the same skill as the existing `landing-page-generator` in `product-team/`. They serve different needs:

| Skill | Output format | Optimization target | Animation approach | When to use |
|---|---|---|---|---|
| **`marketing/landing/`** (this skill) | Single self-contained `.html` file | **Visual premium / one-pager** | GSAP 3D + mouse parallax + scroll-trigger | Launch page, product showcase, brand site where the page IS the experience |
| **`product-team/skills/landing-page-generator/`** | Next.js TSX components + Tailwind | **Conversion / lead-gen** | Static, copy-framework-driven (PAS / AIDA / BAB) | Lead capture, A/B test variants, campaign pages where conversion rate is the goal |

If you want the prospect to **convert** → use `landing-page-generator`.
If you want the prospect to **be impressed** → use `landing`.

Both are valid; they sit at different points on the visual-premium / conversion-optimization axis.

## What this skill does

Run via `/cs-landing` or trigger phrases like "create a landing page" / "build a landing page".

The skill walks **3–4 forcing intake questions** (one at a time, dependency-ordered):

1. **Product / service** — name + 1–2 sentence elevator pitch (refuses vague answers)
2. **Audience register** — technical / business / consumer / internal (forcing choice)
3. **Brand overrides** — default dark navy + teal, OR provide primary HEX + accent HEX + optional bg HEX (algorithmic derivation if only primary given)
4. **Tone** — professional / playful / authoritative / minimal (forcing choice)

Then generates a single `.html` file with three sections:

- **Hero** — 100vh, animated entrance via GSAP timeline, depth layers behind H1, mouse parallax
- **Features** — 3-column grid (responsive: 2-col at 900px, 1-col at 580px), SVG icons, scroll-triggered card reveals
- **Closing CTA** — ambient radial-gradient glow behind button, large closing headline

Output path: `${OUTPUT_DIR}/<product-name-kebab>.html` (default `${OUTPUT_DIR}=./landing-pages/`).

## Plugin layout

```
marketing/landing/
├── .claude-plugin/plugin.json
├── README.md
├── agents/cs-landing.md             ← landing-generation persona, FOUC-prevention enforcer
├── commands/cs-landing.md           ← /cs-landing
└── skills/landing/
    ├── SKILL.md                     ← Path-B converted from megaprompt 04
    ├── references/
    │   ├── brand_system_design.md   ← color theory + override patterns (7+ sources)
    │   ├── gsap_animation_patterns.md  ← entrance + scroll-trigger + parallax + CSS floats (7+ sources)
    │   └── single_file_html_discipline.md  ← why inline + CDN-only externals (7+ sources)
    └── scripts/
        ├── brand_palette_validator.py  ← stdlib: HEX validation + WCAG contrast + derived palette
        ├── kebab_slug_generator.py     ← stdlib: product-name → kebab slug + duplicate detection
        └── html_validator.py           ← stdlib: post-generation structural check
```

## Quick start

```bash
# Validate a brand override before generation
python skills/landing/scripts/brand_palette_validator.py \
  --primary "#FF6B35" --accent "#2EC4B6" --bg "#011627"

# Generate output filename
python skills/landing/scripts/kebab_slug_generator.py \
  --product "Quill AI" --output-dir ./landing-pages

# Validate generated HTML structurally
python skills/landing/scripts/html_validator.py --file ./landing-pages/quill-ai.html
```

## Source spec

`megaprompts/04-landing-megaprompt.md` (maintainer-local draft spec — gitignored, not in the public repo) (PR #657). The megaprompt is canonical; this plugin is the working implementation. Drift between the two is a bug — re-grill with `/cs-grill-with-docs` if they diverge.

## License

MIT.

© Alireza Rezvani · MIT · alirezarezvani/claude-skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor