bps-kit 1.0.2 → 1.0.4

package/templates/skills_normal/app-builder/templates/nextjs-static/TEMPLATE.md

@@ -1,93 +1,54 @@
 ---
 name: nextjs-static
-description: Modern template for Next.js 16, React 19 & Tailwind v4. Optimized for Landing pages and Portfolios.
+description: Next.js static site template principles. Landing pages, portfolios, marketing.
 ---
 
-# Next.js Static Site Template (Modern Edition)
+# Next.js Static Site Template
 
 ## 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) |
+| Component | Technology |
+|-----------|------------|
+| Framework | Next.js 14 (Static Export) |
+| Language | TypeScript |
+| Styling | Tailwind CSS |
+| Animations | Framer Motion |
+| Icons | Lucide React |
+| SEO | 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...)
+│   │   ├── layout.tsx
+│   │   ├── page.tsx      # Landing
+│   │   ├── about/
+│   │   ├── contact/
+│   │   └── blog/
 │   ├── components/
 │   │   ├── layout/       # Header, Footer
-│   │   ├── sections/     # Hero, Features, Pricing, CTA
-│   │   └── ui/           # Atomic components (Button, Card)
+│   │   ├── sections/     # Hero, Features, CTA
+│   │   └── ui/
 │   └── 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
+├── content/              # Markdown content
+├── public/
+└── next.config.js
 ```
 
 ---
 
 ## 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',
-  },
+```javascript
+// next.config.js
+const nextConfig = {
+  output: 'export',
+  images: { unoptimized: true },
+  trailingSlash: true,
 };
 ```
 
@@ -95,75 +56,51 @@ export const metadata: Metadata = {
 
 ## 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 />` |
+| Section | Purpose |
+|---------|---------|
+| Hero | Main headline, CTA |
+| Features | Product benefits |
+| Testimonials | Social proof |
+| Pricing | Plans |
+| CTA | Final conversion |
 
 ---
 
-## Animation Patterns (Framer Motion)
+## Animation Patterns
 
-| 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 }}` |
+| Pattern | Use |
+|---------|-----|
+| Fade up | Content entry |
+| Stagger | List items |
+| Scroll reveal | On viewport |
+| Hover | Interactive feedback |
 
 ---
 
 ## 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
-   ```
+1. `npx create-next-app {{name}} --typescript --tailwind --app`
+2. Install: `npm install framer-motion lucide-react next-seo`
+3. Configure static export
+4. Create sections
+5. `npm run dev`
 
 ---
 
 ## 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`. |
+| Platform | Method |
+|----------|--------|
+| Vercel | Auto |
+| Netlify | Auto |
+| GitHub Pages | gh-pages branch |
+| Any host | Upload `out` folder |
 
 ---
 
-## Best Practices (Modern)
+## Best Practices
 
-- **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:`.
+- Static export for maximum performance
+- Framer Motion for premium animations
+- Responsive mobile-first design
+- SEO metadata on every page

package/templates/skills_normal/app-builder/templates/nuxt-app/TEMPLATE.md

@@ -1,65 +1,66 @@
 ---
 name: nuxt-app
-description: Nuxt 4 full-stack template. Vue 3 (Vapor), Pinia, Tailwind v4, Prisma.
+description: Nuxt 3 full-stack template. Vue 3, Pinia, Tailwind, 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.
+# Nuxt 3 Full-Stack Template
 
 ## 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 |
+| Component | Technology |
+|-----------|------------|
+| Framework | Nuxt 3 |
+| Language | TypeScript |
+| UI | Vue 3 (Composition API) |
+| State | Pinia |
+| Database | PostgreSQL + Prisma |
+| Styling | Tailwind CSS |
+| Validation | Zod |
 
 ---
 
-## Directory Structure (Nuxt 4 Standard)
-
-Sử dụng cấu trúc `app/` để giữ thư mục gốc gọn gàng.
+## Directory Structure
 
 ```
 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
+├── server/
+│   ├── api/
+│   │   └── [resource]/
+│   │       └── index.ts
+│   └── utils/
+│       └── db.ts         # Prisma client
+├── composables/
+│   └── useAuth.ts
+├── stores/
+│   └── user.ts           # Pinia store
+├── components/
+│   └── ui/
+├── pages/
+│   ├── index.vue
+│   └── [...slug].vue
+├── layouts/
+│   └── default.vue
+├── assets/
+│   └── css/
+│       └── main.css
+├── .env.example
+├── nuxt.config.ts
 └── package.json
 ```
 
 ---
 
-## Key Concepts (2026)
+## Key Concepts
 
-| 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="..." />`). |
+| Concept | Description |
+|---------|-------------|
+| Auto-imports | Components, composables, utils |
+| File-based routing | pages/ → routes |
+| Server Routes | server/api/ → API endpoints |
+| Composables | Reusable reactive logic |
+| Pinia | State management |
 
 ---
 
