Communitygithub.com

anubhavg-icpl/vibe

|. Use when you need help with waitlist page. Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects.

Qu'est-ce que vibe ?

vibe is a Claude Code agent skill that |. Use when you need help with waitlist page. Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/anubhavg-icpl/vibe/tree/HEAD/skills/waitlist-page
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

name: waitlist-page description: |. Use when you need help with waitlist page. Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects. license: CC-BY-NC-SA-4.0 triggers:

  • "waitlist page"
  • "coming soon page"
  • "pre-launch landing page"
  • "email capture page"
  • "launch page" od: mode: prototype platform: desktop scenario: marketing featured: 1 preview: type: html entry: example.html design_system: requires: true sections: [color, typography, layout, components] inputs:
    • name: product_name type: string required: true
    • name: tagline type: string required: true
    • name: bg_expression type: string description: "CSS color expression for background (e.g., '#FDE8DF' or 'rgba(...)')." required: true
    • name: fg_expression type: string description: "CSS color expression for text and primary shapes (e.g., '#1A1410' or 'rgba(...)')." required: true
    • name: accent_expression type: string description: "CSS color expression for brand badge and highlights." required: true
    • name: deco_expression type: string description: "CSS color expression for decoration primary." required: true
    • name: stripe_expression type: string description: "CSS color expression for accent stripe." required: true
    • name: border_expression type: string description: "CSS color expression for input borders (e.g., 'rgba(100,50,30,0.38)' or 'color-mix(in srgb, var(--fg) 38%, transparent)'). Must be valid CSS." required: true
    • name: success_expression type: string description: "CSS color expression for success message. Defaults to #2D6A4F if not in DESIGN.md." required: true
    • name: btn_label_expression type: string description: "CSS color expression for button label text (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure WCAG AA contrast." required: true
    • name: ticker_bg_expression type: string description: "CSS color expression for ticker background (e.g., 'rgba(0,0,0,0.9)'). Must be valid CSS." required: true
    • name: ticker_fg_expression type: string description: "CSS color expression for ticker text (e.g., 'rgba(255,255,255,0.9)'). Ensure contrast." required: true
    • name: deco_stroke_expression type: string description: "CSS color expression for SVG strokes (e.g., 'rgba(0,0,0,0.12)'). Typically a muted foreground or neutral." required: true
    • name: logo_shadow_expression type: string description: "CSS color expression for logo container shadow (e.g., 'rgba(0,0,0,0.08)'). Typically a subtle foreground shade." required: true
    • name: logo_fg_expression type: string description: "CSS color expression for logo text/initials (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure contrast against accent." required: true
    • name: logo_mark type: string description: "Text initials are HTML-escaped by default. Inline SVG is allowed only after strict allowlist-based sanitization (removing scripts, event handlers, foreignObject, and external references); unsafe input falls back to escaped text." required: false
    • name: display_font_url type: string description: "Display font name with spaces encoded as '+' (e.g., 'Syne', 'DM+Sans'). Used in Google Fonts URL." required: true
    • name: display_font_css type: string description: "Display font name as it appears in CSS (e.g., 'Syne', 'DM Sans'). Already quoted if needed; no extra quotes in template." required: true
    • name: body_font_url type: string description: "Body font name with spaces encoded as '+' (e.g., 'DM+Sans', 'IBM+Plex+Serif'). Used in Google Fonts URL." required: true
    • name: body_font_css type: string description: "Body font name as it appears in CSS (e.g., 'DM Sans', 'IBM Plex Serif'). Already quoted if needed; no extra quotes in template." required: true outputs: primary: index.html capabilities_required:
    • file_write example_prompt: "Make a waitlist page for a design tool — clean, minimal, with a custom logo and one call-to-action."

Waitlist Page Skill

Pre-launch pages are your first handshake with future users. This skill builds a focused, honest entrance: your brand identity, what you're making, one clear path to join the early list. No artificial scarcity, no fake countdown, no inflation tactics—just a clean, mobile-first vessel for genuine interest.

Workflow

Preflight: Load hardened template and brand foundation

  1. Load the brand identity — Read DESIGN.md for the color system, font pairing, and spatial rules. This is your foundation. A waitlist page lives or dies by consistency with the brand it represents. If DESIGN.md is missing, ask the user to provide one before you proceed.
  2. Read and copy the reusable template — Read assets/template.html. This template is the hardened seed for all outputs. Copy it to index.html as your base. Do not write HTML from scratch or deviate from this structure. The template has all required layout, form structure, decorations, focus styles, and accessibility scaffolding baked in.

