thachvd-kit 1.0.29 → 1.0.31

package/skills/app-builder/templates/express-api/TEMPLATE.md

@@ -1,83 +0,0 @@
----
-name: express-api
-description: Express.js REST API template principles. TypeScript, Prisma, JWT.
----
-
-# Express.js API Template
-
-## Tech Stack
-
-| Component | Technology |
-|-----------|------------|
-| Runtime | Node.js 20+ |
-| Framework | Express.js |
-| Language | TypeScript |
-| Database | PostgreSQL + Prisma |
-| Validation | Zod |
-| Auth | JWT + bcrypt |
-
----
-
-## Directory Structure
-
-```
-project-name/
-├── prisma/
-│   └── schema.prisma
-├── src/
-│   ├── app.ts           # Express setup
-│   ├── config/          # Environment
-│   ├── routes/          # Route handlers
-│   ├── controllers/     # Business logic
-│   ├── services/        # Data access
-│   ├── middleware/
-│   │   ├── auth.ts      # JWT verify
-│   │   ├── error.ts     # Error handler
-│   │   └── validate.ts  # Zod validation
-│   ├── schemas/         # Zod schemas
-│   └── utils/
-└── package.json
-```
-
----
-
-## Middleware Stack
-
-| Order | Middleware |
-|-------|------------|
-| 1 | helmet (security) |
-| 2 | cors |
-| 3 | morgan (logging) |
-| 4 | body parsing |
-| 5 | routes |
-| 6 | error handler |
-
----
-
-## API Response Format
-
-| Type | Structure |
-|------|-----------|
-| Success | `{ success: true, data: {...} }` |
-| Error | `{ error: "message", details: [...] }` |
-
----
-
-## Setup Steps
-
-1. Create project directory
-2. `npm init -y`
-3. Install deps: `npm install express prisma zod bcrypt jsonwebtoken`
-4. Configure Prisma
-5. `npm run db:push`
-6. `npm run dev`
-
----
-
-## Best Practices
-
-- Layer architecture (routes → controllers → services)
-- Validate all inputs with Zod
-- Centralized error handling
-- Environment-based config
-- Use Prisma for type-safe DB access

package/skills/app-builder/templates/flutter-app/TEMPLATE.md

@@ -1,90 +0,0 @@
----
-name: flutter-app
-description: Flutter mobile app template principles. Riverpod, Go Router, clean architecture.
----
-
-# Flutter App Template
-
-## Tech Stack
-
-| Component | Technology |
-|-----------|------------|
-| Framework | Flutter 3.x |
-| Language | Dart 3.x |
-| State | Riverpod 2.0 |
-| Navigation | Go Router |
-| HTTP | Dio |
-| Storage | Hive |
-
----
-
-## Directory Structure
-
-```
-project_name/
-├── lib/
-│   ├── main.dart
-│   ├── app.dart
-│   ├── core/
-│   │   ├── constants/
-│   │   ├── theme/
-│   │   ├── router/
-│   │   └── utils/
-│   ├── features/
-│   │   ├── auth/
-│   │   │   ├── data/
-│   │   │   ├── domain/
-│   │   │   └── presentation/
-│   │   └── home/
-│   ├── shared/
-│   │   ├── widgets/
-│   │   └── providers/
-│   └── services/
-│       ├── api/
-│       └── storage/
-├── test/
-└── pubspec.yaml
-```
-
----
-
-## Architecture Layers
-
-| Layer | Contents |
-|-------|----------|
-| Presentation | Screens, Widgets, Providers |
-| Domain | Entities, Use Cases |
-| Data | Repositories, Models |
-
----
-
-## Key Packages
-
-| Package | Purpose |
-|---------|---------|
-| flutter_riverpod | State management |
-| riverpod_annotation | Code generation |
-| go_router | Navigation |
-| dio | HTTP client |
-| freezed | Immutable models |
-| hive | Local storage |
-
----
-
-## Setup Steps
-
-1. `flutter create {{name}} --org com.{{bundle}}`
-2. Update `pubspec.yaml`
-3. `flutter pub get`
-4. Run code generation: `dart run build_runner build`
-5. `flutter run`
-
----
-
-## Best Practices
-
-- Feature-first folder structure
-- Riverpod for state, React Query pattern for server state
-- Freezed for immutable data classes
-- Go Router for declarative navigation
-- Material 3 theming

package/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md