@@ -67,68 +68,34 @@ project-name/
 
 | Variable | Purpose |
 |----------|---------|
-| DATABASE_URL | Prisma connection string (PostgreSQL) |
-| NUXT_PUBLIC_APP_URL | Canonical URL |
-| NUXT_SESSION_PASSWORD | Session encryption key |
+| DATABASE_URL | Prisma connection |
+| NUXT_PUBLIC_APP_URL | Public URL |
 
 ---
 
 ## 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`:
+1. `npx nuxi@latest init {{name}}`
+2. `cd {{name}}`
+3. `npm install @pinia/nuxt @prisma/client prisma zod`
+4. `npm install -D @nuxtjs/tailwindcss`
+5. Add modules 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
+   modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss']
    ```
+6. `npx prisma init`
+7. Configure schema
+8. `npx prisma db push`
+9. `npm run dev`
 
 ---
 
 ## 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).
+- Use `<script setup>` for components
+- Composables for reusable logic
+- Pinia stores in `stores/` folder
+- Server routes for API logic
+- Auto-import for clean code
+- TypeScript for type safety
+- See `@[skills/vue-expert]` for Vue patterns

package/templates/skills_normal/app-builder/templates/react-native-app/TEMPLATE.md

@@ -3,117 +3,91 @@ name: react-native-app
 description: React Native mobile app template principles. Expo, TypeScript, navigation.
 ---
 
-# React Native App Template (2026 Edition)
-
-Modern mobile app template, optimized for New Architecture and React 19.
+# React Native App Template
 
 ## Tech Stack
 
-| Component | Technology | Version / Notes |
-|-----------|------------|-----------------|
-| Core | React Native + Expo | SDK 52+ (New Architecture Enabled) |
-| Language | TypeScript | v5+ (Strict Mode) |
-| UI Logic | React | v19 (React Compiler, auto-memoization) |
-| Navigation | Expo Router | v4+ (File-based, Universal Links) |
-| Styling | NativeWind | v4.0 (Tailwind v4, CSS-first config) |
-| State | Zustand + React Query | v5+ (Async State Management) |
-| Storage | Expo SecureStore | Encrypted local storage |
+| Component | Technology |
+|-----------|------------|
+| Framework | React Native + Expo |
+| Language | TypeScript |
+| Navigation | Expo Router |
+| State | Zustand + React Query |
+| Styling | NativeWind |
+| Testing | Jest + RNTL |
 
 ---
 
 ## Directory Structure
 
-Standardized structure for Expo Router and NativeWind v4.
-
 ```
 project-name/
-├── app/                 # Expo Router (File-based routing)
-│   ├── _layout.tsx      # Root Layout (Stack/Tabs config)
-│   ├── index.tsx        # Main Screen
-│   ├── (tabs)/          # Route Group for Tab Bar
-│   │   ├── _layout.tsx
-│   │   ├── home.tsx
-│   │   └── profile.tsx
-│   ├── +not-found.tsx   # 404 Page
-│   └── [id].tsx         # Dynamic Route (Typed)
+├── app/                 # Expo Router (file-based)
+│   ├── _layout.tsx      # Root layout
+│   ├── index.tsx        # Home
+│   ├── (tabs)/          # Tab navigation
+│   └── [id].tsx         # Dynamic route
 ├── components/
-│   ├── ui/              # Primitive Components (Button, Text)
-│   └── features/        # Complex Components
-├── hooks/               # Custom Hooks
+│   ├── ui/              # Reusable
+│   └── features/
+├── hooks/
 ├── lib/
