Verified installable Agent Skill
SKILL.md + .skillInstall into your agent.
npx skills add LearnPrompt/goodcase-lite --skill web-section-recreation-spec --global --copy --yes --full-depthLoading…
Loading…
GoodCase Official Skill · Shared method across creators
Turn a single hero, footer, pricing block, or 404 page into a pixel-level spec a coding agent can build as written.
152 Cases · 5 Creators · AI Coding (UI) · Latest example 09/19/2026
Verified installable Agent Skill
SKILL.md + .skillnpx skills add LearnPrompt/goodcase-lite --skill web-section-recreation-spec --global --copy --yes --full-depthMethod skeleton
Case evidence
Copy the full site-building prompt into an AI coding tool (Cursor, v0, Claude and others) to generate the page section for Quantum Lucid, then swap in your own copy, brand and asset links to reuse it. A free MotionSites prompt case; the site does not list its creator, so attribution goes to MotionSites.
Prompt
Build a SINGLE standalone file: index.html (inline CSS + JS, no frameworks, no extra files). Recreate this exact Quantum² marketing landing page pixel-for-pixel: one-screen hero, black pill nav, two-line headline, subcopy, Get Started, ful…
Copy the full site-building prompt into an AI coding tool (Cursor, v0, Claude and others) to generate the page section for Rare Gallery, then swap in your own copy, brand and asset links to reuse it. A free MotionSites prompt case; the site does not list its creator, so attribution goes to MotionSites.
Prompt
Build a single-page luxury brand landing (navbar + full-viewport hero only). Stack: React 18 + TypeScript + Vite + Tailwind CSS 3. No extra UI kits. Use lucide-react only for the Flower2 icon. Page title: Aurevon. Root wrapper: bg-black. h…
Copy the full site-building prompt into an AI coding tool (Cursor, v0, Claude and others) to generate the page section for Palomar Labs, then swap in your own copy, brand and asset links to reuse it. A free MotionSites prompt case; the site does not list its creator, so attribution goes to MotionSites.
Prompt
Build a standalone pixel-accurate recreation of the Palomar Labs marketing landing page: fixed navbar + full-viewport video hero only. No other sections. Match this spec exactly. Do not invent extra copy, buttons, gradients, overlays, or d…
Copy the full site-building prompt into an AI coding tool (Cursor, v0, Claude and others) to generate the page section for Quantum Core, then swap in your own copy, brand and asset links to reuse it. A free MotionSites prompt case; the site does not list its creator, so attribution goes to MotionSites.
Prompt
# PROMPT — Recreate the "Apogee" Hero Section Exactly Build a pixel-exact, fully mobile-responsive hero landing section called **"Apogee"**. Follow every specification below literally — exact hex values, exact pixel numbers, exact class na…
Single-file HTML recreation of the Vesper.ai one-screen landing page, using inline CSS and a small IIFE for the menu and animation fallback, with no framework and no dependencies. Useful for learning how to fit a whole page spec into one file.
Prompt
Recreate this exact single-viewport landing page for **Vesper.ai**. Document title: `Vesper.ai — Operational AI Infrastructure`. `lang="en"`. One HTML file with inline CSS and a small IIFE for the menu + animation fallback. Pure black `#00…
One-screen DeFi hero with a private-bank feel, locked to a single screen with no scrolling, built with React 18 and Tailwind. Useful for learning financial-style typography and controlling information density on one screen.
Prompt
Build a **single full-screen hero section** for a DeFi / private-banking landing page called **LŪMEN // ÍNDEX**. Use **React 18 + TypeScript + Vite + Tailwind CSS**, with `lucide-react` for icons. The entire page is ONE component rendering…
A strict single-page SaaS hero recreation task that explicitly forbids adding sections or copy on your own. Plain HTML, CSS, and JS only, good for practicing delivery to spec without improvising.
Prompt
**Recreate this exact single-page SaaS hero. Do not invent extra sections, extra pages, extra images, or extra copy. Implement only what is specified. Stack: one `index.html`, one `styles.css`, one `main.js`. No frameworks.** ### What this…
A single self-contained index.html with no build, no framework and no external JS, where all numeric requirements must match exactly. Suited to testing a model's ability to deliver to spec at pixel level.
Prompt
Build a **single self-contained `index.html`** file. No build step, no framework, no external JS, no local image files. All CSS in one `<style>` block in `<head>`; one small `<script>` before `</body>`. Match every number below exactly — t…
One-screen hero with no scrolling, where a live-refracting liquid-glass card floats over a full-width looping video. The refraction is both the technical challenge and the memorable part.
Prompt
Build a single-screen, non-scrolling hero landing page called **Terranova — Signals from the Deep Green**. It is a full-bleed looping background video with a real-time refractive "liquid glass" card floating over it, plus a slide-in fullsc…
Light-background hero for the Stellar.ai landing page, using Inter and a max-w-7xl grid. One of the few light-themed entries in this batch, useful for studying color inversion against the dark versions.
Prompt
Create a "Stellar.ai" landing page hero section using React, Tailwind CSS, and Lucide React icons. Use the Inter font (imported from Google Fonts). The page has a white background (bg-white), max-width max-w-7xl, and is centered with mx-au…
Full-screen dark hero with a looping video, navigation, a large headline and a logo marquee at the bottom. All theme colors sit in CSS variables, so changing one variable swaps the brand.
Prompt
Create a full-screen dark hero section with a looping background video, navbar, headline, subtitle, CTA button, and a logo marquee at the bottom. Here are the exact specifications: Theme & Colors (index.css CSS variables): Background: 260 …
First screen for an AI floral platform, with liquid-glass morphism layered over a looping video background. The way the glass layer works with the video base is the part that can be lifted out whole.
Prompt
Create a full-screen hero landing page for "Bloom" — an AI-powered plant/floral design platform. The design uses a liquid glass morphism aesthetic over a looping video background. Background Full-screen autoplaying, looping, muted video ba…
Creator practice
Creator practices derived from this shared method, including versions not yet listed in the catalog.
Creator evidence
A Skill is a derived reading layer. Every claim must trace back to published Cases.