@musashishao/agent-kit 1.8.1 → 1.9.0

package/.agent/skills/supabase-integration/SKILL.md

@@ -0,0 +1,411 @@
+---
+name: supabase-integration
+description: "Expert integration of Supabase with Next.js App Router. Covers Auth, Database (Postgres), Storage, Edge Functions, and Row Level Security (RLS)."
+version: "1.0.0"
+source: "antigravity-awesome-skills (adapted)"
+---
+
+# ⚡ Supabase Integration
+
+You are an expert in Supabase - the open-source Firebase alternative built on Postgres. You understand the server/client boundary in Next.js, Row Level Security for data protection, and the power of Postgres.
+
+**Key insight**: Supabase is Postgres with superpowers. Unlike Firebase, you have full SQL power, proper relations, and RLS for fine-grained access control.
+
+---
+
+## When to Use This Skill
+
+- Next.js apps needing auth + database
+- Apps requiring proper relational data
+- Real-time subscriptions
+- File storage with CDN
+- Edge Functions for serverless logic
+
+---
+
+## Capabilities
+
+- `supabase-auth`
+- `supabase-database`
+- `supabase-storage`
+- `supabase-edge-functions`
+- `supabase-realtime`
+- `row-level-security`
+- `postgres-rpc`
+
+---
+
+## 1. Client Setup for Next.js
+
+```typescript
+// lib/supabase/client.ts
+import { createBrowserClient } from '@supabase/ssr'
+
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+}
+
+// lib/supabase/server.ts
+import { createServerClient, type CookieOptions } from '@supabase/ssr'
+import { cookies } from 'next/headers'
+
+export async function createServerSupabaseClient() {
+  const cookieStore = await cookies()
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll()
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value, options }) => {
+            cookieStore.set(name, value, options)
+          })
+        },
+      },
+    }
+  )
+}
+```
+
+---
+
+## 2. Auth Middleware
+
+```typescript
+// middleware.ts
+import { createServerClient, type CookieOptions } from '@supabase/ssr'
+import { NextResponse, type NextRequest } from 'next/server'
+
+export async function middleware(request: NextRequest) {
+  let response = NextResponse.next({
+    request: {
+      headers: request.headers,
+    },
+  })
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll()
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value, options }) => {
+            request.cookies.set(name, value)
+            response.cookies.set(name, value, options)
+          })
+        },
+      },
+    }
+  )
+
+  // Refresh session
+  const { data: { user } } = await supabase.auth.getUser()
+
+  // Protect routes
+  const protectedRoutes = ['/dashboard', '/settings', '/api/protected']
+  const isProtected = protectedRoutes.some(route => 
+    request.nextUrl.pathname.startsWith(route)
+  )
+
+  if (isProtected && !user) {
+    return NextResponse.redirect(new URL('/login', request.url))
+  }
+
+  return response
+}
+
+export const config = {
+  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
+}
+```
+
+---
+
+## 3. Auth Patterns
+
+### Sign Up / Sign In
+
+```typescript
+// app/auth/actions.ts
+'use server'
+
+import { createServerSupabaseClient } from '@/lib/supabase/server'
+import { redirect } from 'next/navigation'
+
+export async function signUp(formData: FormData) {
+  const supabase = await createServerSupabaseClient()
+  
+  const { error } = await supabase.auth.signUp({
+    email: formData.get('email') as string,
+    password: formData.get('password') as string,
+    options: {
+      emailRedirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback`,
+    },
+  })
+  
+  if (error) {
+    return { error: error.message }
+  }
+  
+  return { message: 'Check your email for confirmation link' }
+}
+
+export async function signIn(formData: FormData) {
+  const supabase = await createServerSupabaseClient()
+  
+  const { error } = await supabase.auth.signInWithPassword({
+    email: formData.get('email') as string,
+    password: formData.get('password') as string,
+  })
+  
+  if (error) {
+    return { error: error.message }
+  }
+  
+  redirect('/dashboard')
+}
+
+export async function signOut() {
+  const supabase = await createServerSupabaseClient()
+  await supabase.auth.signOut()
+  redirect('/login')
+}
+```
+
+### OAuth Callback
+
+```typescript
+// app/auth/callback/route.ts
+import { createServerSupabaseClient } from '@/lib/supabase/server'
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url)
+  const code = searchParams.get('code')
+  const next = searchParams.get('next') ?? '/dashboard'
+
+  if (code) {
+    const supabase = await createServerSupabaseClient()
+    const { error } = await supabase.auth.exchangeCodeForSession(code)
+    
+    if (!error) {
+      return NextResponse.redirect(`${origin}${next}`)
+    }
+  }
+
+  return NextResponse.redirect(`${origin}/auth/error`)
+}
+```
+
+---
+
+## 4. Database Patterns
+
+### Server Component Data Fetching
+
+```typescript
+// app/posts/page.tsx
+import { createServerSupabaseClient } from '@/lib/supabase/server'
+
+export default async function PostsPage() {
+  const supabase = await createServerSupabaseClient()
+  
+  const { data: posts, error } = await supabase
+    .from('posts')
+    .select(`
+      id,
+      title,
+      content,
+      created_at,
+      author:users(id, name, avatar_url)
+    `)
+    .order('created_at', { ascending: false })
+    .limit(20)
+  
+  if (error) {
+    throw new Error(error.message)
+  }
+  
+  return (
+    <div>
+      {posts.map(post => (
+        <PostCard key={post.id} post={post} />
+      ))}
+    </div>
+  )
+}
+```
+
+### Real-time Subscriptions (Client)
+
+```typescript
+'use client'
+
+import { createClient } from '@/lib/supabase/client'
+import { useEffect, useState } from 'react'
+
+export function RealtimeMessages({ roomId }: { roomId: string }) {
+  const [messages, setMessages] = useState<Message[]>([])
+  const supabase = createClient()
+
+  useEffect(() => {
+    // Initial fetch
+    const fetchMessages = async () => {
+      const { data } = await supabase
+        .from('messages')
+        .select('*')
+        .eq('room_id', roomId)
+        .order('created_at')
+      
+      setMessages(data ?? [])
+    }
+    
+    fetchMessages()
+
+    // Subscribe to new messages
+    const channel = supabase
+      .channel(`room:${roomId}`)
+      .on(
+        'postgres_changes',
+        {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'messages',
+          filter: `room_id=eq.${roomId}`,
+        },
+        (payload) => {
+          setMessages(prev => [...prev, payload.new as Message])
+        }
+      )
+      .subscribe()
+
+    return () => {
+      supabase.removeChannel(channel)
+    }
+  }, [roomId])
+
+  return (
+    <div>
+      {messages.map(msg => (
+        <MessageItem key={msg.id} message={msg} />
+      ))}
+    </div>
+  )
+}
+```
+
+---
+
+## 5. Row Level Security (RLS)
+
+```sql
+-- Enable RLS
+ALTER TABLE posts ENABLE ROW LEVEL SECURITY;
+
+-- Policy: Anyone can read published posts
+CREATE POLICY "Public posts are viewable by everyone"
+ON posts FOR SELECT
+USING (published = true);
+
+-- Policy: Users can CRUD their own posts
+CREATE POLICY "Users can manage their own posts"
+ON posts FOR ALL
+USING (auth.uid() = author_id)
+WITH CHECK (auth.uid() = author_id);
+
+-- Policy: Admins can do anything
+CREATE POLICY "Admins have full access"
+ON posts FOR ALL
+USING (
+  EXISTS (
+    SELECT 1 FROM user_roles
+    WHERE user_id = auth.uid()
+    AND role = 'admin'
+  )
+);
+
+-- Helper function for current user
+CREATE FUNCTION auth.user_id() RETURNS UUID AS $$
+  SELECT auth.uid()
+$$ LANGUAGE SQL SECURITY DEFINER;
+```
+
+---
+
+## 6. Storage Patterns
+
+```typescript
+// Upload file
+const uploadFile = async (file: File, bucket: string, path: string) => {
+  const supabase = createClient()
+  
+  const { data, error } = await supabase.storage
+    .from(bucket)
+    .upload(path, file, {
+      cacheControl: '3600',
+      upsert: false
+    })
+  
+  if (error) throw error
+  
+  // Get public URL
+  const { data: { publicUrl } } = supabase.storage
+    .from(bucket)
+    .getPublicUrl(path)
+  
+  return publicUrl
+}
+
+// Storage policy (SQL)
+// Allow users to upload to their own folder
+CREATE POLICY "Users can upload to own folder"
+ON storage.objects FOR INSERT
+WITH CHECK (
+  bucket_id = 'avatars' AND
+  (storage.foldername(name))[1] = auth.uid()::text
+);
+```
+
+---
+
+## 7. Anti-Patterns
+
+### ❌ getSession in Server Components
+
+```typescript
+// WRONG: getSession can return stale data
+const { data: { session } } = await supabase.auth.getSession()
+
+// CORRECT: getUser validates with auth server
+const { data: { user } } = await supabase.auth.getUser()
+```
+
+### ❌ No RLS on Tables
+
+```sql
+-- WRONG: No RLS = anyone with anon key can read/write!
+CREATE TABLE secrets (data TEXT);
+
+-- CORRECT: Always enable RLS
+CREATE TABLE secrets (data TEXT);
+ALTER TABLE secrets ENABLE ROW LEVEL SECURITY;
+-- Then add appropriate policies
+```
+
+---
+
+## Related Skills
+
+- `firebase` - Firebase comparison
+- `database-design` - Postgres patterns
+- `nextjs-best-practices` - Next.js integration

package/.agent/workflows/ai-agent.md

@@ -0,0 +1,36 @@
+---
+description: Build AI agent workflow. From system design to autonomous execution loops.
+---
+
+# 🤖 /ai-agent - AI Agent Builder Workflow
+
+This workflow guides you through designing and implementing sophisticated AI agents and multi-agent systems.
+
+## 📋 Steps
+
+### 1. System Design
+- Use `ai-agents-architect` to map the agent roles.
+- Define a state graph using `langgraph`.
+- Select an orchestration style (Sequential, Hierarchical, Swarm).
+
+### 2. Implementation
+- Build agent loops with `autonomous-agent-patterns`.
+- Implement tool-calling using `agent-tool-builder` or `mcp-builder`.
+- Setup context management with `agent-memory-systems`.
+
+### 3. RAG & Knowledge
+- Connect depth knowledge with `llm-app-patterns` (RAG).
+- Ensure high-quality retrieval using semantic search patterns.
+
+### 4. Evaluation & Monitoring
+- Build tests with `agent-evaluation`.
+- Trace every action through `langfuse`.
+- Optimize costs with `ai-wrapper-product` patterns.
+
+## 🤖 Agents
+- `@ai-architect`: Lead for system design and graphs.
+- `@orchestrator`: For multi-agent coordination.
+- `@backend-specialist`: For tool and API integration.
+
+## 🛠️ Usage
+Run this command when building specialized AI features or autonomous agents.

package/.agent/workflows/autofix.md

@@ -1,5 +1,6 @@
 ---
 description: Autonomous self-healing loop for failed commands.
+description_vi: Vòng lặp tự phục hồi tự động cho các lệnh bị lỗi.
 ---
 
 # /autofix - Autonomous Self-Healing Loop

package/.agent/workflows/brainstorm.md

@@ -1,5 +1,6 @@
 ---
 description: Structured brainstorming for projects and features. Explore multiple options before implementation.
+description_vi: Brainstorming có cấu trúc cho dự án và tính năng. Khám phá nhiều phương án trước khi triển khai.
 ---
 
 # /brainstorm - Structured Idea Exploration

package/.agent/workflows/context.md

@@ -1,5 +1,6 @@
 ---
 description: Automatically generate optimal context for complex tasks using Context Engineering strategies.
+description_vi: Tự động tạo ngữ cảnh tối ưu cho các tác vụ phức tạp bằng chiến lược Context Engineering.
 ---
 
 # Context Optimization Workflow

package/.agent/workflows/create.md

@@ -1,5 +1,6 @@
 ---
 description: Command to create a new application. Activates the App Builder skill and initiates user dialogue.
+description_vi: Tạo ứng dụng mới với kiến trúc AI-Ready. Kích hoạt kỹ năng App Builder và bắt đầu đối thoại với người dùng.
 ---
 
 # /create - Create Application

package/.agent/workflows/dashboard.md

@@ -1,5 +1,6 @@
 ---
 description: Create and view visual project dashboards.
+description_vi: Tạo và xem bảng điều khiển (dashboard) trực quan cho dự án.
 ---
 
 # /dashboard - Visual Project Overview

package/.agent/workflows/debug.md

@@ -1,5 +1,6 @@
 ---
 description: Debug command. Activates DEBUG mode to systematically investigate issues.
+description_vi: Lệnh gỡ lỗi. Kích hoạt chế độ DEBUG để điều tra các vấn đề một cách hệ thống.
 ---
 
 # /debug - Systematic Problem Investigation

package/.agent/workflows/deploy.md

@@ -1,5 +1,6 @@
 ---
 description: Production deployment command. Performs pre-flight checks and executes deployment.
+description_vi: Lệnh triển khai sản phẩm. Thực hiện kiểm tra trước khi bay và thực thi triển khai.
 ---
 
 # /deploy - Production Deployment

package/.agent/workflows/enhance.md

@@ -1,5 +1,6 @@
 ---
 description: Add or update features in an existing application. Used for iterative development.
+description_vi: Thêm hoặc cập nhật tính năng trong ứng dụng hiện có. Được sử dụng cho phát triển lặp.
 ---
 
 # /enhance - Update Application

package/.agent/workflows/game-prototype.md

@@ -0,0 +1,154 @@
+---
+description: Rapid game prototyping workflow. Creates playable game skeleton in minutes.
+---
+
+# Game Prototype Workflow
+
+Rapidly prototype a game idea from concept to playable skeleton.
+
+---
+
+## Prerequisites
+
+- Define core gameplay loop (30-second experience)
+- Choose target platform (Web/PC/Mobile)
+- Identify minimum viable mechanics
+
+---
+
+## Phase 1: Concept Validation (5 min)
+
+### Step 1.1: Define Core Loop
+
+Ask yourself:
+- What does the player DO? (verb)
+- What is the GOAL?
+- What creates CHALLENGE?
+
+```markdown
+Example: "Player JUMPS between platforms to REACH the end while AVOIDING enemies"
+```
+
+### Step 1.2: Choose Tech Stack
+
+| Platform | Framework | Why |
+|----------|-----------|-----|
+| Web 2D | Phaser 4 | Fast setup, browser |
+| Web 3D | Three.js | Lightweight |
+| PC/Mobile 2D | Godot | Free, fast iteration |
+| PC/Mobile 3D | Unity | Ecosystem |
+
+---
+
+## Phase 2: Project Setup (5 min)
+
+### For Web (Phaser)
+
+// turbo
+```bash
+npm create vite@latest my-game -- --template vanilla-ts
+cd my-game
+npm install phaser
+npm run dev
+```
+
+### For Godot
+
+// turbo
+```bash
+# Create new Godot project via editor or:
+mkdir my-game && cd my-game
+touch project.godot
+# Open in Godot
+```
+
+### For Unity
+
+```bash
+# Use Unity Hub to create new 2D/3D project
+# Or CLI:
+unity -createProject my-game
+```
+
+---
+
+## Phase 3: Core Mechanics (30 min)
+
+### Step 3.1: Player Controller
+
+Implement basic movement:
+- Input handling
+- Physics/collision
+- Basic state (idle, move, jump)
+
+### Step 3.2: One Enemy/Obstacle
+
+- Simple AI or static hazard
+- Collision with player
+- Game over on hit
+
+### Step 3.3: One Goal
+
+- Collectible or finish line
+- Win condition
+- Score increment
+
+---
+
+## Phase 4: Juice Pass (15 min)
+
+Add feedback:
+- [ ] Screen shake on hit
+- [ ] Particle effects
+- [ ] Sound effects (can be placeholder)
+- [ ] Simple animations
+
+---
+
+## Phase 5: Playtest Loop
+
+```
+PLAY → NOTE ISSUES → FIX → REPEAT
+
+Focus on:
+- Is it FUN?
+- Is the CHALLENGE right?
+- Does the FEEL good?
+```
+
+---
+
+## Output Checklist
+
+- [ ] Playable prototype
+- [ ] Core loop working
+- [ ] One enemy/obstacle
+- [ ] One goal/win condition
+- [ ] Basic feedback (juice)
+- [ ] Playtested once
+
+---
+
+## Next Steps
+
+After prototype is fun:
+1. Add more content (levels, enemies)
+2. Polish graphics
+3. Add sound design
+4. Implement save/load
+5. Prepare for release
+
+---
+
+## Agent Invocations
+
+| Task | Agent |
+|------|-------|
+| Core mechanics code | `game-developer` |
+| Visual style | `game-asset-curator` |
+| Dialogue/story | `game-narrative-designer` |
+| QA testing | `game-qa-agent` |
+
+---
+
+> **Remember:** A fun prototype with placeholder art beats a polished prototype that isn't fun.

package/.agent/workflows/marketing.md

@@ -0,0 +1,37 @@
+---
+description: Growth marketing and campaign planning workflow. Sets up analytics, crafts copy, and plans the launch.
+---
+
+# 🚀 /marketing - Campaign Planning Workflow
+
+This workflow guides you through the process of planning and executing a high-impact marketing campaign for your product.
+
+## 📋 Steps
+
+### 1. Analysis & Tracking
+- Use `analytics-tracking` to define what metrics matter.
+- Set up a tracking plan for the campaign.
+- Use `ab-test-setup` to identify elements to test.
+
+### 2. Messaging & Copy
+- Use `copywriting` to craft your value proposition.
+- Generate headlines, ad copy, and landing page content.
+- Use `email-sequence` to design the nurture flow.
+
+### 3. Distribution Strategy
+- Use `marketing-ideas` to find unconventional growth channels.
+- Plan your `paid-ads` strategy and budget.
+- Optimize mobile presence with `app-store-optimization`.
+
+### 4. Launch Execution
+- Use `launch-strategy` to coordinate the Big Day.
+- Create a checklist for Product Hunt, Twitter, and other platforms.
+- Set up "Build in Public" hooks.
+
+## 🤖 Agents
+- `@marketing-specialist`: Lead agent for this workflow.
+- `@frontend-specialist`: For landing page implementation.
+- `@documentation-writer`: For press releases and newsletters.
+
+## 🛠️ Usage
+Run this command to start a marketing audit or plan a new launch.

package/.agent/workflows/next.md

@@ -1,5 +1,6 @@
 ---
 description: Suggest the next steps for the developer.
+description_vi: Gợi ý các bước tiếp theo cho nhà phát triển.
 ---
 
 # /next - What Should I Do Next?