Run any Skill in Manus with one click

codenest-coding-platform

Use this plugin when the user wants a high-end, dark cinematic hero section for a coding-education / bootcamp landing page (CodeNest): full-screen HLS background video, liquid-glass card, green-accent typography, and a working mobile hamburger menu. Invoke for 'coding bootcamp hero', 'dev course landing page', 'liquid glass hero', 'video background hero', or when the user references the CodeNest template.

Run Skill in Manus

Stars62,518

Forks6,985

UpdatedJune 9, 2026 at 17:04

Source

nexu-io

nexu-io/open-design

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

File Explorer

3 files

SKILL.md

readonly

name	codenest-coding-platform
description	Use this plugin when the user wants a high-end, dark cinematic hero section for a coding-education / bootcamp landing page (CodeNest): full-screen HLS background video, liquid-glass card, green-accent typography, and a working mobile hamburger menu. Invoke for 'coding bootcamp hero', 'dev course landing page', 'liquid glass hero', 'video background hero', or when the user references the CodeNest template.
version	0.1.0
od	{"mode":"prototype","surface":"web","scenario":"design","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false}}

CodeNest — Coding Platform Hero

Produce a high-end, dark-themed hero section for a coding-education platform called CodeNest. 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 CSS or invent a new visual language. The seed already encodes the exact tokens, liquid-glass treatment, glow, grid lines, video wiring, and responsive behavior described below.

This is the authoritative build brief. Follow it exactly — the named colors, fonts, video stream, and effects are locked.

Stack

Default output: a single self-contained HTML file (the example.html seed). It includes everything inline (CSS + vanilla JS) and loads hls.js from a CDN.
If the user explicitly asks for a React + Tailwind project, port the seed faithfully: same tokens, same markup structure, lucide-react for icons (ArrowRight, Menu, X), Inter / Plus Jakarta Sans / Instrument Serif (italic) from Google Fonts, and hls.js for the video. Do not change the design while porting.

Background video (keep remote — do NOT inline)

Full-screen background video via the HLS stream https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8.
Use hls.js with enableWorker: false for sandbox stability. If the browser supports native HLS (video.canPlayType('application/vnd.apple.mpegurl')), assign video.src directly; otherwise attach via new Hls({ enableWorker: false }).
<video autoplay muted loop playsinline>, object-fit: cover, fixed full-screen, opacity 0.6.
This large CDN media stays a remote URL — never inline an HLS stream.

Overlays & atmosphere

Left gradient: linear-gradient(to right, #070b0a 0%, rgba(7,11,10,0.55) 35%, transparent 70%).
Bottom-up gradient: linear-gradient(to top, #070b0a 0%, rgba(7,11,10,0.4) 30%, transparent 60%) for readability.
Grid system: three thin vertical lines, rgba(255,255,255,0.10), 1px wide, positioned at 25% / 50% / 75%. Visible on desktop only (min-width: 900px).
Central glow: a large horizontal SVG ellipse glow in the center-top area, cyan/dark-green hue, with a 25px Gaussian blur (feGaussianBlur stdDeviation="25"). Implemented as an inline <svg> with a radialGradient (#5ed29c → #1f7a5a → transparent) and filter (the blur), positioned top: 4%; left: 50%; translateX(-50%).

Liquid Glass Card

200×200px floating card positioned above the headline, shifted up via transform: translateY(-50px).
CSS:
- background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity.
- backdrop-filter: blur(4px).
- box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1).
Border effect: a ::before pseudo-element with inset: 0, padding: 1.4px, a 180° white linear gradient, and -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) + -webkit-mask-composite: xor; mask-composite: exclude to draw a sharp 1.4px border frame.
Content: [ 2025 ] tag (14px) · headline Taught by <em>Industry</em> Professionals (18px, the word Industry in Instrument Serif italic) · small description (11px, muted).

Hero content & typography

Eyebrow: Career-Ready Curriculum — Plus Jakarta Sans, bold, 11px, uppercase, letter-spacing ~0.16em, color #5ed29c.
Main headline: LAUNCH YOUR CODING CAREER. — Inter ExtraBold (800), uppercase, letter-spacing: -0.03em, line-height ~0.98. Scale clamp(40px, 8vw, 72px) (40px mobile → 72px desktop). The final period must be green #5ed29c (wrap it in a .dot span).
Description: Master in-demand coding skills... — Inter, 14px, rgba(255,255,255,0.7), max-width: 512px.
Primary CTA: Get Started button with an ArrowRight icon. border-radius: 999px, background #5ed29c, text #070b0a, uppercase, bold.

Global navigation

Header: absolute/sticky at top, transparent over the video. White minimalist logo (inline </> chevron SVG + wordmark).
Desktop menu: links PROJECTS, BLOG, ABOUT, RESUME in Inter 16px; hover color #5ed29c. Shown at min-width: 900px.
Mobile menu: a functional hamburger (Menu icon) that toggles a full-screen dark overlay (X to close) listing the same links. JS toggles an .open class; closing also happens on link click.

Required imports

Fonts: Inter (400–800), Plus Jakarta Sans (600–800), Instrument Serif (italic) from Google Fonts.
Icons: inline SVG in the seed (in a React port use lucide-react: ArrowRight, Menu, X).
Library: hls.js (CDN in the seed) for the video stream.

Animation / interaction (vanilla seed → framework map)

CTA hover: translateY(-2px) + green glow shadow.
Nav-link hover: color → #5ed29c.
Mobile menu: class toggle drives an opacity/pointer-events transition (in React: useState boolean).
Video autoplay is wired on canplay and immediately, with a guarded play().catch() so a blocked autoplay never throws.

Responsive

< 900px: hide desktop nav and grid lines, show hamburger; headline scales down toward 40px via the clamp.
≥ 900px: desktop nav inline, vertical grid lines visible.

Color rules — hard

Locked palette: base #070b0a, single green accent #5ed29c (and its darker companion #1f7a5a only inside the glow gradient), neutral whites at reduced opacity. Avoid purple/indigo entirely. Do not substitute the green accent with teal/blue/lime — #5ed29c is locked.

More from this repository

same repository

3d-creator-portfolio

nexu-io/open-design

Use this plugin when the user wants a dark, premium 3D-creator / designer portfolio landing page: a full-viewport hero with a gradient-text headline and a mouse-following magnetic 3D portrait, a scroll-driven horizontal image marquee, an About section with corner 3D decorations and character-by-character scroll-reveal text, a white Services list, and sticky-stacking project cards. Invoke for '3D creator portfolio', 'designer landing page', 'creative portfolio with magnetic hero', or when the user references the Jack 3D Creator template.

2026-06-0962.5k

acreage-farming

nexu-io/open-design

Use this plugin when the user wants a premium precision-farming / agritech landing page: dark/light alternating sections, a fullscreen hero video background, an animated stats grid, an infinite logo marquee, and image-backed service cards. Invoke for 'farming landing page', 'agritech marketing site', 'precision agriculture site', or when the user references the Acreage Farming template.

2026-06-0962.5k

aerocore

nexu-io/open-design

Use this plugin when the user wants a premium dark-to-light aerospace / propulsion marketing site: a scroll-driven gradient hero with parallax wordmark and an engine still, a film-card that grows from a mission thumbnail into a fullscreen sticky video, a pinned tabbed showcase, a bento capabilities grid with looping video cards and a tool marquee, an animated dark stats chart with category tabs, a horizontal video-story rail, and a starfield footer. Invoke for 'aerospace landing', 'engine / propulsion site', 'EngineTech', 'scroll-cinematic hero', or when the user references the AeroCore template.

2026-06-0962.5k

ai-designer-portfolio

nexu-io/open-design

Use this plugin when the user wants a premium single-page creative-studio / designer portfolio landing page on a white background: serif-accented hero, an infinite GIF marquee, parallax testimonial, two-card pricing, an auto-scrolling testimonial carousel, vertical project showcase, a mouse-trail partner CTA, and a fixed floating bottom nav. Invoke for 'designer portfolio', 'creative studio landing page', 'agency one-pager', or when the user references the Viktor Oddy / AI Designer Portfolio template.

2026-06-0962.5k

cinematic-landing-page

nexu-io/open-design

Use this plugin when the user wants a premium, GSAP-driven cinematic B2B landing page: a scroll-driven full-screen video slider hero with clip-path ellipse transitions, SplitText char-reveal headlines, a masonry product gallery, scroll-reveal about text, a partner marquee, Lottie-style feature cards, and a multi-office footer. Invoke for 'cinematic landing page', 'video hero landing', 'bakery / food-service landing', 'GSAP scroll site', or when the user references the Cinematic Landing Page template.

2026-06-0962.5k

dashboard-ui-glass

nexu-io/open-design

Use this plugin when the user wants a premium liquid-glassmorphism conference / meeting dashboard: dual fullscreen background videos swapped by theme, a 4x2 glass/solid card grid, animated voice-wave participant indicators, and a floating control bar. Invoke for 'glass dashboard', 'conference dashboard', 'meeting room UI', or when the user references the Dashboard UI liquid-glass template.

2026-06-0962.5k

name	codenest-coding-platform
description	Use this plugin when the user wants a high-end, dark cinematic hero section for a coding-education / bootcamp landing page (CodeNest): full-screen HLS background video, liquid-glass card, green-accent typography, and a working mobile hamburger menu. Invoke for 'coding bootcamp hero', 'dev course landing page', 'liquid glass hero', 'video background hero', or when the user references the CodeNest template.
version	0.1.0
od	{"mode":"prototype","surface":"web","scenario":"design","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false}}

CodeNest — Coding Platform Hero

This is the authoritative build brief. Follow it exactly — the named colors, fonts, video stream, and effects are locked.

Stack

Default output: a single self-contained HTML file (the example.html seed). It includes everything inline (CSS + vanilla JS) and loads hls.js from a CDN.
If the user explicitly asks for a React + Tailwind project, port the seed faithfully: same tokens, same markup structure, lucide-react for icons (ArrowRight, Menu, X), Inter / Plus Jakarta Sans / Instrument Serif (italic) from Google Fonts, and hls.js for the video. Do not change the design while porting.

Background video (keep remote — do NOT inline)

Full-screen background video via the HLS stream https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8.
Use hls.js with enableWorker: false for sandbox stability. If the browser supports native HLS (video.canPlayType('application/vnd.apple.mpegurl')), assign video.src directly; otherwise attach via new Hls({ enableWorker: false }).
<video autoplay muted loop playsinline>, object-fit: cover, fixed full-screen, opacity 0.6.
This large CDN media stays a remote URL — never inline an HLS stream.

Overlays & atmosphere

Left gradient: linear-gradient(to right, #070b0a 0%, rgba(7,11,10,0.55) 35%, transparent 70%).
Bottom-up gradient: linear-gradient(to top, #070b0a 0%, rgba(7,11,10,0.4) 30%, transparent 60%) for readability.
Grid system: three thin vertical lines, rgba(255,255,255,0.10), 1px wide, positioned at 25% / 50% / 75%. Visible on desktop only (min-width: 900px).
Central glow: a large horizontal SVG ellipse glow in the center-top area, cyan/dark-green hue, with a 25px Gaussian blur (feGaussianBlur stdDeviation="25"). Implemented as an inline <svg> with a radialGradient (#5ed29c → #1f7a5a → transparent) and filter (the blur), positioned top: 4%; left: 50%; translateX(-50%).

Liquid Glass Card

200×200px floating card positioned above the headline, shifted up via transform: translateY(-50px).
CSS:
- background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity.
- backdrop-filter: blur(4px).
- box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1).
Border effect: a ::before pseudo-element with inset: 0, padding: 1.4px, a 180° white linear gradient, and -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) + -webkit-mask-composite: xor; mask-composite: exclude to draw a sharp 1.4px border frame.
Content: [ 2025 ] tag (14px) · headline Taught by <em>Industry</em> Professionals (18px, the word Industry in Instrument Serif italic) · small description (11px, muted).

Hero content & typography

Eyebrow: Career-Ready Curriculum — Plus Jakarta Sans, bold, 11px, uppercase, letter-spacing ~0.16em, color #5ed29c.
Main headline: LAUNCH YOUR CODING CAREER. — Inter ExtraBold (800), uppercase, letter-spacing: -0.03em, line-height ~0.98. Scale clamp(40px, 8vw, 72px) (40px mobile → 72px desktop). The final period must be green #5ed29c (wrap it in a .dot span).
Description: Master in-demand coding skills... — Inter, 14px, rgba(255,255,255,0.7), max-width: 512px.
Primary CTA: Get Started button with an ArrowRight icon. border-radius: 999px, background #5ed29c, text #070b0a, uppercase, bold.

Global navigation

Header: absolute/sticky at top, transparent over the video. White minimalist logo (inline </> chevron SVG + wordmark).
Desktop menu: links PROJECTS, BLOG, ABOUT, RESUME in Inter 16px; hover color #5ed29c. Shown at min-width: 900px.
Mobile menu: a functional hamburger (Menu icon) that toggles a full-screen dark overlay (X to close) listing the same links. JS toggles an .open class; closing also happens on link click.

Required imports

Fonts: Inter (400–800), Plus Jakarta Sans (600–800), Instrument Serif (italic) from Google Fonts.
Icons: inline SVG in the seed (in a React port use lucide-react: ArrowRight, Menu, X).
Library: hls.js (CDN in the seed) for the video stream.

Animation / interaction (vanilla seed → framework map)

CTA hover: translateY(-2px) + green glow shadow.
Nav-link hover: color → #5ed29c.
Mobile menu: class toggle drives an opacity/pointer-events transition (in React: useState boolean).
Video autoplay is wired on canplay and immediately, with a guarded play().catch() so a blocked autoplay never throws.

Responsive

< 900px: hide desktop nav and grid lines, show hamburger; headline scales down toward 40px via the clamp.
≥ 900px: desktop nav inline, vertical grid lines visible.

Color rules — hard

Locked palette: base #070b0a, single green accent #5ed29c (and its darker companion #1f7a5a only inside the glow gradient), neutral whites at reduced opacity. Avoid purple/indigo entirely. Do not substitute the green accent with teal/blue/lime — #5ed29c is locked.