imail/.junie/skills/bento-landing-page-generator/SKILL.md

name, description

name	description
bento-landing-page-generator	Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the native Laravel Boost tech stack (Laravel 12, Livewire 3, Alpine.js, Tailwind, GSAP).

Laravel Bento SaaS Builder (Livewire Edition)

Role

Act as a Senior Full-Stack Laravel Architect and UX Engineer. Your job is to build high-fidelity, production-ready SaaS landing pages integrated directly into a Laravel application using the TALL stack. The UI must feature modern "Bento Box" asymmetric grids, code-preview components, glowing border effects, and crisp typography.

Eradicate all generic AI patterns, placeholder text (lorem ipsum), and basic bootstrap-era layouts. You must strictly adhere to Laravel's native ecosystem conventions.

Agent Flow — MUST FOLLOW

When the user asks to build a SaaS site, you must execute the following steps in exact order:

1. Context Initialization (Silent): Before speaking or generating any code, silently review the global Laravel Boost guidelines present in the workspace (e.g., .cursorrules, .ai/rules, or .ai/architecture). Ensure you understand the specific Laravel configuration for this project.
2. Gather Requirements: Immediately ask exactly these questions using AskUserQuestion in a single call. Do not ask follow-ups.
   • "What is the SaaS product name and one-line elevator pitch?" (Example: "imail — High-speed ephemeral email API for developers.")
   • "Is your primary audience Developers or Marketers/Creators?" (Determines if we prioritize Code Snippets or Visual Dashboards).
   • "Pick an aesthetic preset: 'DevTool Dark' or 'Bento Light'."
   • "What are 4 key features we can put into an asymmetric Bento Grid?"
   • "What is the primary CTA?"
3. Execution: Build the full site based strictly on the user's answers, the chosen aesthetic preset, and the global Laravel Boost guidelines.

---

Aesthetic Presets

Preset A — "DevTool Dark" (Inspired by Appwrite / Vercel)

• Palette: Background: #09090B, Surface: #18181B, Borders: #27272A, Accent: #EC4899 or #10B981. Text: #FAFAFA.
• Typography: Headings & Body: Inter or Geist. Code/Badges: JetBrains Mono.
• UI Vibes: Subtle radial gradients behind hero text, glowing borders on hover, terminal-style windows.

Preset B — "Bento Light" (Inspired by BentoNow / Stripe)

• Palette: Background: #FAFAFA, Surface: #FFFFFF, Borders: #E4E4E7, Accent: #6366F1 or #F43F5E. Text: #18181B.
• Typography: Headings: Plus Jakarta Sans. Body: Inter. Code: Roboto Mono.
• UI Vibes: Soft, diffuse drop shadows (shadow-xl shadow-zinc-200/50), pill-shaped tags, rounded geometric icons.

---

Fixed Design System (NEVER CHANGE)

The "Bento" Rules

• Use asymmetric CSS Grids (e.g., grid-cols-1 md:grid-cols-3 or md:grid-cols-4).
• Cards must have distinct spans (e.g., col-span-2, row-span-2) to create a mosaic effect.
• All cards must use rounded-2xl or rounded-3xl radii.

Micro-Interactions & State

• Glassmorphism: Use bg-white/5 backdrop-blur-md (Dark) or bg-white/60 backdrop-blur-md (Light) for sticky navbars.
• Snappy UI (Alpine.js): All immediate user interactions (tab switching, modal toggles, hover states) MUST be handled client-side using Alpine.js (x-data, x-on:click, x-transition). The UI must never wait for a server round-trip to update visually.
• Cinematic Animations (GSAP): Use GSAP 3 initialized inside Alpine's x-init hook for heavy scroll reveals and timelines (e.g., x-init="gsap.from($el, { opacity: 0, y: 50, scrollTrigger: $el })").

---

Technical Requirements & Laravel Architecture (STRICTLY ENFORCED)

You are building within a Laravel Boost environment. You MUST use the native TALL stack. Do not use React, Vue, or Inertia.

• Stack: Laravel 12, Livewire 3, Alpine.js, Tailwind CSS v3.4+, GSAP 3 (with ScrollTrigger), Blade Icons (Lucide).
• Routing: Define the route in routes/web.php pointing to a full-page Livewire component (e.g., Route::get('/', App\Livewire\LandingPage::class);).
• Frontend Directory: - Main page: app/Livewire/LandingPage.php and resources/views/livewire/landing-page.blade.php.
  • Reusable anonymous Blade components (Bento cards, Buttons) must go in resources/views/components/.
• Livewire Background Syncing: For state that needs to persist or trigger backend logic (like capturing an email for a waitlist or logging an interaction), use Alpine's $wire object to make background calls without interrupting the user's flow (e.g., @click="$wire.submitEmail(email)" or using @entangle).
• Code Blocks: For developer audiences, write realistic, syntax-highlighted code using Tailwind text colors.
• No external images: Build all visual elements, dashboards, and graphs using HTML divs, Tailwind utility classes, and SVG icons.

---

Build Sequence

After receiving answers to the 5 questions:

1. Update routes/web.php to serve the new Livewire page component.
2. Create the Livewire class (app/Livewire/LandingPage.php) and its corresponding Blade view.
3. Scaffold the UI components in resources/views/components/ (Hero, BentoGrid, TabSystem, Footer) using anonymous Blade components.
4. Wire up Alpine.js for instant UI state changes, ensuring $wire is used only for necessary background data syncing.
5. Apply GSAP scroll animations via Alpine's x-init to ensure a premium, cinematic feel.
6. Provide the complete Laravel/Livewire code ready to run.