diff --git a/.agents/skills/laravel-bento-saas-builder/SKILL.md b/.agents/skills/laravel-bento-saas-builder/SKILL.md new file mode 100644 index 0000000..37d3514 --- /dev/null +++ b/.agents/skills/laravel-bento-saas-builder/SKILL.md @@ -0,0 +1,98 @@ +--- +name: laravel-bento-saas-builder +description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind). +--- + + +# Laravel Bento SaaS Builder + + + +## 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. 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 ecosystem conventions. + + +## Agent Flow — MUST FOLLOW + + +When the user asks to build a SaaS site, immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Build. + + +### Questions (all in one AskUserQuestion call) + + +1. **"What is the SaaS product name and one-line elevator pitch?"** +2. **"Is your primary audience Developers or Marketers/Creators?"** (Determines if we prioritize Code Snippets or Visual Dashboards). +3. **"Pick an aesthetic preset:"** "DevTool Dark" (Neon/Dark Mode) or "Bento Light" (Clean/Playful Light Mode). +4. **"What are 4 key features we can put into an asymmetric Bento Grid?"** +5. **"What is the primary CTA?"** + +--- + + +## 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 + +- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars. +- **Component Lifecycles:** Use `framer-motion` for all layout animations. Scroll reveals must use `whileInView={{ opacity: 1, y: 0 }}`. Stagger children components using `transition={{ staggerChildren: 0.1 }}`. + +--- + + +## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED) + + +You are building within a Laravel Boost environment. You MUST use the following stack and structure. Do not create a standalone Vite React app. + +- **Stack:** Laravel 12, Inertia.js v2, React, Tailwind CSS, Framer Motion, Lucide React. +- **Routing:** Define the landing page route in `routes/web.php` using `Route::get('/', function () { return Inertia::render('Welcome'); });`. +- **Frontend Directory:** All UI components must be placed in `resources/js/Pages/` (for the main views) and `resources/js/Components/` (for reusable UI parts like the Navbar, BentoGrid, and Footer). +- **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 `div`s, Tailwind utility classes, and SVG icons. + +--- + + +## Build Sequence + + +After receiving answers to the 5 questions: +1. Update `routes/web.php` to serve the new Inertia page. +2. Create the main page component at `resources/js/Pages/Welcome.jsx`. +3. Scaffold the UI components in `resources/js/Components/` (Hero, BentoGrid, TabSystem, Footer). +4. Apply Framer Motion layout animations to the Bento Grid to ensure a premium feel. +5. Provide the complete Laravel/Inertia code ready to run. \ No newline at end of file diff --git a/.ai/skills/laravel-bento-saas-builder/SKILL.md b/.ai/skills/laravel-bento-saas-builder/SKILL.md new file mode 100644 index 0000000..7652339 --- /dev/null +++ b/.ai/skills/laravel-bento-saas-builder/SKILL.md @@ -0,0 +1,74 @@ +--- +name: laravel-bento-saas-builder +description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind). +--- + +# Laravel Bento SaaS Builder + +## 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. 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 ecosystem conventions. + +## Agent Flow — MUST FOLLOW + +When the user asks to build a SaaS site, immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Build. + +### Questions (all in one AskUserQuestion call) + +1. **"What is the SaaS product name and one-line elevator pitch?"** +2. **"Is your primary audience Developers or Marketers/Creators?"** (Determines if we prioritize Code Snippets or Visual Dashboards). +3. **"Pick an aesthetic preset:"** "DevTool Dark" (Neon/Dark Mode) or "Bento Light" (Clean/Playful Light Mode). +4. **"What are 4 key features we can put into an asymmetric Bento Grid?"** +5. **"What is the primary CTA?"** + +--- + +## 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 +- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars. +- **Component Lifecycles:** Use `framer-motion` for all layout animations. Scroll reveals must use `whileInView={{ opacity: 1, y: 0 }}`. Stagger children components using `transition={{ staggerChildren: 0.1 }}`. + +--- + +## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED) + +You are building within a Laravel Boost environment. You MUST use the following stack and structure. Do not create a standalone Vite React app. + +- **Stack:** Laravel 12, Inertia.js v2, React, Tailwind CSS, Framer Motion, Lucide React. +- **Routing:** Define the landing page route in `routes/web.php` using `Route::get('/', function () { return Inertia::render('Welcome'); });`. +- **Frontend Directory:** All UI components must be placed in `resources/js/Pages/` (for the main views) and `resources/js/Components/` (for reusable UI parts like the Navbar, BentoGrid, and Footer). +- **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 `div`s, Tailwind utility classes, and SVG icons. + +--- + +## Build Sequence + +After receiving answers to the 5 questions: +1. Update `routes/web.php` to serve the new Inertia page. +2. Create the main page component at `resources/js/Pages/Welcome.jsx`. +3. Scaffold the UI components in `resources/js/Components/` (Hero, BentoGrid, TabSystem, Footer). +4. Apply Framer Motion layout animations to the Bento Grid to ensure a premium feel. +5. Provide the complete Laravel/Inertia code ready to run. \ No newline at end of file diff --git a/.claude/skills/laravel-bento-saas-builder/SKILL.md b/.claude/skills/laravel-bento-saas-builder/SKILL.md new file mode 100644 index 0000000..37d3514 --- /dev/null +++ b/.claude/skills/laravel-bento-saas-builder/SKILL.md @@ -0,0 +1,98 @@ +--- +name: laravel-bento-saas-builder +description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind). +--- + + +# Laravel Bento SaaS Builder + + + +## 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. 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 ecosystem conventions. + + +## Agent Flow — MUST FOLLOW + + +When the user asks to build a SaaS site, immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Build. + + +### Questions (all in one AskUserQuestion call) + + +1. **"What is the SaaS product name and one-line elevator pitch?"** +2. **"Is your primary audience Developers or Marketers/Creators?"** (Determines if we prioritize Code Snippets or Visual Dashboards). +3. **"Pick an aesthetic preset:"** "DevTool Dark" (Neon/Dark Mode) or "Bento Light" (Clean/Playful Light Mode). +4. **"What are 4 key features we can put into an asymmetric Bento Grid?"** +5. **"What is the primary CTA?"** + +--- + + +## 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 + +- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars. +- **Component Lifecycles:** Use `framer-motion` for all layout animations. Scroll reveals must use `whileInView={{ opacity: 1, y: 0 }}`. Stagger children components using `transition={{ staggerChildren: 0.1 }}`. + +--- + + +## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED) + + +You are building within a Laravel Boost environment. You MUST use the following stack and structure. Do not create a standalone Vite React app. + +- **Stack:** Laravel 12, Inertia.js v2, React, Tailwind CSS, Framer Motion, Lucide React. +- **Routing:** Define the landing page route in `routes/web.php` using `Route::get('/', function () { return Inertia::render('Welcome'); });`. +- **Frontend Directory:** All UI components must be placed in `resources/js/Pages/` (for the main views) and `resources/js/Components/` (for reusable UI parts like the Navbar, BentoGrid, and Footer). +- **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 `div`s, Tailwind utility classes, and SVG icons. + +--- + + +## Build Sequence + + +After receiving answers to the 5 questions: +1. Update `routes/web.php` to serve the new Inertia page. +2. Create the main page component at `resources/js/Pages/Welcome.jsx`. +3. Scaffold the UI components in `resources/js/Components/` (Hero, BentoGrid, TabSystem, Footer). +4. Apply Framer Motion layout animations to the Bento Grid to ensure a premium feel. +5. Provide the complete Laravel/Inertia code ready to run. \ No newline at end of file diff --git a/.junie/guidelines.md b/.junie/guidelines.md index bd83379..2a2231b 100644 --- a/.junie/guidelines.md +++ b/.junie/guidelines.md @@ -38,6 +38,7 @@ This project has domain-specific skills available. You MUST activate the relevan - `filament-db-config` — Creates database-backed settings pages and config pages with filament-db-config or db-config package. Activates when creating settings page, config page, configuration page, or when user mentions db-config, db_config, DbConfig, database settings, dynamic configuration, runtime config, storing settings in database. ALWAYS use php artisan make:db-config command to scaffold. NEVER create files manually. NEVER create tests. - `developing-with-fortify` — Laravel Fortify headless authentication backend development. Activate when implementing authentication features including login, registration, password reset, email verification, two-factor authentication (2FA/TOTP), profile updates, headless auth, authentication scaffolding, or auth guards in Laravel applications. - `cinematic-landing-page-builder` — Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations. +- `laravel-bento-saas-builder` — Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind). ## Conventions diff --git a/.junie/skills/laravel-bento-saas-builder/SKILL.md b/.junie/skills/laravel-bento-saas-builder/SKILL.md new file mode 100644 index 0000000..37d3514 --- /dev/null +++ b/.junie/skills/laravel-bento-saas-builder/SKILL.md @@ -0,0 +1,98 @@ +--- +name: laravel-bento-saas-builder +description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind). +--- + + +# Laravel Bento SaaS Builder + + + +## 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. 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 ecosystem conventions. + + +## Agent Flow — MUST FOLLOW + + +When the user asks to build a SaaS site, immediately ask **exactly these questions** using AskUserQuestion in a single call, then build the full site from the answers. Do not ask follow-ups. Build. + + +### Questions (all in one AskUserQuestion call) + + +1. **"What is the SaaS product name and one-line elevator pitch?"** +2. **"Is your primary audience Developers or Marketers/Creators?"** (Determines if we prioritize Code Snippets or Visual Dashboards). +3. **"Pick an aesthetic preset:"** "DevTool Dark" (Neon/Dark Mode) or "Bento Light" (Clean/Playful Light Mode). +4. **"What are 4 key features we can put into an asymmetric Bento Grid?"** +5. **"What is the primary CTA?"** + +--- + + +## 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 + +- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars. +- **Component Lifecycles:** Use `framer-motion` for all layout animations. Scroll reveals must use `whileInView={{ opacity: 1, y: 0 }}`. Stagger children components using `transition={{ staggerChildren: 0.1 }}`. + +--- + + +## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED) + + +You are building within a Laravel Boost environment. You MUST use the following stack and structure. Do not create a standalone Vite React app. + +- **Stack:** Laravel 12, Inertia.js v2, React, Tailwind CSS, Framer Motion, Lucide React. +- **Routing:** Define the landing page route in `routes/web.php` using `Route::get('/', function () { return Inertia::render('Welcome'); });`. +- **Frontend Directory:** All UI components must be placed in `resources/js/Pages/` (for the main views) and `resources/js/Components/` (for reusable UI parts like the Navbar, BentoGrid, and Footer). +- **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 `div`s, Tailwind utility classes, and SVG icons. + +--- + + +## Build Sequence + + +After receiving answers to the 5 questions: +1. Update `routes/web.php` to serve the new Inertia page. +2. Create the main page component at `resources/js/Pages/Welcome.jsx`. +3. Scaffold the UI components in `resources/js/Components/` (Hero, BentoGrid, TabSystem, Footer). +4. Apply Framer Motion layout animations to the Bento Grid to ensure a premium feel. +5. Provide the complete Laravel/Inertia code ready to run. \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md index bd83379..2a2231b 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -38,6 +38,7 @@ This project has domain-specific skills available. You MUST activate the relevan - `filament-db-config` — Creates database-backed settings pages and config pages with filament-db-config or db-config package. Activates when creating settings page, config page, configuration page, or when user mentions db-config, db_config, DbConfig, database settings, dynamic configuration, runtime config, storing settings in database. ALWAYS use php artisan make:db-config command to scaffold. NEVER create files manually. NEVER create tests. - `developing-with-fortify` — Laravel Fortify headless authentication backend development. Activate when implementing authentication features including login, registration, password reset, email verification, two-factor authentication (2FA/TOTP), profile updates, headless auth, authentication scaffolding, or auth guards in Laravel applications. - `cinematic-landing-page-builder` — Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations. +- `laravel-bento-saas-builder` — Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind). ## Conventions diff --git a/GEMINI.md b/GEMINI.md index bd83379..2a2231b 100644 --- a/GEMINI.md +++ b/GEMINI.md @@ -38,6 +38,7 @@ This project has domain-specific skills available. You MUST activate the relevan - `filament-db-config` — Creates database-backed settings pages and config pages with filament-db-config or db-config package. Activates when creating settings page, config page, configuration page, or when user mentions db-config, db_config, DbConfig, database settings, dynamic configuration, runtime config, storing settings in database. ALWAYS use php artisan make:db-config command to scaffold. NEVER create files manually. NEVER create tests. - `developing-with-fortify` — Laravel Fortify headless authentication backend development. Activate when implementing authentication features including login, registration, password reset, email verification, two-factor authentication (2FA/TOTP), profile updates, headless auth, authentication scaffolding, or auth guards in Laravel applications. - `cinematic-landing-page-builder` — Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations. +- `laravel-bento-saas-builder` — Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind). ## Conventions diff --git a/boost.json b/boost.json index 3e99269..f62874c 100644 --- a/boost.json +++ b/boost.json @@ -21,6 +21,7 @@ "tailwindcss-development", "filament-db-config", "developing-with-fortify", - "cinematic-landing-page-builder" + "cinematic-landing-page-builder", + "laravel-bento-saas-builder" ] }