Runs in: Claude Code
Codex
Cursor
Gemini CLI
GitHub Copilot
OpenCode
Install guides: Claude Code Codex Cursor Gemini CLI GitHub Copilot OpenCode How to install a skill
Generates with: Your agent's model
Tested with: Claude Code 2.1.322Claude Sonnet 5.51 real run, 10 Nov
Needs: Node 20+Chrome
Licence: Recaply licence

Dark Cinema Landing Page

A black-and-gold landing page for a cinema, film club or streaming service, with a letterboxed hero and showtimes.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Builds a dark cinema landing page into your own project: near-black with gold, a letterboxed full-bleed hero, a scrolling band of titles, this week's showtimes, membership plans and a sign-up block. Plain HTML, CSS and JavaScript, or matched to React, Next.js, Vue, Svelte, Astro or Tailwind when the project uses them. Comes with a working reference and a check that screenshots it at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, no focus styles, motion that ignores reduced motion, leftover sample words and emoji icons. Use when a cinema, film club, festival or film streaming service needs a landing page, or someone asks for a dark, gold, cinematic page.

By RecaplyUpdated 12 Nov

Similar skills

All 735 skills

Research Report Hero

Editorial hero for a report

AI Task Assistant Landing Page

Lavender page for an AI app

Aurora Headphones Landing Page

Product page for headphones

Automation Flow Landing Page

Page with a node-flow hero

What you get

One HTML file with its CSS inside: no build step, no framework
A dark cinema landing page
Checked at phone and desktop widths

Good fit

When a cinema, film club, festival or film streaming service needs a landing page, or someone asks for a dark, gold, cinematic page

Not for

An app with a backend, sign-in or a database
Copying another company's site

About this skill

You say

Build a landing page for our film festival, Harbourlight. Everything we know is in brief.md.

It said back

The Harbourlight landing page is built, and the automated check passes at 390, 768 and 1440px. It found no sideways overflow, text under 12px, missing alt text or names, low contrast, missing focus styles or motion that ignores reduced-motion settings, and no script errors. I looked at the 1440 and 390 screenshots and they read cleanly. I did not open the 768 screenshot.

Files (in the work folder)

index.html
style.css
script.js
check/390.png, check/768.png, check/1440.png

What it did in run 1