Steps: Token replacement with validation and escaping

  1. Map tokens from inputs — For each placeholder in the template (e.g., {{PRODUCT_NAME}}, {{BG_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{LOGO_MARK}}), follow the replacement rules below:
    • Text tokens ({{PRODUCT_NAME}}, {{TAGLINE}}): HTML-escape <, >, &, ", ' before insertion into HTML text nodes or attribute values.
    • HTML tokens ({{LOGO_MARK}}): If using text initials, HTML-escape them by default. If using inline SVG, you must strictly sanitize it using an allowlist: strip <script> tags, event handlers (on*), <foreignObject>, external refs (href, xlink:href, url()), and any disallowed attributes/elements before insertion. If the SVG cannot be safely sanitized, fallback to escaped text initials. Never emit raw, unsanitized arbitrary HTML. Ensure any SVG scales cleanly within its container.
    • Color expression tokens ({{BG_EXPRESSION}}, {{FG_EXPRESSION}}, {{ACCENT_EXPRESSION}}, {{DECO_EXPRESSION}}, {{STRIPE_EXPRESSION}}, {{SUCCESS_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{BTN_LABEL_EXPRESSION}}, {{TICKER_BG_EXPRESSION}}, {{TICKER_FG_EXPRESSION}}, {{DECO_STROKE_EXPRESSION}}, {{LOGO_SHADOW_EXPRESSION}}, {{LOGO_FG_EXPRESSION}}): Must strictly adhere to an explicit color grammar (#hex, rgb/rgba, hsl/hsla, oklch, or color-mix() using only local variables). Hard reject any input containing ;, {}, <, >, comments (/*), @, url(, or external refs to prevent CSS injection. Do not wrap in # or add extra quotes. Examples: rgba(196, 169, 154, 0.38), color-mix(in srgb, var(--fg) 38%, transparent), #FDE8DF. Insert as-is into :root CSS variables. Derive --success from DESIGN.md if present; otherwise use the allowed fallback #2D6A4F only.
    • Font name tokens ({{DISPLAY_FONT_CSS}}, {{BODY_FONT_CSS}}): These are CSS font-family values, already quoted if they contain spaces (e.g., 'DM Sans', Syne). Insert as-is into --font-display and --font-body declarations; do NOT add extra quotes.
    • Font URL tokens ({{DISPLAY_FONT_URL}}, {{BODY_FONT_URL}}): Spaces must be encoded as + for the Google Fonts URL (e.g., DM+Sans, IBM+Plex+Serif). Validate the URL is well-formed before insertion.
  2. Verify token mapping rules — All color tokens are now in CSS variables:
    • --bg = {{BG_EXPRESSION}} (e.g., #FDE8DF)
    • --fg = {{FG_EXPRESSION}} (e.g., #1A1410)
    • --accent = {{ACCENT_EXPRESSION}} (brand badge)
    • --deco = {{DECO_EXPRESSION}} (decoration primary)
    • --deco-stripe = {{STRIPE_EXPRESSION}} (accent stripe)
    • --input-border = {{BORDER_EXPRESSION}} (full CSS expression with opacity)
    • --success = {{SUCCESS_EXPRESSION}} or #2D6A4F fallback
    • --btn-label = {{BTN_LABEL_EXPRESSION}} (button text color for contrast)
    • --ticker-bg = {{TICKER_BG_EXPRESSION}} (animated ticker background)
    • --ticker-fg = {{TICKER_FG_EXPRESSION}} (animated ticker text)
    • --deco-stroke = {{DECO_STROKE_EXPRESSION}} (SVG strokes, typically muted with 12–15% opacity)
    • --logo-shadow = {{LOGO_SHADOW_EXPRESSION}} (logo container shadow, subtle foreground shade)
    • --logo-fg = {{LOGO_FG_EXPRESSION}} (contrasting text color for logo initials)
  3. Responsive layout — The template includes mobile-first scaling:
    • 375px: form stacks to single column, logo shrinks to 40px, decoration compresses, no horizontal scroll.
    • 768px: comfortable two-column breathing room.
    • 1440px+: centered layout with generous whitespace.
    • Verify all text remains readable and the email input + button are fully visible (no clipping) at 375×667 and 390×844.

Validation: Run hardened quality gates before emitting

  1. Run the quality checklist — Read references/checklist.md. Validate every P0 gate before emitting:
    • Exactly one CTA (email form)
    • No countdown timer, no fake social proof, no emoji
    • No horizontal scroll at 375px
    • Email input has type="email" and required; first name has no required
    • Form does NOT use novalidate; JS uses checkValidity() guard
    • Success message has role="status" or aria-live="polite"
    • All colors from DESIGN.md or allowed fallback; no invented hex values
    • All user text is HTML-escaped; color tokens adhere to strict grammar; fonts are URL-encoded
    • Pass P0 or do not emit. If any P0 gate fails, ask the user or fix the token mappings and try again.
  2. Verify P1 gates for quality submission (recommended):
    • Hover and active states on submit button
    • Form validation with clear feedback
    • Ticker animation respects prefers-reduced-motion: reduce
    • All interactive elements have visible focus styles (input:focus includes outline)
    • Tab/Enter keyboard support
    • WCAG AA contrast for body text (≥4.5:1) and button label (≥4.5:1)
    • Logo alt/aria-label present; ticker has aria-hidden="true"
    • <html lang=""> is set

Output

  1. Emit clean HTML — Single file, CSS inlined, SVG for graphics. Mark interactive elements with data-od-id (headline, form, logo, ticker, grid, etc.) so agents can customize without parsing.

Quality gates

This skill enforces a hardened, template-based workflow to ensure compliance. You must follow this execution path; deviating from the template disqualifies the output.

Mandatory template-based execution:

  • Read assets/template.html as your base; do not write HTML from scratch.
  • Copy it to index.html and replace only the {{PLACEHOLDER}} tokens with validated/escaped values.
  • Run every P0 gate in references/checklist.md before emitting; if any fail, fix and re-validate.

P0 gates (must pass):

  • Single CTA: Email form is the only interactive element. No nav, no secondary buttons, no social links.
  • Logo placement: Fixed top-left, matches DESIGN.md accent color, scales down on mobile (50px → 40px).
  • Color consistency: Every color from DESIGN.md palette. Only allowed hardcoded exception: #2D6A4F for --success.
  • No anti-patterns: No countdown timer, no fake social proof, no emoji icons, no lorem ipsum.
  • Content integrity: Headline and copy tie directly to product_name and tagline inputs—no filler copy.
  • Mobile fit: No horizontal scroll at 375px. Email input and submit button are fully visible (no clipping) at 375×667 and 390×844. Vertical overflow is scrollable, not hidden.
  • Typographic discipline: Display + body fonts only (2-font rule). Consistent sizing across sections.
  • Form structure: Two fields (first name optional, email required), checkValidity() guard, success message with role="status".
  • Token escaping: All user-supplied text HTML-escaped; color tokens adhere to strict grammar and contain no unsafe characters (;, {}, <, >, /*, @, url(); font names are URL-encoded; {{LOGO_MARK}} is escaped text initials or strictly sanitized inline SVG (no scripts, no event handlers, no foreignObject, no external hrefs).

P1 gates (should pass for quality submission):

  • Hero section visually distinct and above-the-fold.
  • Email submit button has hover and active states.
  • Form validation provides clear feedback.
  • Page scrollable (not clipped) at all mobile viewports; CTA visible without scroll.
  • Ticker animation paused/removed under prefers-reduced-motion: reduce.
  • All interactive elements have visible focus styles (outline, not just outline:none).
  • Keyboard: Tab reaches each form field; Enter submits.
  • WCAG AA contrast: Body text ≥4.5:1, button label ≥4.5:1.
  • Logo alt/aria-label present; ticker has aria-hidden="true".
  • <html lang=""> set to correct language code.

Decoration restraint:

  • Lower zone enhances without distraction. Opacity, subtle strokes, muted animation.
  • No gradient that spans more than 20% of viewport height.
  • Coil, stripe, grid, or ticker all use colors from DESIGN.md only.

Output

Only emit after all P0 gates in references/checklist.md pass.

Emit the artifact between tags:

<artifact identifier="waitlist-id" type="text/html" title="Coming Soon — {{PRODUCT_NAME}}">
<!doctype html>
<html lang="en">
...
</html>
</artifact>

One line of description above the artifact; nothing below.

Post-emission: If the user asks for changes, update the index.html in-place and re-run the P0 checklist gates before emitting the next version. Do not skip validation on iterations.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

anubhavg-icpl/vibe

|. Use when you need help with 8 bit orbit video template. Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.

anubhavg-icpl/vibe

Reference DESIGN.md for luxury automotive editorial that needs to feel engineered. White slabs, full-bleed performance photography, BMW corporate blue rising into a deeper blue at active states, restrained Helvetica-grade typography. Use when building UI components, applying design tokens, or implementing visual styles for cinematic bmw.

anubhavg-icpl/vibe

Reference DESIGN.md for enterprise-AI brands that need to feel premium, dark, and quietly futuristic. Ink canvas, Unica grotesque type, saturated coral-to-violet brand gradient deployed as backdrop and accent rule, full-pill buttons, gen. Use when building UI components, applying design tokens, or implementing visual styles for cinematic cohere.

anubhavg-icpl/vibe

Reference DESIGN.md for performance brands that need to feel theatrical. High-contrast black-and-white frames cut by Rosso Corsa red, sharp 0-radius components, FerrariSans across the entire page, photography that treats the car as sculp. Use when building UI components, applying design tokens, or implementing visual styles for cinematic ferrari.

anubhavg-icpl/vibe

Reference DESIGN.md for hyper-luxury that needs to feel forged. True-black canvas, oversized LamboType nameplates at 120px+, hexagonal angle motifs, single warm-gold accent for primary actions, photography lit like a vault. Use when building UI components, applying design tokens, or implementing visual styles for cinematic lamborghini.

anubhavg-icpl/vibe

Reference DESIGN.md for AI-lab cinematic: pure black canvas, neon-lime accent on charcoal chrome, geometric DM Sans / Outfit type, pill-shaped CTAs. Use when building UI components, applying design tokens, or implementing visual styles for cinematic minimax.

anubhavg-icpl/vibe

Reference DESIGN.md for GPU-vendor cinematic: chrome-black canvas, signature green action, video-led hero, hard-edged grotesque headlines. Use when building UI components, applying design tokens, or implementing visual styles for cinematic nvidia.

anubhavg-icpl/vibe

Skill for discovering and researching autonomous AI agents, tools, and ecosystems using the AgentFolio directory. Use when you need help with agentfolio.

anubhavg-icpl/vibe

Expert in building portfolios that actually land jobs and clients -. Use when you need help with interactive portfolio. not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities.

anubhavg-icpl/vibe

Generates high-converting Next.js/React landing pages with Tailwind CSS. Uses PAS, AIDA, and BAB frameworks for optimized copy/components (Heroes, Features, Pricing). Focuses on Core Web Vitals/SEO. Use when you need help with landing page generator.

anubhavg-icpl/vibe

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays. Use when you need help with remotion.

anubhavg-icpl/vibe

Writes complete, structured landing pages optimized for SEO ranking, AEO citation, and visitor conversion. Activate when the user wants to write or generate a landing page for a product, service, or offer.

anubhavg-icpl/vibe

Project scaffolding - generate boilerplate for common project types with best-practice defaults. Use for: scaffold, boilerplate, template, new project, init, create project, starter, setup, project structure, directory structure, monorepo, microservice, API template, web app template, CLI tool template, library template.

anubhavg-icpl/vibe

Automate Klipfolio tasks via Rube MCP (Composio). Always search tools first for current schemas. Use when you need help with klipfolio automation.

anubhavg-icpl/vibe

>. Use when you need help with kami landing. Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.

anubhavg-icpl/vibe

>. Use when you need help with open design landing deck. Produce a single-file slide deck in the Atelier Zero visual language (warm-paper background, italic-serif emphasis spans, coral terminating dots, surreal collage plates) — Open Design's brand deck recipe. The deck uses **horizontal magazine-style swipe pagination** (←/→, wheel, swipe), a per-slide chrome strip with brand mark and slide counter, an ESC overview grid, a coral progress bar, and inherits the canonical stylesheet + 16-slot image library from the sister `open-design-landing` skill.

anubhavg-icpl/vibe

>. Use when you need help with open design landing. Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file; a separate path can mirror the Astro marketing site in `apps/landing-page/`. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically.

anubhavg-icpl/vibe

>. Use when building UI with epic design language and visual style. Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.

anubhavg-icpl/vibe

Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, promo page, or conversion-optimised web page — or when they want to A/B test landing page variants or replace a static page with one designed to convert.

anubhavg-icpl/vibe

Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forcing intake (product + elevator pitch, audience register, brand overrides, tone) locks down positioning before any copy or markup is written, so the page reflects the actual product rather than generic boilerplate. Use whenever the user says 'landing for X', 'create a landing page', 'build a landing page', 'make a landing page for X', 'I need a web page for Y', or provides product/service details and wants a polished website. Also triggers on 'promotional page', 'product page', 'one-pager', 'web presence', 'sales page'. Outputs a single self-contained HTML file (Claude Code) or HTML artifact (Claude.ai). Supports configurable brand colors via CSS custom property overrides.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community