autoworkflow 3.1.4 → 3.5.0

package/.claude/skills/nextjs-app-router.md

@@ -0,0 +1,260 @@
+# Next.js App Router Skill
+
+## File Conventions
+\`\`\`
+app/
+├── layout.tsx             # Root layout (required)
+├── page.tsx               # Home page (/)
+├── loading.tsx            # Loading UI (Suspense boundary)
+├── error.tsx              # Error boundary
+├── not-found.tsx          # 404 page
+├── global-error.tsx       # Root error boundary
+├── (auth)/                # Route group (doesn't affect URL)
+│   ├── login/page.tsx     # /login
+│   └── register/page.tsx  # /register
+├── dashboard/
+│   ├── layout.tsx         # Dashboard layout
+│   ├── @modal/(.)edit/page.tsx  # Parallel route + intercepting
+│   └── [id]/page.tsx      # /dashboard/123
+└── api/
+    └── users/route.ts     # API route handler
+\`\`\`
+
+## Server vs Client Components
+\`\`\`tsx
+// ✅ SERVER COMPONENT (default)
+// Can: fetch data, access backend, use async/await
+// Cannot: useState, useEffect, onClick
+export default async function ProductPage({ params }) {
+  const product = await db.product.findUnique({ where: { id: params.id } });
+  return <ProductDetails product={product} />;
+}
+
+// ✅ CLIENT COMPONENT - add 'use client'
+'use client';
+export function AddToCartButton({ productId }) {
+  const [loading, setLoading] = useState(false);
+  return <button onClick={() => addToCart(productId)}>Add</button>;
+}
+\`\`\`
+
+## Metadata & SEO
+\`\`\`tsx
+// Static metadata
+export const metadata: Metadata = {
+  title: 'My App',
+  description: 'App description',
+  openGraph: {
+    title: 'My App',
+    description: 'App description',
+    images: ['/og-image.png'],
+  },
+};
+
+// Dynamic metadata
+export async function generateMetadata({ params }): Promise<Metadata> {
+  const product = await getProduct(params.id);
+  return {
+    title: product.name,
+    description: product.description,
+    openGraph: {
+      images: [product.image],
+    },
+  };
+}
+
+// JSON-LD structured data
+export default function ProductPage({ product }) {
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    description: product.description,
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <ProductDetails product={product} />
+    </>
+  );
+}
+\`\`\`
+
+## Middleware
+\`\`\`typescript
+// middleware.ts (root of project)
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  // Auth check
+  const token = request.cookies.get('token');
+  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
+    return NextResponse.redirect(new URL('/login', request.url));
+  }
+
+  // Add headers
+  const response = NextResponse.next();
+  response.headers.set('x-request-id', crypto.randomUUID());
+
+  return response;
+}
+
+export const config = {
+  matcher: ['/dashboard/:path*', '/api/:path*'],
+};
+\`\`\`
+
+## Caching & Revalidation
+\`\`\`tsx
+// Time-based revalidation
+async function getProducts() {
+  const res = await fetch('https://api.example.com/products', {
+    next: { revalidate: 3600 } // Revalidate every hour
+  });
+  return res.json();
+}
+
+// On-demand revalidation
+import { revalidatePath, revalidateTag } from 'next/cache';
+
+// In Server Action
+'use server';
+export async function updateProduct(id: string, data: FormData) {
+  await db.product.update({ where: { id }, data });
+  revalidatePath('/products');        // Revalidate specific path
+  revalidateTag('products');           // Revalidate by tag
+}
+
+// Tag your fetches
+fetch('https://api.example.com/products', {
+  next: { tags: ['products'] }
+});
+\`\`\`
+
+## Streaming with Suspense
+\`\`\`tsx
+import { Suspense } from 'react';
+
+export default function Dashboard() {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+
+      {/* Show skeleton while loading */}
+      <Suspense fallback={<StatsSkeleton />}>
+        <Stats />
+      </Suspense>
+
+      <Suspense fallback={<ChartSkeleton />}>
+        <RevenueChart />
+      </Suspense>
+    </div>
+  );
+}
+
+// Each component can be async and stream independently
+async function Stats() {
+  const stats = await getStats(); // Slow query
+  return <StatsDisplay stats={stats} />;
+}
+\`\`\`
+
+## Error Handling
+\`\`\`tsx
+// error.tsx - catches errors in this segment
+'use client';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    logError(error); // Send to error tracking
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  );
+}
+
+// not-found.tsx - custom 404
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Page Not Found</h2>
+      <Link href="/">Go home</Link>
+    </div>
+  );
+}
+
+// Trigger not-found programmatically
+import { notFound } from 'next/navigation';
+
+async function getUser(id: string) {
+  const user = await db.user.findUnique({ where: { id } });
+  if (!user) notFound();
+  return user;
+}
+\`\`\`
+
+## Server Actions
+\`\`\`tsx
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+
+export async function createUser(formData: FormData) {
+  const data = {
+    name: formData.get('name') as string,
+    email: formData.get('email') as string,
+  };
+
+  // Validate
+  const result = userSchema.safeParse(data);
+  if (!result.success) {
+    return { error: result.error.flatten() };
+  }
+
+  // Create
+  await prisma.user.create({ data: result.data });
+
+  // Revalidate and redirect
+  revalidatePath('/users');
+  redirect('/users');
+}
+
+// Usage in form
+<form action={createUser}>
+  <input name="name" required />
+  <input name="email" type="email" required />
+  <button type="submit">Create</button>
+</form>
+\`\`\`
+
+## ❌ DON'T
+- Use 'use client' unless you need interactivity
+- Use getServerSideProps (that's Pages Router)
+- Put sensitive logic in client components
+- Forget to handle loading/error states
+- Over-fetch in Server Components (no deduplication)
+
+## ✅ DO
+- Default to Server Components
+- Keep client components small and at leaf nodes
+- Use Server Actions for form submissions
+- Add metadata for SEO
+- Use Suspense for streaming
+- Implement proper error boundaries
+- Use revalidation strategies appropriately

package/.claude/skills/nextjs-pages.md

@@ -0,0 +1,172 @@
+# Next.js Pages Router Skill
+
+## Data Fetching
+\`\`\`tsx
+// getStaticProps - Build time (ISR with revalidate)
+export async function getStaticProps() {
+  const posts = await getPosts();
+  return {
+    props: { posts },
+    revalidate: 60, // Regenerate every 60 seconds
+    notFound: false, // Return 404 if true
+  };
+}
+
+// getServerSideProps - Request time (SSR)
+export async function getServerSideProps(context) {
+  const { params, req, res, query } = context;
+
+  // Access cookies/headers
+  const token = req.cookies.token;
+  if (!token) {
+    return { redirect: { destination: '/login', permanent: false } };
+  }
+
+  const user = await getUser(params.id);
+  if (!user) {
+    return { notFound: true };
+  }
+
+  return { props: { user } };
+}
+
+// getStaticPaths - Dynamic static pages
+export async function getStaticPaths() {
+  const posts = await getAllPosts();
+  return {
+    paths: posts.map(p => ({ params: { id: p.id } })),
+    fallback: 'blocking' // 'false' | 'blocking' | true
+  };
+}
+\`\`\`
+
+## Custom _app.tsx
+\`\`\`tsx
+// pages/_app.tsx
+import type { AppProps } from 'next/app';
+import { SessionProvider } from 'next-auth/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
+
+export default function App({ Component, pageProps }: AppProps) {
+  // Use per-page layouts
+  const getLayout = Component.getLayout ?? ((page) => page);
+
+  return (
+    <SessionProvider session={pageProps.session}>
+      <QueryClientProvider client={queryClient}>
+        {getLayout(<Component {...pageProps} />)}
+      </QueryClientProvider>
+    </SessionProvider>
+  );
+}
+\`\`\`
+
+## Custom _document.tsx
+\`\`\`tsx
+// pages/_document.tsx
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="theme-color" content="#000000" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
+\`\`\`
+
+## API Routes with Middleware
+\`\`\`typescript
+// pages/api/users.ts
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+// Middleware wrapper
+function withAuth(handler: Function) {
+  return async (req: NextApiRequest, res: NextApiResponse) => {
+    const token = req.headers.authorization?.split(' ')[1];
+    if (!token) {
+      return res.status(401).json({ error: 'Unauthorized' });
+    }
+
+    try {
+      req.user = verifyToken(token);
+      return handler(req, res);
+    } catch {
+      return res.status(401).json({ error: 'Invalid token' });
+    }
+  };
+}
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  switch (req.method) {
+    case 'GET':
+      const users = await prisma.user.findMany();
+      return res.status(200).json(users);
+    case 'POST':
+      const user = await prisma.user.create({ data: req.body });
+      return res.status(201).json(user);
+    default:
+      res.setHeader('Allow', ['GET', 'POST']);
+      return res.status(405).end();
+  }
+}
+
+export default withAuth(handler);
+\`\`\`
+
+## Middleware (Edge)
+\`\`\`typescript
+// middleware.ts (root level)
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const token = request.cookies.get('token');
+
+  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
+    return NextResponse.redirect(new URL('/login', request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/dashboard/:path*', '/api/protected/:path*'],
+};
+\`\`\`
+
+## Per-Page Layouts
+\`\`\`tsx
+// pages/dashboard/index.tsx
+import DashboardLayout from '@/layouts/DashboardLayout';
+
+export default function DashboardPage() {
+  return <div>Dashboard Content</div>;
+}
+
+DashboardPage.getLayout = function getLayout(page: ReactElement) {
+  return <DashboardLayout>{page}</DashboardLayout>;
+};
+\`\`\`
+
+## ❌ DON'T
+- Use getInitialProps (legacy, blocks optimization)
+- Fetch data in useEffect when SSR/SSG works
+- Put secrets in client-side code
+- Forget fallback handling in getStaticPaths
+
+## ✅ DO
+- Use getStaticProps with revalidate for cacheable data
+- Use getServerSideProps only when needed (auth, real-time)
+- Handle loading/error states for fallback pages
+- Use middleware for auth/redirects
+- Implement per-page layouts for complex UIs

package/.claude/skills/nuxt.md

@@ -0,0 +1,202 @@
+# Nuxt 3 Skill
+
+## Directory Structure
+\`\`\`
+app.vue              # Root component
+nuxt.config.ts       # Configuration
+pages/               # File-based routing
+  index.vue          # /
+  users/
+    index.vue        # /users
+    [id].vue         # /users/:id
+components/          # Auto-imported
+composables/         # Auto-imported (useX)
+server/
+  api/               # API routes
+  middleware/        # Server middleware
+middleware/          # Route middleware
+plugins/             # App plugins
+layouts/             # Layouts
+\`\`\`
+
+## Data Fetching
+\`\`\`vue
+<script setup>
+// useFetch - SSR + client hydration, auto-deduplication
+const { data: users, pending, error, refresh } = await useFetch('/api/users');
+
+// useAsyncData - for custom async functions
+const { data: user } = await useAsyncData('user', () => {
+  return $fetch(\`/api/users/\${route.params.id}\`);
+});
+
+// useLazyFetch - doesn't block navigation
+const { data: stats, pending } = useLazyFetch('/api/stats');
+
+// With options
+const { data } = await useFetch('/api/users', {
+  query: { page: 1, limit: 10 },
+  headers: { Authorization: \`Bearer \${token}\` },
+  transform: (data) => data.users, // Transform response
+  pick: ['id', 'name'], // Only pick these fields
+  watch: [page], // Refetch when page changes
+});
+\`\`\`
+
+## Server API Routes
+\`\`\`typescript
+// server/api/users.get.ts
+export default defineEventHandler(async (event) => {
+  return await prisma.user.findMany();
+});
+
+// server/api/users.post.ts
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event);
+
+  // Validation
+  if (!body.email) {
+    throw createError({ statusCode: 400, message: 'Email required' });
+  }
+
+  return await prisma.user.create({ data: body });
+});
+
+// server/api/users/[id].get.ts
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id');
+  const user = await prisma.user.findUnique({ where: { id } });
+
+  if (!user) {
+    throw createError({ statusCode: 404, message: 'User not found' });
+  }
+
+  return user;
+});
+\`\`\`
+
+## Middleware
+\`\`\`typescript
+// middleware/auth.ts
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { user } = useAuth();
+
+  if (!user.value && to.path !== '/login') {
+    return navigateTo('/login');
+  }
+});
+
+// Apply to page
+<script setup>
+definePageMeta({
+  middleware: 'auth',
+  // Or inline:
+  // middleware: [(to, from) => { ... }]
+});
+</script>
+
+// Global middleware
+// middleware/auth.global.ts
+export default defineNuxtRouteMiddleware((to) => {
+  // Runs on every navigation
+});
+\`\`\`
+
+## Plugins
+\`\`\`typescript
+// plugins/api.ts
+export default defineNuxtPlugin((nuxtApp) => {
+  const api = $fetch.create({
+    baseURL: '/api',
+    onRequest({ options }) {
+      const token = useCookie('token');
+      if (token.value) {
+        options.headers = { Authorization: \`Bearer \${token.value}\` };
+      }
+    },
+  });
+
+  return {
+    provide: { api }
+  };
+});
+
+// Usage in components
+const { $api } = useNuxtApp();
+const users = await $api('/users');
+\`\`\`
+
+## State Management
+\`\`\`typescript
+// composables/useAuth.ts
+export const useAuth = () => {
+  const user = useState<User | null>('user', () => null);
+
+  const login = async (email: string, password: string) => {
+    user.value = await $fetch('/api/auth/login', {
+      method: 'POST',
+      body: { email, password }
+    });
+  };
+
+  const logout = () => {
+    user.value = null;
+    navigateTo('/login');
+  };
+
+  return { user, login, logout };
+};
+\`\`\`
+
+## Runtime Config
+\`\`\`typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  runtimeConfig: {
+    // Server-only (not exposed to client)
+    apiSecret: process.env.API_SECRET,
+
+    // Public (exposed to client)
+    public: {
+      apiBase: process.env.API_BASE || '/api'
+    }
+  }
+});
+
+// Usage
+const config = useRuntimeConfig();
+// Server: config.apiSecret
+// Client: config.public.apiBase
+\`\`\`
+
+## Error Handling
+\`\`\`vue
+<!-- error.vue (root level) -->
+<script setup>
+const props = defineProps<{ error: { statusCode: number; message: string } }>();
+
+const handleError = () => clearError({ redirect: '/' });
+</script>
+
+<template>
+  <div>
+    <h1>{{ error.statusCode }}</h1>
+    <p>{{ error.message }}</p>
+    <button @click="handleError">Go Home</button>
+  </div>
+</template>
+\`\`\`
+
+## ❌ DON'T
+- Use useFetch in non-setup contexts
+- Forget to handle pending/error states
+- Put secrets in runtimeConfig.public
+- Use $fetch without useFetch for SSR data
+
+## ✅ DO
+- Use useFetch for SSR data fetching
+- Use useState for shared state
+- Use auto-imports (no manual imports needed)
+- Use middleware for auth/guards
+- Use runtimeConfig for environment variables
+- Handle errors with createError