@@ -1,90 +0,0 @@
----
-name: monorepo-turborepo
-description: Turborepo monorepo template principles. pnpm workspaces, shared packages.
----
-
-# Turborepo Monorepo Template
-
-## Tech Stack
-
-| Component | Technology |
-|-----------|------------|
-| Build System | Turborepo |
-| Package Manager | pnpm |
-| Apps | Next.js, Express |
-| Packages | Shared UI, Config, Types |
-| Language | TypeScript |
-
----
-
-## Directory Structure
-
-```
-project-name/
-├── apps/
-│   ├── web/             # Next.js app
-│   ├── api/             # Express API
-│   └── docs/            # Documentation
-├── packages/
-│   ├── ui/              # Shared components
-│   ├── config/          # ESLint, TS, Tailwind
-│   ├── types/           # Shared types
-│   └── utils/           # Shared utilities
-├── turbo.json
-├── pnpm-workspace.yaml
-└── package.json
-```
-
----
-
-## Key Concepts
-
-| Concept | Description |
-|---------|-------------|
-| Workspaces | pnpm-workspace.yaml |
-| Pipeline | turbo.json task graph |
-| Caching | Remote/local task caching |
-| Dependencies | `workspace:*` protocol |
-
----
-
-## Turbo Pipeline
-
-| Task | Depends On |
-|------|------------|
-| build | ^build (dependencies first) |
-| dev | cache: false, persistent |
-| lint | ^build |
-| test | ^build |
-
----
-
-## Setup Steps
-
-1. Create root directory
-2. `pnpm init`
-3. Create pnpm-workspace.yaml
-4. Create turbo.json
-5. Add apps and packages
-6. `pnpm install`
-7. `pnpm dev`
-
----
-
-## Common Commands
-
-| Command | Description |
-|---------|-------------|
-| `pnpm dev` | Run all apps |
-| `pnpm build` | Build all |
-| `pnpm --filter @name/web dev` | Run specific app |
-| `pnpm --filter @name/web add axios` | Add dep to app |
-
----
-
-## Best Practices
-
-- Shared configs in packages/config
-- Shared types in packages/types
-- Internal packages with `workspace:*`
-- Use Turbo remote caching for CI

package/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md

@@ -1,122 +0,0 @@
----
-name: nextjs-fullstack
-description: Next.js full-stack template principles. App Router, Prisma, Tailwind v4.
----
-
-# Next.js Full-Stack Template (2026 Edition)
-
-## Tech Stack
-
-| Component | Technology | Version / Notes |
-|-----------|------------|-----------------|
-| Framework | Next.js | v16+ (App Router, Turbopack) |
-| Language | TypeScript | v5+ (Strict Mode) |
-| Database | PostgreSQL | Prisma ORM (Serverless friendly) |
-| Styling | Tailwind CSS | v4.0 (Zero-config, CSS-first) |
-| Auth | Clerk / Better Auth | Middleware Protected Routes |
-| UI Logic | React 19 | Server Actions, useActionState |
-| Validation | Zod | Schema validation (API & Forms) |
-
----
-
-## Directory Structure
-
-```
-project-name/
-├── prisma/
-│   └── schema.prisma       # Database schema
-├── src/
-│   ├── app/
-│   │   ├── (auth)/         # Route groups for Login/Register
-│   │   ├── (dashboard)/    # Protected routes
-│   │   ├── api/            # Route Handlers (only for Webhooks/External integration)
-│   │   ├── layout.tsx      # Root Layout (Metadata, Providers)
-│   │   ├── page.tsx        # Landing Page
-│   │   └── globals.css     # Tailwind v4 config (@theme) lives here
-│   ├── components/
-│   │   ├── ui/             # Reusable UI (Button, Input)
-│   │   └── forms/          # Client forms using useActionState
-│   ├── lib/
-│   │   ├── db.ts           # Prisma singleton client
-│   │   ├── utils.ts        # Helper functions
-│   │   └── dal.ts          # Data Access Layer (Server-only)
-│   ├── actions/            # Server Actions (Mutations)
-│   └── types/              # Global TS Types
-├── public/
-├── next.config.ts          # TypeScript Config
-└── package.json
-```
-
----
-
-## Key Concepts (Updated)
-
-| Concept | Description |
-|---------|-------------|
-| Server Components | Render on server (default). Direct DB access (Prisma) without APIs. |
-| Server Actions | Handle Form mutations. Replaces traditional API Routes. Use in action={}. |
-| React 19 Hooks | Form state management: useActionState, useFormStatus, useOptimistic. |
-| Data Access Layer | Data security. Separation of DB logic (DTOs) for safe reuse. |
-| Tailwind v4 | Styling engine. No tailwind.config.js. Config directly in CSS. |
-
----
-
-## Environment Variables
-
-| Variable | Purpose |
-|----------|---------|
-| DATABASE_URL | PostgreSQL connection string (Prisma) |
-| NEXT_PUBLIC_APP_URL | Public application URL |
-| NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY | Auth (if using Clerk) |
-| CLERK_SECRET_KEY | Auth Secret (Server only) |
-
----
-
-## Setup Steps
-
-1. Initialize Project:
-   ```bash
-   npx create-next-app@latest my-app --typescript --tailwind --eslint
-   # Select Yes for App Router
-   # Select No for src directory (optional, this template uses src)
-   ```
-
-2. Install DB & Validation:
-   ```bash
-   npm install prisma @prisma/client zod
-   npm install -D ts-node # For running seed scripts
-   ```
-
-3. Configure Tailwind v4 (If missing):
-   Ensure `src/app/globals.css` uses the new import syntax instead of a config file:
-   ```css
-   @import "tailwindcss";
-
-   @theme {
-     --color-primary: oklch(0.5 0.2 240);
-     --font-sans: "Inter", sans-serif;
-   }
-   ```
-
-4. Initialize Database:
-   ```bash
-   npx prisma init
-   # Update schema.prisma
-   npm run db:push
-   ```
-
-5. Run Developer Server:
-   ```bash
-   npm run dev --turbo
-   # --turbo to enable faster Turbopack
-   ```
-
----
-
-## Best Practices (2026 Standards)
-
-- **Fetch Data**: Call Prisma directly in Server Components (async/await). Do not use useEffect for initial data fetching.
-- **Mutations**: Use Server Actions combined with React 19's `useActionState` to handle loading and error states instead of manual useState.
-- **Type Safety**: Share Zod schemas between Server Actions (input validation) and Client Forms.
-- **Security**: Always validate input data with Zod before passing it to Prisma.
-- **Styling**: Use native CSS variables in Tailwind v4 for easier dynamic theming.

