nexu-io/open-design
Use this plugin when the user wants a high-end luxury real-estate / architecture landing page with cinematic scroll choreography: a typewriter preloader that lifts away, a scroll-driven house image that rises from below and scales up while pinning to a dark statement section, a sticky dark stats band with count-up numbers, and a hover-expand video gallery that slides up over the dark section. Invoke for 'luxury real estate landing page', 'architecture brand site', 'scroll-driven hero with rising
npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/velar-luxury-real-estate"Source checked Jul 28, 2026·Refresh due Oct 26, 2026
Reorganized from the pinned upstream SKILL.md
Produce a single-page, cinematic luxury real-estate landing page. A complete, rendered reference implementation ships beside this skill at example.html — start from it. Copy example.html, then adjust copy and data; do not rewrite the choreography or invent a new visual language.…
npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/velar-luxury-real-estate"The pinned source contains enough sections and task detail for a source-grounded deep guide; automated content is still not an independent test.
1,346 source words · 10 usable sections
Content brief
Content workflow
Sections are extracted automatically from the pinned SKILL.md and link back to the source.
Page background f5f0ea (warm off-white). Body wrapper overflow-x: clip.
Default output: a single self-contained HTML file (the example.html seed) using vanilla CSS + JS. It already includes everything inline.
Fixed full-viewport overlay (z-index:100, bg 213138, centered flex). Typewriter of Velar. in Syne 2.6rem, white, letter-spacing:-0.02em; letters weight 700 except . weight 900. Blinking white cursor (3px × 1.1em rounded bar, blink 0.7s step-end infinite, opacity 0↔1) follows the…
Fixed top nav z-50, padding px-6 md:px-10 lg:px-16, py-5 md:py-6, flex justify-between. Left: Velar. in Syne text-xl, weight 700 letters / 900 dot, color = navColor. Right: hamburger — two stacked 28px×1px lines, top shrinks to w-5 on hover; when open swaps to Lucide X (size 24).
position:relative; min-height:100vh; overflow:visible, BGIMG as cover/center background. Hero text block z-index:10, hidden initially, fades+slides in per preloader timing.
SkillSignal prompt templates
These prompts were written by SkillSignal from the source structure; they are not upstream text.
Source-grounded prompt
Use for a content task while explicitly checking the source sections.
Use velar-luxury-real-estate for this content task: [task]. Inputs and constraints: [details]. Work through these pinned SKILL.md sections: “Global setup — locked”, “Stack”, “Section 1 — Preloader / intro overlay”, “Section 2 — Fixed nav”, “Section 3 — Hero”. Cite the concrete requirements that shape each step, do not invent capabilities absent from the source, and verify the result against: [acceptance criteria].
Content checklist
The source section “Global setup — locked” has been checked.
The source section “Stack” has been checked.
The source section “Section 1 — Preloader / intro overlay” has been checked.
The source section “Section 2 — Fixed nav” has been checked.
Choose a different workflow
Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.
Open source detailUse when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "
A separate implementation from MoizIbnYousaf/marketing-cli; compare its source, maintenance signals, and permission requirements.
Open source detailCreate new marketing skills for the mktg playbook. Use when the agent needs to add a new capability, someone says 'create a skill', 'new skill', 'add a marketing skill', 'extend the playbook', 'I need a skill for X', 'build a skill', 'make a skill for Y', or 'add capability for Z'. Also use when someone wants to capture a marketing workflow they just did into a reusable skill, or when they say 'turn this into a skill'. Reads the skill contract, generates SKILL.md with correct frontmatter and str
A separate implementation from MoizIbnYousaf/marketing-cli; compare its source, maintenance signals, and permission requirements.
Open source detailFAQ
Produce a single-page, cinematic luxury real-estate landing page. A complete, rendered reference implementation ships beside this skill at example.html — start from it. Copy example.html, then adjust copy and data; do not rewrite the choreography or invent a new visual language.…
The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/velar-luxury-real-estate". Inspect the command and pinned source before running it.
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Compare before choosing
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
Use when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "
Create new marketing skills for the mktg playbook. Use when the agent needs to add a new capability, someone says 'create a skill', 'new skill', 'add a marketing skill', 'extend the playbook', 'I need a skill for X', 'build a skill', 'make a skill for Y', or 'add capability for Z'. Also use when someone wants to capture a marketing workflow they just did into a reusable skill, or when they say 'turn this into a skill'. Reads the skill contract, generates SKILL.md with correct frontmatter and str
Generate visual asset briefs, ad copy variants, AI image prompts, video scripts, and storyboards. Full creative production system with 5 specialized modes: product photos, product video, social graphics, talking heads, and ad creative. Make sure to use this skill whenever the user mentions any visual or creative marketing need — ad creative, image prompts, video scripts, thumbnails, banners, social graphics, product photography, storyboards, or marketing visuals of any kind. Even if they just sa
When the user wants to plan, map, or restructure their website's page hierarchy, navigation, URL structure, or internal linking. Also use when the user mentions "sitemap," "site map," "visual sitemap," "site structure," "page hierarchy," "information architecture," "IA," "navigation design," "URL structure," "breadcrumbs," "internal linking strategy," "website planning," "what pages do I need," "how should I organize my site," or "site navigation." Use this whenever someone is planning what page
Produce a single-page, cinematic luxury real-estate landing page. A complete, rendered reference implementation ships beside this skill at example.html — start from it. Copy example.html, then adjust copy and data; do not rewrite the choreography or invent a new visual language. The seed already encodes the exact tokens, preloader typewriter, scroll-driven house animation, sticky dark stats band, count-up, and hover-expand gallery described below.
This is the authoritative build brief. Follow it exactly — the named colors, fonts, timings, image URLs, and the scroll-math are locked.
Inlined image (critical): example.html ships the building/house silhouette (HOUSE_IMG, originally res.cloudinary.com/.../building_bzziky.png) as an inlined data:image/webp;base64,… URI — keep it exactly as-is. The 5 cloudfront gallery .mp4 videos and the BG_IMG higgs.ai hero background stay as remote URLs (large stable CDNs); the cloudinary host is the one to inline because it is the load-bearing, repeatedly-scaled centerpiece asset.
example.html seed) using vanilla CSS + JS. It already includes everything inline.lucide-react for icons (the hamburger→X). All animation logic lives in a single src/App.tsx using useState, useEffect, useRef, useCallback, and IntersectionObserver. No other libraries. Do not change the design while porting.#f5f0ea (warm off-white). Body wrapper overflow-x: clip.@import in an inline <style>: Syne (400, 700, 800, 900) + Inter (300, 400, 500, 600) from Google Fonts.GRASS_GREEN = '#213138' (preloader bg + default logo color), FULL_TEXT = 'Velar.', HOUSE_IMG (inlined data URI in the seed), BG_IMG (higgs.ai hero bg), and the 5 cloudfront gallery videos (in order — keep them).Fixed full-viewport overlay (z-index:100, bg #213138, centered flex). Typewriter of Velar. in Syne 2.6rem, white, letter-spacing:-0.02em; letters weight 700 except . weight 900. Blinking white cursor (3px × 1.1em rounded bar, blink 0.7s step-end infinite, opacity 0↔1) follows the last typed letter.
Timings (setTimeout): CHAR_INTERVAL=140ms, TYPE_START=600ms. Reveal letter i at TYPE_START + i*CHAR_INTERVAL. LIFT_AT = TYPE_START + 6*CHAR_INTERVAL + 700. Hide cursor at LIFT_AT-150. At LIFT_AT, lift overlay translateY(-100%) with transform 1.5s cubic-bezier(0.45,0,0.15,1) AND trigger the house rise. At LIFT_AT+1300, fade in hero text (opacity 0→1, translateY(-28px)→0, 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s). At LIFT_AT+2100, set liftDone, disable overlay transition (parked off-screen), and hand house control to the scroll handler.
Fixed top nav z-50, padding px-6 md:px-10 lg:px-16, py-5 md:py-6, flex justify-between. Left: Velar. in Syne text-xl, weight 700 letters / 900 dot, color = navColor. Right: hamburger — two stacked 28px×1px lines, top shrinks to w-5 on hover; when open swaps to Lucide X (size 24).
Scroll behavior: if any dark section (Section 5 dark band + Section 6 gallery) overlaps the viewport top (rect.top <= 0 && rect.bottom > 0), navColor = '#ffffff', else '#213138'. Transition color 0.35s ease.
Mobile menu: full-screen #f5f0ea overlay (z-40), centered, 4 stacked links — Residences, Story, Listings, Inquire — Syne text-4xl, font-light, tracking-widest, uppercase, black, hover text-gray-500. Click closes.
<section> position:relative; min-height:100vh; overflow:visible, BG_IMG as cover/center background. Hero text block z-index:10, hidden initially, fades+slides in per preloader timing.
.hero-heading-top (px-6 md:px-10 lg:px-16, flex items-end justify-between, margin-bottom:-0.04em): left LIVE IN (.hero-own-the, Syne 800, uppercase, black, letter-spacing:-0.03em, line-height:1); right desktop-only .hero-subtitle-desktop (Syne 700, clamp(10px,0.95vw,14px), max-width 300, opacity 0.7, right-aligned): "Stately homes built with vision, / scope, and architectural finesse."overflow:hidden): IRREPLACEABLE (.hero-extraordinary, Syne 800, uppercase, black, letter-spacing:-0.03em, px-6 md:px-10 lg:px-16)..hero-subtitle-mobile (px-6, Syne 600, clamp(12px,3vw,15px), opacity 0.65, margin-top:0.9em): "Premium real estate with vision, / depth, and architectural clarity."Responsive type sizes are locked — copy the three @media blocks verbatim from the seed (<=639, 640–1023, >=1024); they swap desktop/mobile subtitles, set padding-top, and size .hero-own-the / .hero-extraordinary.
position:fixed wrapper z-index:22, pointer-events:none, will-change:transform, default bottom:0; left:50%; transform:translateX(-50%); width:100%; min-width:1400px. Inner div entrance: starts translateY(102vh), transitions to translateY(0) via transform 1.5s cubic-bezier(0.45,0,0.15,1) 0.4s when lifting becomes true; once liftDone the transition is removed so the scroll handler takes over. Renders HOUSE_IMG at width:100%, aria-hidden.
After liftDone, updateHousePosition (scroll+resize) computes — locked math:
baseW = max(innerWidth, 1400).triggerPoint = -(heroH * 0.30); endPoint = heroRect.top - (darkRect.bottom - vh); progress = clamp((heroRect.top - triggerPoint)/(endPoint - triggerPoint), 0, 1).t = smoothstep(smoothstep(progress)), smoothstep(x)=x*x*(3-2x) applied twice.startX=(vw-baseW)/2, startY=vh-imgH; finalScale=1.45, finalX=(vw-baseW*finalScale)/2, mobileOffset = vw<1024 ? -250 : 4, finalY = darkRect.bottom - imgH*finalScale + 500 + mobileOffset.currentX/Y/Scale linearly via t.progress <= 0 → reset to resting (bottom-centered, scale 1). Else top:0; left:0; transform: translate(currentX,currentY) scale(currentScale); transform-origin: top left.Outer position:relative; height:200vh; z-index:20. A 4vh #1a1a1a spacer, then inner .s2-section position:sticky; top:0; height:100vh; background:#1a1a1a; overflow:hidden. Content .s2-content flex column, px-6 md:px-10 lg:px-16, padding-top:clamp(30px,4vw,60px), padding-bottom:clamp(60px,8vw,120px).
.s2-statement (Inter 300, #e8e4df, letter-spacing:-0.02em, line-height:1.35, white-space:nowrap, clamp(22px,2.6vw,42px)); wrapper max-width:1200px, centered, padding-left:25%. Four hard-broken lines: "Every estate we present is hand-chosen / through a frame of permanence, refinement, / and timeless detail. Standards are not / a flourish. It is our discipline.".s2-stats-row (same max-width/centered/padding-left:25%, margin-top:clamp(48px,6vw,80px)): 3 flex columns, flex:1, left border 1px solid rgba(255,255,255,0.2) between items, padding-left:clamp(20px,2.5vw,40px) on items 2–3:
120+ — Portfolio Holdings12 — Global Locations98% — Patron Loyalty Rateclamp(36px,4.5vw,72px), line-height:1.1. CountUp: when the element first crosses 30% into viewport (IntersectionObserver), animate 0→end over 2000ms, easing 1-(1-t)^3, render Math.round(eased*end)+suffix.rgba(255,255,255,0.6), clamp(12px,1.1vw,16px), margin-top:clamp(4px,0.5vw,8px), letter-spacing:0.01em.<=767px: drop the 25% left padding to 0. 768–1023px: padding-left 15%, min-height:70vh..s3-gallery-section position:relative; z-index:25; margin-top:-100vh; background:#1a1a1a; height:100vh; overflow:hidden — the negative margin + higher z slides it up over the sticky dark section. Background ticker .s3-ticker-wrap (inset:0, flex center, overflow:hidden, z-index:0, pointer-events:none) with .ticker-track of two copies of a giant repeating Velar. word-mark; each span Syne 800, clamp(100px,14vw,220px), white, low opacity, white-space:nowrap, letter-spacing:-0.02em, user-select:none, padding-right:0.3em.
Gallery content .s3-gallery-content (z-index:1, flex center, full height, clamp(24px,4vw,60px)). Row .gallery-expand-row (flex, gap:6px, height 70%, max-width 1200px). Each .gallery-expand-item (flex:1 1 0%, full height, border-radius:12px, overflow:hidden, cursor:pointer, transition: flex 0.5s cubic-bezier(0.4,0,0.2,1)) holds its video (autoplay, loop, muted, playsInline, object-fit:cover). On hover the hovered item grows to flex:4, others shrink (accordion expand).
<=1023px: copy the mobile grid rules verbatim from the seed — s3-gallery-section becomes height:auto; min-height:100vh; overflow:visible; ticker becomes sticky; row becomes a 1fr 1fr grid with aspect-ratio:4/5 items and a centered full-width last-odd item; <=479px tightens padding/gap.
react, react-dom, lucide-react, Tailwind, Vite. No other libraries.App.tsx. Use Supabase only if persistence is later needed; this page has no data layer.Warm off-white #f5f0ea page; deep teal #213138 for preloader + default logo; dark #1a1a1a for the statement/gallery sections; statement text #e8e4df; hero text black. Do not introduce other accent hues — the palette is intentionally monochromatic-luxury.