dark-cinema-landing-page
./brief.md
cd .; ls -a . .claude/skills/dark-cinema-landing-page/reference; wc -c .claude/skills/dark-cinema-landing-page/reference/*
./.claude/skills/dark-cinema-landing-page/reference/index.html
./.claude/skills/dark-cinema-landing-page/reference/script.js
cd .; R=.claude/skills/dark-cinema-landing-page/reference; cp $R/style.css $R/script.js .; grep -n "hero-bg\|\.per\b\|tier-price" style.css | head -20
cp .claude/skills/dark-cinema-landing-page/reference/style.css .claude/skills/dark-cinema-landing-page/reference/script.js . && ls
./.claude/skills/dark-cinema-landing-page/reference/style.css
./style.css
./script.js
python3 - <<'EOF' IC='<svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">' tick=IC+'<path d="M5 12l5 5 9-10"/></svg>' plus=IC+'<path d="M12 5v14M5 12h14"/></svg>' def tier(name,blurb,price,per,feat,items,btn): li=''.join(f'<li>{tick}{i}</li>' for i in items) return f'<li class="tier reveal{" featured" if feat else ""}">{"<p class=tier-flag>Best value</p>" if feat else ""}<h3>{name}</h3><p class="tier-blurb">{blurb}</p><p class="tier-price"><span class="amount">{price}</span><span class="per">{per}</span></p><a class="btn {"btn-primary" if feat else "btn-ghost"}" href="#" data-todo="checkout link">Buy {name.lower()}</a><ul class="ticks">{li}</ul></li>' def sched(d,t,l,time): return f'<li class="sched reveal"><p class="sched-day">{d}</p><div class="sched-main"><h3>{t}</h3><p>{l}</p></div><p class="sched-time">{time}</p></li>' def faq(q,a,o=False): return f'<details class="reveal"{" open" if o else ""}><summary>{q}{plus}</summary><p>{a}</p></details>' def feat(h,p,path): return f'<li class="feat reveal"><span class="feat-ic">{IC}<path d="{path}"/></svg></span><h3>{h}</h3><p>{p}</p></li>' brand='<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><circle cx="16" cy="16" r="11" fill="none" stroke="#D4AF37" stroke-width="5"/></svg><span>Harbourlight</span>' marq='Opening night gala <b>✦</b> Short film competition <b>✦</b> Animation morning <b>✦</b> Closing awards <b>✦</b> 3 to 6 April <b>✦</b> ' html=f'''<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Harbourlight Film Festival: four days of short films, 3 to 6 April</title> <meta name="description" content="Four days of short films in a coastal town, 3 to 6 April. Buy a festival pass."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,500;0,6..96,700;1,6..96,500&family=Manrope:wght@400;500;600;700&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <header class="nav"><div class="wrap nav-in"> <a class="brand" href="index.html" aria-label="Harbourlight home">{brand}</a> <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="menu">{IC}<path d="M4 7h16M4 12h16M4 17h16"/></svg><span class="sr-only">Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#programme">Programme</a></li><li><a href="#venue">Venue</a></li><li><a href="#faq">Good to know</a></li></ul><a class="btn btn-primary btn-sm" href="#passes">Buy a pass</a></nav> </div></header> <main id="main"> <section class="hero hero-cover"><div class="hero-bg"><svg viewBox="0 0 400 300" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#07101A"/><stop offset="1" stop-color="#1F3345"/></linearGradient><linearGradient id="beam" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#D4AF37" stop-opacity=".55"/><stop offset="1" stop-color="#D4AF37" stop-opacity="0"/></linearGradient></defs><rect width="400" height="300" fill="url(#sky)"/><path d="M262 92L400 40V150Z" fill="url(#beam)"/><circle cx="60" cy="50" r="1.2" fill="#F2EEE6"/><circle cx="120" cy="30" r="1" fill="#F2EEE6"/><circle cx="180" cy="62" r="1.2" fill="#F2EEE6"/><circle cx="330" cy="22" r="1" fill="#F2EEE6"/><path d="M0 300V218L60 210L130 222L200 214L260 224L330 212L400 220V300Z" fill="#0F1A24"/><path d="M252 232L258 110H266L272 232Z" fill="#0B0F14"/><rect x="255" y="96" width="14" height="14" fill="#D4AF37"/><path d="M253 96L262 84L271 96Z" fill="#0B0F14"/><path d="M0 300V256L80 250L160 258L240 250L320 258L400 252V300Z" fill="#05080B"/></svg></div><div class="wrap hero-in reveal"><p class="kicker">3 to 6 April · Short films by the sea</p><h1>Four days of <em>short films</em> by the water</h1><p class="hero-sub">Harbourlight takes over the old lifeboat station in a coastal town for an opening night gala, a short film competition, an animation morning and the closing awards.</p><div class="hero-ctas"><a class="btn btn-primary" href="#passes">Buy a festival pass{IC}<path d="M5 12h14M13 6l6 6-6 6"/></svg></a><a class="btn btn-ghost" href="#programme">See the programme</a></div></div></section> <div class="marquee" aria-hidden="true"><div class="marquee-track"><span>{marq}</span><span>{marq}</span></div></div> <section class="sec schedule" id="programme" aria-labelledby="programme-h"><div class="wrap"><div class="sec-head"><h2 id="programme-h">The <em>programme</em></h2><p class="sec-sub">Four days, 3 to 6 April. Day-by-day dates, times and film titles are still to be confirmed.</p></div><ul class="sched-list"> {sched("Opening","Opening night gala","The festival opens. Film titles and start time to be confirmed.","Time TBC")} {sched("3 to 6 Apr","Short film competition","Short films in competition. Screening dates and titles to be confirmed.","Time TBC")} {sched("3 to 6 Apr","Animation morning","A morning of animated shorts. Date and titles to be confirmed.","Time TBC")} {sched("Closing","Closing awards","The festival closes with the awards. Time to be confirmed.","Time TBC")} </ul></div></section> <section class="sec features" id="venue" aria-labelledby="venue-h"><div class="wrap"><div class="sec-head"><h2 id="venue-h">The festival <em>in brief</em></h2></div><ul class="feat-list"> {feat("Four days","From 3 to 6 April, in a coastal town.","M12 7v5l3 2M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18")} {feat("Short films","A competition, an animation morning, an opening gala and closing awards.","M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z")} {feat("The old lifeboat station","Our venue is step-free.","M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z")} </ul></div></section> <section class="sec pricing" id="passes" aria-labelledby="passes-h"><div class="wrap"><div class="sec-head"><h2 id="passes-h">Choose your <em>pass</em></h2></div><ul class="tiers"> {tier("Day pass","For a single day at the festival.","€18","/ day",False,["Entry for one day"],"")} {tier("Full festival","All four days, 3 to 6 April.","€55","/ festival",True,["Entry for all four days","Opening night gala and closing awards"],"")} {tier("Student","A reduced price for students.","€30","/ festival",False,["Student pass (what it covers and ID rules to be confirmed)"],"")} </ul></div></section> <section class="sec faq" id="faq" aria-labelledby="faq-h"><div class="wrap faq-in"><div class="sec-head"><h2 id="faq-h">Good to <em>know</em></h2></div><div class="faq-list"> {faq("When is the festival?","Harbourlight runs for four days, from 3 to 6 April.",True)} {faq("Where is it held?","At the old lifeboat station in a coastal town. The venue is step-free.")} {faq("Which pass should I choose?","A day pass is €18 for one day. The full festival pass is €55 for all four days. The student pass is €30.")} {faq("What is on?","An opening night gala, a short film competition, an animation morning and the closing awards.")} </div></div></section> <section class="sec cta" id="cta" aria-labelledby="cta-h"><div class="wrap"><div class="cta-box reveal"><h2 id="cta-h">See you at the <em>harbour</em></h2><p>Get the full programme as soon as it is announced.</p><form class="inline-form" data-form><label class="sr-only" for="cta-email">Email address</label><input id="cta-email" type="email" name="email" required placeholder="you@example.com" autocomplete="email"><button class="btn btn-primary" type="submit">Send me the programme</button><p class="form-status" role="status" aria-live="polite"></p></form></div></div></section> </main> <footer class="foot"><div class="wrap foot-in"><div class="foot-brand"><a class="brand" href="index.html">{brand}</a><p>Four days of short films in a coastal town, 3 to 6 April.</p></div><nav class="foot-col" aria-label="Festival"><h2>Festival</h2><ul><li><a href="#programme">Programme</a></li><li><a href="#passes">Passes</a></li></ul></nav><nav class="foot-col" aria-label="Visit"><h2>Visit</h2><ul><li><a href="#venue">The venue</a></li><li><a href="#faq">Good to know</a></li></ul></nav><nav class="foot-col" aria-label="Stay in touch"><h2>Stay in touch</h2><ul><li><a href="#cta">Programme updates</a></li></ul></nav></div><div class="wrap foot-small"><p>© <span data-year>2026</span> Harbourlight Film Festival.</p></div></footer> <script src="script.js" defer></script> </body> </html> ''' open('index.html','w').write(html) EOF node .claude/skills/dark-cinema-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -30
./index.html
node .claude/skills/dark-cinema-landing-page/scripts/check.mjs index.html --out check 2>&1 | tail -30
./check/1440.png
./check/390.png
Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 2 min 10 s · $0.47 of API use

Questions

Is Dark Cinema Landing Page free?

No. Dark Cinema Landing Page costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Dark Cinema Landing Page?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Dark Cinema Landing Page?

A ZIP of the whole skill folder (40 KB): the SKILL.md your agent follows and its 6 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Dark Cinema Landing Page?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./dark-cinema-landing-page with your agent's flag.

What do I get from Dark Cinema Landing Page?

One HTML file with its CSS inside: no build step, no framework. A dark cinema landing page. Checked at phone and desktop widths.

What does Dark Cinema Landing Page need?

Node 20+ and Chrome, and no API key. Each use costs nothing beyond your agent.

How big is Dark Cinema Landing Page?

7 files, about 30,456 tokens in all. The SKILL.md is about 2,664 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 2 min 10 s to 2 min 10 s and $0.47 to $0.47 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Dark Cinema Landing Page to use it?

Type /dark-cinema-landing-page first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.