package/skills/app-builder/templates/nextjs-saas/TEMPLATE.md

@@ -1,122 +0,0 @@
----
-name: nextjs-saas
-description: Next.js SaaS template principles (2026 Standards). React 19, Server Actions, Auth.js v6.
----
-
-# Next.js SaaS Template (Updated 2026)
-
-## Tech Stack
-
-| Component | Technology | Version / Notes |
-|-----------|------------|-----------------|
-| Framework | Next.js | v16+ (App Router, React Compiler) |
-| Runtime | Node.js | v24 (Krypton LTS) |
-| Auth | Auth.js | v6 (formerly NextAuth) |
-| Payments | Stripe API | Latest |
-| Database | PostgreSQL | Prisma v6 (Serverless Driver) |
-| Email | Resend | React Email |
-| UI | Tailwind CSS | v4 (Oxide Engine, no config file) |
-
----
-
-## Directory Structure
-
-```
-project-name/
-├── prisma/
-│   └── schema.prisma    # Database Schema
-├── src/
-│   ├── actions/         # NEW: Server Actions (Replaces API Routes for data mutation)
-│   │   ├── auth-actions.ts
-│   │   ├── billing-actions.ts
-│   │   └── user-actions.ts
-│   ├── app/
-│   │   ├── (auth)/      # Route Group: Login, register
-│   │   ├── (dashboard)/ # Route Group: Protected routes (App Layout)
-│   │   ├── (marketing)/ # Route Group: Landing, pricing (Marketing Layout)
-│   │   └── api/         # Only used for Webhooks or Edge cases
-│   │       └── webhooks/stripe/
-│   ├── components/
-│   │   ├── emails/      # React Email templates
-│   │   ├── forms/       # Client components using useActionState (React 19)
-│   │   └── ui/          # Shadcn UI
-│   ├── lib/
-│   │   ├── auth.ts      # Auth.js v6 config
-│   │   ├── db.ts        # Prisma Singleton
-│   │   └── stripe.ts    # Stripe Singleton
-│   └── styles/
-│       └── globals.css  # Tailwind v4 imports (CSS only)
-└── package.json
-```
-
----
-
-## SaaS Features
-
-| Feature | Implementation |
-|---------|---------------|
-| Auth | Auth.js v6 + Passkeys + OAuth |
-| Data Mutation | Server Actions (No API routes) |
-| Subscriptions | Stripe Checkout & Customer Portal |
-| Webhooks | Asynchronous Stripe event handling |
-| Email | Transactional via Resend |
-| Validation | Zod (Server-side validation) |
-
----
-
-## Database Schema
-
-| Model | Fields (Key fields) |
-|-------|---------------------|
-| User | id, email, stripeCustomerId, subscriptionId, plan |
-| Account | OAuth provider data (Google, GitHub...) |
-| Session | User sessions (Database strategy) |
-
----
-
-## Environment Variables
-
-| Variable | Purpose |
-|----------|---------|
-| DATABASE_URL | Prisma connection string (Postgres) |
-| AUTH_SECRET | Replaces NEXTAUTH_SECRET (Auth.js v6) |
-| STRIPE_SECRET_KEY | Payments (Server-side) |
-| STRIPE_WEBHOOK_SECRET | Webhook verification |
-| RESEND_API_KEY | Email sending |
-| NEXT_PUBLIC_APP_URL | Application Canonical URL |
-
----
-
-## Setup Steps
-
-1. Initialize project (Node 24):
-   ```bash
-   npx create-next-app@latest {{name}} --typescript --eslint
-   ```
-
-2. Install core libraries:
-   ```bash
-   npm install next-auth@beta stripe resend @prisma/client
-   ```
-
-3. Install Tailwind v4 (Add to globals.css):
-   ```css
-   @import "tailwindcss";
-   ```
-
-4. Configure environment (.env.local)
-
-5. Sync Database:
-   ```bash
-   npx prisma db push
-   ```
-
-6. Run local Webhook:
-   ```bash
-   npm run stripe:listen
-   ```
-
-7. Run project:
-   ```bash
-   npm run dev
-   ```

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

@@ -1,169 +0,0 @@
----
-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:`.