-│   ├── api.ts           # Axios/Fetch client
-│   └── storage.ts       # SecureStore wrapper
-├── store/               # Zustand stores
-├── constants/           # Colors, Theme config
-├── assets/              # Fonts, Images
-├── global.css           # Entry point for NativeWind v4
-├── tailwind.config.ts   # Tailwind Config (if custom theme needed)
-├── babel.config.js      # NativeWind Babel Plugin
-└── app.json             # Expo Config
+│   ├── api.ts
+│   └── storage.ts
+├── store/
+├── constants/
+└── app.json
 ```
 
 ---
 
-## Navigation Patterns (Expo Router)
+## Navigation Patterns
 
-| Pattern | Description | Implement |
-|---------|-------------|-----------|
-| Stack | Hierarchical navigation (Push/Pop) | `<Stack />` in `_layout.tsx` |
-| Tabs | Bottom navigation bar | `<Tabs />` in `(tabs)/_layout.tsx` |
-| Drawer | Side slide-out menu | `expo-router/drawer` |
-| Modals | Overlay screens | `presentation: 'modal'` in Stack screen |
+| Pattern | Use |
+|---------|-----|
+| Stack | Page hierarchy |
+| Tabs | Bottom navigation |
+| Drawer | Side menu |
+| Modal | Overlay screens |
 
 ---
 
-## Key Packages & Purpose
+## State Management
 
-| Package | Purpose |
-|---------|---------|
-| expo-router | File-based routing (Next.js like) |
-| nativewind | Use Tailwind CSS classes in React Native |
-| react-native-reanimated | Smooth animations (runs on UI thread) |
-| @tanstack/react-query | Server state management, caching, pre-fetching |
-| zustand | Global state management (lighter than Redux) |
-| expo-image | Optimized image rendering for performance |
+| Type | Tool |
+|------|------|
+| Local | Zustand |
+| Server | React Query |
+| Forms | React Hook Form |
+| Storage | Expo SecureStore |
 
 ---
 
-## Setup Steps (2026 Standard)
+## Key Packages
 
-1. Initialize Project:
-   ```bash
-   npx create-expo-app@latest my-app --template default
-   cd my-app
-   ```
-
-2. Install Core Dependencies:
-   ```bash
-   npx expo install expo-router react-native-safe-area-context react-native-screens expo-link expo-constants expo-status-bar
-   ```
+| Package | Purpose |
+|---------|---------|
+| expo-router | File-based routing |
+| zustand | Local state |
+| @tanstack/react-query | Server state |
+| nativewind | Tailwind styling |
+| expo-secure-store | Secure storage |
 
-3. Install NativeWind v4:
-   ```bash
-   npm install nativewind tailwindcss react-native-reanimated
-   ```
+---
 
-4. Configure NativeWind (Babel & CSS):
-   - Add plugin to `babel.config.js`: `plugins: ["nativewind/babel"]`.
-   - Create `global.css` with: `@import "tailwindcss";`.
-   - Import `global.css` in `app/_layout.tsx`.
+## Setup Steps
 
-5. Run Project:
-   ```bash
-   npx expo start -c
-   # Press 'i' for iOS simulator or 'a' for Android emulator
-   ```
+1. `npx create-expo-app {{name}} -t expo-template-blank-typescript`
+2. `npx expo install expo-router react-native-safe-area-context`
+3. Install state: `npm install zustand @tanstack/react-query`
+4. `npx expo start`
 
 ---
 
-## Best Practices (Updated)
+## Best Practices
 
-- **New Architecture**: Ensure `newArchEnabled: true` in `app.json` to leverage TurboModules and Fabric Renderer.
-- **Typed Routes**: Use Expo Router's "Typed Routes" feature for type-safe routing (e.g., `router.push('/path')`).
-- **React 19**: Reduce usage of `useMemo` or `useCallback` thanks to React Compiler (if enabled).
-- **Components**: Build UI primitives (Box, Text) with NativeWind className for reusability.
-- **Assets**: Use `expo-image` instead of default `<Image />` for better caching and performance.
-- **API**: Always wrap API calls with TanStack Query, avoid direct calls in `useEffect`.
+- Expo Router for navigation
+- Zustand for local, React Query for server state
+- NativeWind for consistent styling
+- Expo SecureStore for tokens
+- Test on both iOS and Android

package/templates/skills_normal/behavioral-modes/SKILL.md

@@ -1,7 +1,9 @@
 ---
 name: behavioral-modes
-description: AI operational modes (brainstorm, implement, debug, review, teach, ship, orchestrate). Use to adapt behavior based on task type.
-allowed-tools: Read, Glob, Grep
+description: "AI operational modes (brainstorm, implement, debug, review, teach, ship, orchestrate). Use to adapt behavior based on task type."
+risk: unknown
+source: community
+date_added: "2026-02-27"
 ---
 
 # Behavioral Modes - Adaptive AI Operating Modes
@@ -240,3 +242,6 @@ Users can explicitly request a mode:
 /debug why login fails
 /review this pull request
 ```
+
+## When to Use
+This skill is applicable to execute the workflow or actions described in the overview.