Your SEO Title

  {/* Client-side 3D hero */}
  <HeroClient />
</main>

); }

SEO for WebGL Content // WebGL isn't crawlable - always provide text alternatives

Data Fetching with Loading States // Server Component with Suspense import { Suspense } from 'react';

async function DashboardData() { const data = await fetchDashboardData(); return ; }

export default function Dashboard() { return (

Template Quick Reference Template Props WebGL Mobile Fallback Best Animation Lib cppn-hero title, description, ctaButtons, microDetails Yes CSS gradient GSAP (SplitText) mesh-gradient-hero colors[], speed, distortion, swirl No* Native Framer Motion wave-hero title, subtitle, placeholder, onPromptSubmit Yes Solid bg GSAP globe-hero globeImage, dashboardImage, accentColor No Native Framer Motion hero-section title, badge, primaryCTA, accentColor Yes Stars CSS Either bento-grid children (card layout) No Native CSS or Framer dashboard-widgets value, change, trend[] No Native Framer Motion terminal logs[], title No Native CSS preloader onComplete, messages[] Optional CSS version GSAP glass-components Various No Native CSS

*mesh-gradient-hero uses @paper-design/shaders-react (Canvas, not WebGL)

Template Playbooks (Start Grounded, Layer Wow Intentionally) Goal Baseline (Clarity-first) Optional Wow Upgrade Kill It If Marketing / Waitlist mesh-gradient-hero + glass-components + bento-grid value props Swap hero for cppn-hero or add wave-hero band for social proof Copy is long-form or the product is compliance-heavy AI / Research Landing cppn-hero + dashboard-widgets (metrics) + terminal logs Add holographic shader sections or globe-hero interlude User needs print-friendly deliverables Crypto / Finance globe-hero + bento-grid KPIs + dashboard-widgets + CTA strip Add data-grid shader background or rolling ticker Performance budget < 200KB or mobile-only Developer Tools wave-hero + terminal + glass-components cards Introduce digital-liquid shader or 3D device mock Audience is enterprise buyers needing conservative tone Product Dashboard bento-grid + dashboard-widgets + mesh-gradient-hero (static) Add mini WebGL module (sentient core, particle globe) Data is dense, requires tabular clarity Layout Flow Recipes Hero (signature flourish) → Key metrics/value props (calm) → Product proof (screens) → Testimonials/logos → CTA (glow button). Dashboard page: Above-the-fold summary (minimal) → Feature grid (asymmetrical) → Live data (terminal/sparkline) → Help/resources (calm). Docs/Platform: Clean header (mesh-gradient-hero in CSS mode) → Navigation grid → Content area (monospace) → CTA.

Each flow should have at most two high-saturation panels. If you need more energy, animate the CTA or accent borders instead of adding another shader.

Template Remix & Adaptation Patterns Need Action Notes Downgrade WebGL → CSS Replace cppn-hero with mesh-gradient-hero, keep same copy. Swap shader backgrounds for bg-gradient-to-b. Use when user mentions “mobile-first,” “performance,” or “lightweight.” Upgrade CSS → WebGL Start from mesh-gradient-hero, then inject ShaderBackground and reuse props from cppn-hero. Only after confirming the client wants “cinematic” or “experimental.” Shader swap Any hero using shaders can switch to another by swapping imports (e.g., holographic ↔ digital-liquid). Keep uniform names consistent. Document the new accent palette alongside the swap. Content density mode When the design needs to carry lots of text, keep hero flourish but make every subsequent section bg-black with simple borders. Example: cppn-hero on top, then bento-grid in plain glass cards. Prompt-to-template defaults - “Clean SaaS” → Mesh gradient package - “AI platform” → CPPN hero + dashboard metrics - “Crypto trading” → Globe hero + ticker - “Developer CLI” → Wave hero + terminal Mention these defaults directly in responses so the model doesn’t hallucinate new structures.

When in doubt: start with the baseline, ship usable layout, then pitch a single wow upgrade as a follow-up suggestion (“Optionally we can swap in the CPPN shader if you want a more neural vibe.”).

Template & Shader Selection Guide

Use this guide to pick the right template and shader based on the user's request. Don't default to the same hero for everything — match the aesthetic to the domain.

Industry/Vertical Mapping Industry Hero Template Shader Accent Color Tone AI/ML/Neural cppn-hero cppn-generative Cyan #00f3ff / Purple #a855f7 Organic, alive, mathematical Crypto/DeFi/Trading globe-hero data-grid Purple #9b87f5 / Amber #f59e0b Global, technical, financial Developer Tools/API wave-hero digital-liquid Blue #1f3dbc / Orange #ff4d00 Technical, dynamic, builder SaaS/B2B/Product mesh-gradient-hero (CSS only) Soft pastels Clean, professional, trustworthy Creative Agency hero-section (CyberpunkHero) holographic Neon colors Bold, experimental, artistic Fintech/Dashboard bento-grid + dashboard-widgets data-grid Green #10b981 / Blue #3b82f6 Data-rich, precise, analytical Keyword-Based Selection

When analyzing user requests, match keywords to templates:

User Request Analysis: ├── Contains "AI", "neural", "intelligent", "learning", "model", "GPT" │ → cppn-hero + cppn-generative shader │ → Organic, flowing backgrounds that feel "alive" │ ├── Contains "crypto", "blockchain", "trading", "global", "DeFi", "web3" │ → globe-hero + data-grid shader │ → Earth imagery, global reach, financial precision │ ├── Contains "developer", "API", "code", "build", "deploy", "ship" │ → wave-hero + digital-liquid shader │ → Dynamic bars, typing animations, terminal aesthetic │ ├── Contains "SaaS", "product", "waitlist", "brand", "startup", "launch" │ → mesh-gradient-hero (no WebGL needed) │ → Soft, fluid gradients, professional feel │ ├── Contains "futuristic", "cyber", "agency", "creative", "portfolio" │ → hero-section (CyberpunkHero) + holographic shader │ → Particle spheres, text scramble, scanlines │ └── Contains "dashboard", "analytics", "metrics", "data", "monitoring" → bento-grid + dashboard-widgets + terminal → Stat cards, sparklines, live data feeds

Performance-Based Selection

Choose based on target audience and device constraints:

Performance Tier Templates Best For High-end (WebGL) cppn-hero, wave-hero, hero-section Desktop-first, portfolio sites, creative agencies Medium (Canvas/Images) globe-hero Marketing sites, crypto landing pages Light (CSS only) mesh-gradient-hero, bento-grid Mobile-first, SaaS, B2B, accessibility-focused Shader Pairing Guide Shader Aesthetic Pairs Well With cppn-generative Neural, organic, mathematical AI products, generative art, research tools data-grid Matrix, technical, cyberpunk Crypto, fintech, developer tools digital-liquid Flowing, dynamic, fluid Creative tools, media platforms holographic Sci-fi, iridescent, futuristic Gaming, AR/VR, experimental projects Quick Decision Flowchart Is performance critical (mobile-first)? ├── YES → mesh-gradient-hero (CSS only) └── NO → Continue... │ Is it AI/ML related? ├── YES → cppn-hero └── NO → Continue... │ Is it crypto/global/financial? ├── YES → globe-hero └── NO → Continue... │ Is it developer-focused? ├── YES → wave-hero └── NO → hero-section (CyberpunkHero)

File Structure premium-frontend-skill/ ├── SKILL.md # This document ├── examples/ │ ├── 01-racing-dashboard.tsx # Motorsport telemetry │ ├── 02-cyberpunk-platform.tsx # Developer platform │ ├── 03-bioluminescent-landing.tsx # AI agency landing │ ├── 04-fintech-protocol.tsx # DeFi interface │ └── 05-neural-interface.tsx # Sentient AI core ├── templates/ │ ├── preloader.tsx # Boot sequence loader │ ├── glass-components.tsx # Glassmorphic UI elements │ ├── terminal.tsx # Live logs display │ ├── bento-grid.tsx # Dashboard layout system │ ├── dashboard-widgets.tsx # Stat cards, charts, metrics │ ├── hero-section.tsx # CyberpunkHero + StarfieldScene │ ├── cppn-hero.tsx # Neural network shader hero │ ├── mesh-gradient-hero.tsx # Fluid gradient hero (CSS-light) │ ├── wave-hero.tsx # Animated wave bars hero │ └── globe-hero.tsx # 3D globe with dashboard └── shaders/ ├── cppn-generative.glsl.ts # Neural pattern generator ├── digital-liquid.glsl.ts # Flowing noise effect ├── data-grid.glsl.ts # Matrix/grid effect └── holographic.glsl.ts # Hologram interference

Remember

"The goal is to create interfaces that feel alive, cinematic, and unforgettable. Every pixel should be intentional. These aren't just websites—they're experiences."

Don't hold back. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision.