@heyai-rules/pilo-masterkit 1.2.2 → 2.2.0

package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md

@@ -1,169 +1,169 @@
----
-name: nextjs-static
-description: Modern template for Next.js 16, React 19 & Tailwind v4. Optimized for Landing pages and Portfolios.
----
-
-# Next.js Static Site Template (Modern Edition)
-
-## Tech Stack
-
-| Component | Technology | Notes |
-|-----------|------------|-------|
-| Framework | Next.js 16+ | App Router, Turbopack, Static Exports |
-| Core | React 19 | Server Components, New Hooks, Compiler |
-| Language | TypeScript | Strict Mode |
-| Styling | Tailwind CSS v4 | CSS-first configuration (No js config), Oxide Engine |
-| Animations | Framer Motion | Layout animations & gestures |
-| Icons | Lucide React | Lightweight SVG icons |
-| SEO | Metadata API | Native Next.js API (Replaces next-seo) |
-
----
-
-## Directory Structure
-
-Streamlined structure thanks to Tailwind v4 (theme configuration lives inside CSS).
-
-```
-project-name/
-├── src/
-│   ├── app/
-│   │   ├── layout.tsx    # Contains root SEO Metadata
-│   │   ├── page.tsx      # Landing Page
-│   │   ├── globals.css   # Import Tailwind v4 & @theme config
-│   │   ├── not-found.tsx # Custom 404 page
-│   │   └── (routes)/     # Route groups (about, contact...)
-│   ├── components/
-│   │   ├── layout/       # Header, Footer
-│   │   ├── sections/     # Hero, Features, Pricing, CTA
-│   │   └── ui/           # Atomic components (Button, Card)
-│   └── lib/
-│       └── utils.ts      # Helper functions (cn, formatters)
-├── content/              # Markdown/MDX content
-├── public/               # Static assets (images, fonts)
-├── next.config.ts        # Next.js Config (TypeScript)
-└── package.json
-```
-
----
-
-## Static Export Config
-
-Using `next.config.ts` instead of `.js` for better type safety.
-
-```typescript
-// next.config.ts
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  output: 'export',        // Required for Static Hosting (S3, GitHub Pages)
-  images: { 
-    unoptimized: true      // Required if not using Node.js server image optimization
-  },
-  trailingSlash: true,     // Recommended for SEO and fixing 404s on some hosts
-  reactStrictMode: true,
-};
-
-export default nextConfig;
-```
-
----
-
-## SEO Implementation (Metadata API)
-
-Deprecated next-seo. Configure directly in layout.tsx or page.tsx.
-
-```typescript
-// src/app/layout.tsx
-import type { Metadata } from 'next';
-
-export const metadata: Metadata = {
-  title: {
-    template: '%s | Product Name',
-    default: 'Home - Product Name',
-  },
-  description: 'SEO optimized description for the landing page.',
-  openGraph: {
-    type: 'website',
-    locale: 'en_US',
-    url: 'https://mysite.com',
-    siteName: 'My Brand',
-  },
-};
-```
-
----
-
-## Landing Page Sections
-
-| Section | Purpose | Suggested Component |
-|---------|---------|---------------------|
-| Hero | First impression, H1 & Main CTA | `<HeroSection />` |
-| Features | Product benefits (Grid/Bento layout) | `<FeaturesGrid />` |
-| Social Proof | Partner logos, User numbers | `<LogoCloud />` |
-| Testimonials | Customer reviews | `<TestimonialCarousel />` |
-| Pricing | Service plans | `<PricingCards />` |
-| FAQ | Questions & Answers (Good for SEO) | `<Accordion />` |
-| CTA | Final conversion | `<CallToAction />` |
-
----
-
-## Animation Patterns (Framer Motion)
-
-| Pattern | Usage | Implementation |
-|---------|-------|----------------|
-| Fade Up | Headlines, paragraphs | `initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}` |
-| Stagger | Lists of Features/Cards | Use variants with `staggerChildren` |
-| Parallax | Background images or floating elements | `useScroll` & `useTransform` |
-| Micro-interactions | Hover buttons, click effects | `whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}` |
-
----
-
-## Setup Steps
-
-1. Initialize Project:
-   ```bash
-   npx create-next-app@latest my-site --typescript --tailwind --eslint
-   # Select 'Yes' for App Router
-   # Select 'No' for 'Would you like to customize the default import alias?'
-   ```
-
-2. Install Auxiliary Libraries:
-   ```bash
-   npm install framer-motion lucide-react clsx tailwind-merge
-   # clsx and tailwind-merge help handle dynamic classes better
-   ```
-
-3. Configure Tailwind v4 (in `src/app/globals.css`):
-   ```css
-   @import "tailwindcss";
-
-   @theme {
-     --color-primary: #3b82f6;
-     --font-sans: 'Inter', sans-serif;
-   }
-   ```
-
-4. Development:
-   ```bash
-   npm run dev --turbopack
-   ```
-
----
-
-## Deployment
-
-| Platform | Method | Important Notes |
-|----------|--------|-----------------|
-| Vercel | Git Push | Auto-detects Next.js. Best for performance. |
-| GitHub Pages | GitHub Actions | Need to set `basePath` in `next.config.ts` if not using a custom domain. |
-| AWS S3 / CloudFront | Upload out folder | Ensure Error Document is configured to `404.html`. |
-| Netlify | Git Push | Set build command to `npm run build`. |
-
----
-
-## Best Practices (Modern)
-
-- **React Server Components (RSC)**: Default all components to Server Components. Only add `'use client'` when you need state (`useState`) or event listeners (`onClick`).
-- **Image Optimization**: Use the `<Image />` component but remember `unoptimized: true` for static export or use an external image CDN (Cloudinary/Imgix).
-- **Font Optimization**: Use `next/font` (Google Fonts) to automatically host fonts and prevent layout shift.
-- **Responsive**: Mobile-first design using Tailwind prefixes like `sm:`, `md:`, `lg:`.
+---
+name: nextjs-static
+description: Modern template for Next.js 16, React 19 & Tailwind v4. Optimized for Landing pages and Portfolios.
+---
+
+# Next.js Static Site Template (Modern Edition)
+
+## Tech Stack
+
+| Component | Technology | Notes |
+|-----------|------------|-------|
+| Framework | Next.js 16+ | App Router, Turbopack, Static Exports |
+| Core | React 19 | Server Components, New Hooks, Compiler |
+| Language | TypeScript | Strict Mode |
+| Styling | Tailwind CSS v4 | CSS-first configuration (No js config), Oxide Engine |
+| Animations | Framer Motion | Layout animations & gestures |
+| Icons | Lucide React | Lightweight SVG icons |
+| SEO | Metadata API | Native Next.js API (Replaces next-seo) |
+
+---
+
+## Directory Structure
+
+Streamlined structure thanks to Tailwind v4 (theme configuration lives inside CSS).
+
+```
+project-name/
+├── src/
+│   ├── app/
+│   │   ├── layout.tsx    # Contains root SEO Metadata
+│   │   ├── page.tsx      # Landing Page
+│   │   ├── globals.css   # Import Tailwind v4 & @theme config
+│   │   ├── not-found.tsx # Custom 404 page
+│   │   └── (routes)/     # Route groups (about, contact...)
+│   ├── components/
+│   │   ├── layout/       # Header, Footer
+│   │   ├── sections/     # Hero, Features, Pricing, CTA
+│   │   └── ui/           # Atomic components (Button, Card)
+│   └── lib/
+│       └── utils.ts      # Helper functions (cn, formatters)
+├── content/              # Markdown/MDX content
+├── public/               # Static assets (images, fonts)
+├── next.config.ts        # Next.js Config (TypeScript)
+└── package.json
+```
+
+---
+
+## Static Export Config
+
+Using `next.config.ts` instead of `.js` for better type safety.
+
+```typescript
+// next.config.ts
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: 'export',        // Required for Static Hosting (S3, GitHub Pages)
+  images: { 
+    unoptimized: true      // Required if not using Node.js server image optimization
+  },
+  trailingSlash: true,     // Recommended for SEO and fixing 404s on some hosts
+  reactStrictMode: true,
+};
+
+export default nextConfig;
+```
+
+---
+
+## SEO Implementation (Metadata API)
+
+Deprecated next-seo. Configure directly in layout.tsx or page.tsx.
+
+```typescript
+// src/app/layout.tsx
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Product Name',
+    default: 'Home - Product Name',
+  },
+  description: 'SEO optimized description for the landing page.',
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    url: 'https://mysite.com',
+    siteName: 'My Brand',
+  },
+};
+```
+
+---
+
+## Landing Page Sections
+
+| Section | Purpose | Suggested Component |
+|---------|---------|---------------------|
+| Hero | First impression, H1 & Main CTA | `<HeroSection />` |
+| Features | Product benefits (Grid/Bento layout) | `<FeaturesGrid />` |
+| Social Proof | Partner logos, User numbers | `<LogoCloud />` |
+| Testimonials | Customer reviews | `<TestimonialCarousel />` |
+| Pricing | Service plans | `<PricingCards />` |
+| FAQ | Questions & Answers (Good for SEO) | `<Accordion />` |
+| CTA | Final conversion | `<CallToAction />` |
+
+---
+
+## Animation Patterns (Framer Motion)
+
+| Pattern | Usage | Implementation |
+|---------|-------|----------------|
+| Fade Up | Headlines, paragraphs | `initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}` |
+| Stagger | Lists of Features/Cards | Use variants with `staggerChildren` |
+| Parallax | Background images or floating elements | `useScroll` & `useTransform` |
+| Micro-interactions | Hover buttons, click effects | `whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}` |
+
+---
+
+## Setup Steps
+
+1. Initialize Project:
+   ```bash
+   npx create-next-app@latest my-site --typescript --tailwind --eslint
+   # Select 'Yes' for App Router
+   # Select 'No' for 'Would you like to customize the default import alias?'
+   ```
+
+2. Install Auxiliary Libraries:
+   ```bash
+   npm install framer-motion lucide-react clsx tailwind-merge
+   # clsx and tailwind-merge help handle dynamic classes better
+   ```
+
+3. Configure Tailwind v4 (in `src/app/globals.css`):
+   ```css
+   @import "tailwindcss";
+
+   @theme {
+     --color-primary: #3b82f6;
+     --font-sans: 'Inter', sans-serif;
+   }
+   ```
+
+4. Development:
+   ```bash
+   npm run dev --turbopack
+   ```
+
+---
+
+## Deployment
+
+| Platform | Method | Important Notes |
+|----------|--------|-----------------|
+| Vercel | Git Push | Auto-detects Next.js. Best for performance. |
+| GitHub Pages | GitHub Actions | Need to set `basePath` in `next.config.ts` if not using a custom domain. |
+| AWS S3 / CloudFront | Upload out folder | Ensure Error Document is configured to `404.html`. |
+| Netlify | Git Push | Set build command to `npm run build`. |
+
+---
+
+## Best Practices (Modern)
+
+- **React Server Components (RSC)**: Default all components to Server Components. Only add `'use client'` when you need state (`useState`) or event listeners (`onClick`).
+- **Image Optimization**: Use the `<Image />` component but remember `unoptimized: true` for static export or use an external image CDN (Cloudinary/Imgix).
+- **Font Optimization**: Use `next/font` (Google Fonts) to automatically host fonts and prevent layout shift.
+- **Responsive**: Mobile-first design using Tailwind prefixes like `sm:`, `md:`, `lg:`.

package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md

@@ -1,134 +1,134 @@
----
-name: nuxt-app
-description: Nuxt 4 full-stack template. Vue 3 (Vapor), Pinia, Tailwind v4, Prisma.
----
-
-# Nuxt 4 Full-Stack Template (2026 Edition)
-
-Mẫu template Full-Stack hiện đại cho Nuxt 4, tối ưu hóa hiệu suất với Vue Vapor Mode và Tailwind v4.
-
-## Tech Stack
-
-| Component | Technology | Version / Notes |
-|-----------|------------|-----------------|
-| Framework | Nuxt | v4.0+ (App Directory structure) |
-| UI Engine | Vue | v3.6+ (Vapor Mode enabled) |
-| Language | TypeScript | v5+ (Strict Mode) |
-| State | Pinia | v3+ (Store syntax) |
-| Database | PostgreSQL | Prisma ORM |
-| Styling | Tailwind CSS | v4.0 (Vite Plugin, Zero-config) |
-| UI Lib | Nuxt UI | v3 (Tailwind v4 native) |
-| Validation | Zod | Schema validation |
-
----
-
-## Directory Structure (Nuxt 4 Standard)
-
-Sử dụng cấu trúc `app/` để giữ thư mục gốc gọn gàng.
-
-```
-project-name/
-├── app/                  # Application Source
-│   ├── assets/
-│   │   └── css/
-│   │       └── main.css  # Tailwind v4 imports
-│   ├── components/       # Auto-imported components
-│   ├── composables/      # Auto-imported logic
-│   ├── layouts/
-│   ├── pages/            # File-based routing
-│   ├── app.vue           # Root component
-│   └── router.options.ts
-├── server/               # Nitro Server Engine
-│   ├── api/              # API Routes (e.g. /api/users)
-│   ├── routes/           # Server Routes
-│   └── utils/            # Server-only helpers (Prisma)
-├── prisma/
-│   └── schema.prisma
-├── public/
-├── nuxt.config.ts        # Main Config
-└── package.json
-```
-
----
-
-## Key Concepts (2026)
-
-| Concept | Description | Future Update |
-|---------|-------------|---------------|
-| **App Directory** | `app/` | Tách biệt mã nguồn ứng dụng và file cấu hình root. |
-| **Vapor Mode** | Opt-in performance | Render không cần Virtual DOM (như SolidJS). Bật trong `nuxt.config`. |
-| **Server Functions** | RPC-style calls | Gọi hàm server trực tiếp từ client (thay thế dần API routes thủ công). |
-| **Tailwind v4** | CSS-first | Cấu hình theme trực tiếp trong CSS, không cần `tailwind.config.js`. |
-| **Nuxt Islands** | Server Components | Render component cô lập trên server (`<NuxtIsland name="..." />`). |
-
----
-
-## Environment Variables
-
-| Variable | Purpose |
-|----------|---------|
-| DATABASE_URL | Prisma connection string (PostgreSQL) |
-| NUXT_PUBLIC_APP_URL | Canonical URL |
-| NUXT_SESSION_PASSWORD | Session encryption key |
-
----
-
-## Setup Steps
-
-1. Initialize Project:
-   ```bash
-   npx nuxi@latest init my-app
-   # Select "Nuxt 4 structure" if prompted
-   ```
-
-2. Install Core Deps:
-   ```bash
-   npm install @pinia/nuxt @prisma/client zod
-   npm install -D prisma
-   ```
-
-3. Setup Tailwind v4:
-   Install the Vite plugin (new standard):
-   ```bash
-   npm install tailwindcss @tailwindcss/vite
-   ```
-
-   Add to `nuxt.config.ts`:
-   ```ts
-   import tailwindcss from '@tailwindcss/vite'
-   export default defineNuxtConfig({
-     vite: {
-       plugins: [tailwindcss()]
-     },
-     css: ['~/assets/css/main.css']
-   })
-   ```
-
-4. Configure CSS:
-   In `app/assets/css/main.css`:
-   ```css
-   @import "tailwindcss";
-   @theme {
-     --color-primary: oklch(0.6 0.15 150);
-   }
-   ```
-
-5. Run Development:
-   ```bash
-   npm run dev
-   # Runs with Turbo/Vite
-   ```
-
----
-
-## Best Practices
-
-- **Vapor Mode**: Kích hoạt cho các component nặng về render:
-  ```ts
-  <script setup lang="ts" vapor>
-  // Component này sẽ compile sang chế độ Vapor (No VDOM)
-  </script>
-  ```
-- **Data Fetching**: Sử dụng `useFetch` với `server: false` cho các tác vụ client-only, hoặc dùng Server Functions để type-safety tốt hơn.
-- **State**: Dùng `defineStore` (Pinia) cho global state, `useState` của Nuxt cho state đơn giản chia sẻ giữa Server/Client.
-- **Type Safety**: Tự động tạo type cho API routes (`$fetch` typed automatically).
+---
+name: nuxt-app
+description: Nuxt 4 full-stack template. Vue 3 (Vapor), Pinia, Tailwind v4, Prisma.
+---
+
+# Nuxt 4 Full-Stack Template (2026 Edition)
+
+Mẫu template Full-Stack hiện đại cho Nuxt 4, tối ưu hóa hiệu suất với Vue Vapor Mode và Tailwind v4.
+
+## Tech Stack
+
+| Component | Technology | Version / Notes |
+|-----------|------------|-----------------|
+| Framework | Nuxt | v4.0+ (App Directory structure) |
+| UI Engine | Vue | v3.6+ (Vapor Mode enabled) |
+| Language | TypeScript | v5+ (Strict Mode) |
+| State | Pinia | v3+ (Store syntax) |
+| Database | PostgreSQL | Prisma ORM |
+| Styling | Tailwind CSS | v4.0 (Vite Plugin, Zero-config) |
+| UI Lib | Nuxt UI | v3 (Tailwind v4 native) |
+| Validation | Zod | Schema validation |
+
+---
+
+## Directory Structure (Nuxt 4 Standard)
+
+Sử dụng cấu trúc `app/` để giữ thư mục gốc gọn gàng.
+
+```
+project-name/
+├── app/                  # Application Source
+│   ├── assets/
+│   │   └── css/
+│   │       └── main.css  # Tailwind v4 imports
+│   ├── components/       # Auto-imported components
+│   ├── composables/      # Auto-imported logic
+│   ├── layouts/
+│   ├── pages/            # File-based routing
+│   ├── app.vue           # Root component
+│   └── router.options.ts
+├── server/               # Nitro Server Engine
+│   ├── api/              # API Routes (e.g. /api/users)
+│   ├── routes/           # Server Routes
+│   └── utils/            # Server-only helpers (Prisma)
+├── prisma/
+│   └── schema.prisma
+├── public/
+├── nuxt.config.ts        # Main Config
+└── package.json
+```
+
+---
+
+## Key Concepts (2026)
+
+| Concept | Description | Future Update |
+|---------|-------------|---------------|
+| **App Directory** | `app/` | Tách biệt mã nguồn ứng dụng và file cấu hình root. |
+| **Vapor Mode** | Opt-in performance | Render không cần Virtual DOM (như SolidJS). Bật trong `nuxt.config`. |
+| **Server Functions** | RPC-style calls | Gọi hàm server trực tiếp từ client (thay thế dần API routes thủ công). |
+| **Tailwind v4** | CSS-first | Cấu hình theme trực tiếp trong CSS, không cần `tailwind.config.js`. |
+| **Nuxt Islands** | Server Components | Render component cô lập trên server (`<NuxtIsland name="..." />`). |
+
+---
+
+## Environment Variables
+
+| Variable | Purpose |
+|----------|---------|
+| DATABASE_URL | Prisma connection string (PostgreSQL) |
+| NUXT_PUBLIC_APP_URL | Canonical URL |
+| NUXT_SESSION_PASSWORD | Session encryption key |
+
+---
+
+## Setup Steps
+
+1. Initialize Project:
+   ```bash
+   npx nuxi@latest init my-app
+   # Select "Nuxt 4 structure" if prompted
+   ```
+
+2. Install Core Deps:
+   ```bash
+   npm install @pinia/nuxt @prisma/client zod
+   npm install -D prisma
+   ```
+
+3. Setup Tailwind v4:
+   Install the Vite plugin (new standard):
+   ```bash
+   npm install tailwindcss @tailwindcss/vite
+   ```
+
+   Add to `nuxt.config.ts`:
+   ```ts
+   import tailwindcss from '@tailwindcss/vite'
+   export default defineNuxtConfig({
+     vite: {
+       plugins: [tailwindcss()]
+     },
+     css: ['~/assets/css/main.css']
+   })
+   ```
+
+4. Configure CSS:
+   In `app/assets/css/main.css`:
+   ```css
+   @import "tailwindcss";
+   @theme {
+     --color-primary: oklch(0.6 0.15 150);
+   }
+   ```
+
+5. Run Development:
+   ```bash
+   npm run dev
+   # Runs with Turbo/Vite
+   ```
+
+---
+
+## Best Practices
+
+- **Vapor Mode**: Kích hoạt cho các component nặng về render:
+  ```ts
+  <script setup lang="ts" vapor>
+  // Component này sẽ compile sang chế độ Vapor (No VDOM)
+  </script>
+  ```
+- **Data Fetching**: Sử dụng `useFetch` với `server: false` cho các tác vụ client-only, hoặc dùng Server Functions để type-safety tốt hơn.
+- **State**: Dùng `defineStore` (Pinia) cho global state, `useState` của Nuxt cho state đơn giản chia sẻ giữa Server/Client.
+- **Type Safety**: Tự động tạo type cho API routes (`$fetch` typed automatically).