aigroup-workflow 2.1.1 → 2.2.0

package/skills/frontend/flutter-expert/references/widget-patterns.md

@@ -0,0 +1,123 @@
+# Widget Patterns
+
+## Optimized Widget Pattern
+
+```dart
+// Use const constructors
+class OptimizedCard extends StatelessWidget {
+  final String title;
+  final VoidCallback onTap;
+
+  const OptimizedCard({
+    super.key,
+    required this.title,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Text(title, style: Theme.of(context).textTheme.titleMedium),
+        ),
+      ),
+    );
+  }
+}
+```
+
+## Responsive Layout
+
+```dart
+class ResponsiveLayout extends StatelessWidget {
+  final Widget mobile;
+  final Widget? tablet;
+  final Widget desktop;
+
+  const ResponsiveLayout({
+    super.key,
+    required this.mobile,
+    this.tablet,
+    required this.desktop,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        if (constraints.maxWidth >= 1100) return desktop;
+        if (constraints.maxWidth >= 650) return tablet ?? mobile;
+        return mobile;
+      },
+    );
+  }
+}
+```
+
+## Custom Hooks (flutter_hooks)
+
+```dart
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+class CounterWidget extends HookWidget {
+  @override
+  Widget build(BuildContext context) {
+    final counter = useState(0);
+    final controller = useTextEditingController();
+
+    useEffect(() {
+      // Setup
+      return () {
+        // Cleanup
+      };
+    }, []);
+
+    return Column(
+      children: [
+        Text('Count: ${counter.value}'),
+        ElevatedButton(
+          onPressed: () => counter.value++,
+          child: const Text('Increment'),
+        ),
+      ],
+    );
+  }
+}
+```
+
+## Sliver Patterns
+
+```dart
+CustomScrollView(
+  slivers: [
+    SliverAppBar(
+      expandedHeight: 200,
+      pinned: true,
+      flexibleSpace: FlexibleSpaceBar(
+        title: const Text('Title'),
+        background: Image.network(imageUrl, fit: BoxFit.cover),
+      ),
+    ),
+    SliverList(
+      delegate: SliverChildBuilderDelegate(
+        (context, index) => ListTile(title: Text('Item $index')),
+        childCount: 100,
+      ),
+    ),
+  ],
+)
+```
+
+## Key Optimization Patterns
+
+| Pattern | Implementation |
+|---------|----------------|
+| **const widgets** | Add `const` to static widgets |
+| **keys** | Use `Key` for list items |
+| **select** | `ref.watch(provider.select(...))` |
+| **RepaintBoundary** | Isolate expensive repaints |
+| **ListView.builder** | Lazy loading for lists |
+| **const constructors** | Always use when possible |

package/skills/frontend/nextjs-developer/SKILL.md

@@ -0,0 +1,143 @@
+---
+name: nextjs-developer
+description: "Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke to configure route handlers, implement middleware, set up API routes, add streaming SSR, write generateMetadata for SEO, scaffold loading.tsx/error.tsx boundaries, or deploy to Vercel. Triggers on: Next.js, Next.js 14, App Router, RSC, use server, Server Components, Server Actions, React Server Components, generateMetadata, loading.tsx, Next.js deployment, Vercel, Next.js performance."
+license: MIT
+metadata:
+  author: https://github.com/Jeffallan
+  version: "1.1.0"
+  domain: frontend
+  triggers: Next.js, Next.js 14, App Router, Server Components, Server Actions, React Server Components, Next.js deployment, Vercel, Next.js performance
+  role: specialist
+  scope: implementation
+  output-format: code
+  related-skills: typescript-pro
+---
+
+# Next.js Developer
+
+Senior Next.js developer with expertise in Next.js 14+ App Router, server components, and full-stack deployment with focus on performance and SEO excellence.
+
+## Core Workflow
+
+1. **Architecture planning** — Define app structure, routes, layouts, rendering strategy
+2. **Implement routing** — Create App Router structure with layouts, templates, loading/error states
+3. **Data layer** — Set up server components, data fetching, caching, revalidation
+4. **Optimize** — Images, fonts, bundles, streaming, edge runtime
+5. **Deploy** — Production build, environment setup, monitoring
+   - Validate: run `next build` locally, confirm zero type errors, check `NEXT_PUBLIC_*` and server-only env vars are set, run Lighthouse/PageSpeed to confirm Core Web Vitals > 90
+
+## Reference Guide
+
+Load detailed guidance based on context:
+
+| Topic | Reference | Load When |
+|-------|-----------|-----------|
+| App Router | `references/app-router.md` | File-based routing, layouts, templates, route groups |
+| Server Components | `references/server-components.md` | RSC patterns, streaming, client boundaries |
+| Server Actions | `references/server-actions.md` | Form handling, mutations, revalidation |
+| Data Fetching | `references/data-fetching.md` | fetch, caching, ISR, on-demand revalidation |
+| Deployment | `references/deployment.md` | Vercel, self-hosting, Docker, optimization |
+
+## Constraints
+
+### MUST DO (Next.js-specific)
+- Use App Router (`app/` directory), never Pages Router (`pages/`)
+- Keep components as Server Components by default; add `'use client'` only at the leaf boundary where interactivity is required
+- Use native `fetch` with explicit `cache` / `next.revalidate` options — do not rely on implicit caching
+- Use `generateMetadata` (or the static `metadata` export) for all SEO — never hardcode `<title>` or `<meta>` tags in JSX
+- Optimize every image with `next/image`; never use a plain `<img>` tag for content images
+- Add `loading.tsx` and `error.tsx` at every route segment that performs async data fetching
+
+### MUST NOT DO
+- Convert components to Client Components just to access data — fetch server-side first
+- Skip `loading.tsx`/`error.tsx` boundaries on async route segments
+- Deploy without running `next build` to confirm zero errors
+
+## Code Examples
+
+### Server Component with data fetching and caching
+```tsx
+// app/products/page.tsx
+import { Suspense } from 'react'
+
+async function ProductList() {
+  // Revalidate every 60 seconds (ISR)
+  const res = await fetch('https://api.example.com/products', {
+    next: { revalidate: 60 },
+  })
+  if (!res.ok) throw new Error('Failed to fetch products')
+  const products: Product[] = await res.json()
+
+  return (
+    <ul>
+      {products.map((p) => (
+        <li key={p.id}>{p.name}</li>
+      ))}
+    </ul>
+  )
+}
+
+export default function Page() {
+  return (
+    <Suspense fallback={<p>Loading…</p>}>
+      <ProductList />
+    </Suspense>
+  )
+}
+```
+
+### Server Action with form handling and revalidation
+```tsx
+// app/products/actions.ts
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export async function createProduct(formData: FormData) {
+  const name = formData.get('name') as string
+  await db.product.create({ data: { name } })
+  revalidatePath('/products')
+}
+
+// app/products/new/page.tsx
+import { createProduct } from '../actions'
+
+export default function NewProductPage() {
+  return (
+    <form action={createProduct}>
+      <input name="name" placeholder="Product name" required />
+      <button type="submit">Create</button>
+    </form>
+  )
+}
+```
+
+### generateMetadata for dynamic SEO
+```tsx
+// app/products/[id]/page.tsx
+import type { Metadata } from 'next'
+
+export async function generateMetadata(
+  { params }: { params: { id: string } }
+): Promise<Metadata> {
+  const product = await fetchProduct(params.id)
+  return {
+    title: product.name,
+    description: product.description,
+    openGraph: { title: product.name, images: [product.imageUrl] },
+  }
+}
+```
+
+## Output Templates
+
+When implementing Next.js features, provide:
+1. App structure (route organization)
+2. Layout/page components with proper data fetching
+3. Server actions if mutations needed
+4. Configuration (`next.config.js`, TypeScript)
+5. Brief explanation of rendering strategy chosen
+
+## Knowledge Reference
+
+Next.js 14+, App Router, React Server Components, Server Actions, Streaming SSR, Partial Prerendering, next/image, next/font, Metadata API, Route Handlers, Middleware, Edge Runtime, Turbopack, Vercel deployment

package/skills/frontend/nextjs-developer/references/app-router.md

@@ -0,0 +1,311 @@
+# App Router Architecture
+
+## File-Based Routing
+
+```
+app/
+├── layout.tsx              # Root layout (required)
+├── page.tsx               # Home page (/)
+├── loading.tsx            # Loading UI
+├── error.tsx              # Error boundary
+├── not-found.tsx          # 404 page
+├── template.tsx           # Re-mounted layout
+│
+├── (marketing)/           # Route group (no URL segment)
+│   ├── layout.tsx
+│   ├── about/
+│   │   └── page.tsx      # /about
+│   └── contact/
+│       └── page.tsx      # /contact
+│
+├── dashboard/
+│   ├── layout.tsx        # Shared dashboard layout
+│   ├── page.tsx          # /dashboard
+│   ├── settings/
+│   │   └── page.tsx      # /dashboard/settings
+│   └── @analytics/       # Parallel route (slot)
+│       └── page.tsx
+│
+├── blog/
+│   ├── [slug]/
+│   │   └── page.tsx      # /blog/my-post (dynamic)
+│   └── [...slug]/
+│       └── page.tsx      # /blog/a/b/c (catch-all)
+│
+└── api/
+    └── users/
+        └── route.ts      # API route handler
+```
+
+## Root Layout (Required)
+
+```tsx
+// app/layout.tsx
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: {
+    default: 'My App',
+    template: '%s | My App'
+  },
+  description: 'Next.js 14 application',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        {children}
+      </body>
+    </html>
+  )
+}
+```
+
+## Nested Layouts
+
+```tsx
+// app/dashboard/layout.tsx
+import { Sidebar } from '@/components/sidebar'
+import { auth } from '@/lib/auth'
+import { redirect } from 'next/navigation'
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const session = await auth()
+
+  if (!session) {
+    redirect('/login')
+  }
+
+  return (
+    <div className="flex">
+      <Sidebar />
+      <main className="flex-1">{children}</main>
+    </div>
+  )
+}
+```
+
+## Templates (Re-mount on Navigation)
+
+```tsx
+// app/template.tsx
+'use client'
+
+import { useEffect } from 'react'
+
+export default function Template({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    // Runs on every navigation
+    console.log('Template mounted')
+  }, [])
+
+  return <div>{children}</div>
+}
+```
+
+## Loading States
+
+```tsx
+// app/dashboard/loading.tsx
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="animate-spin rounded-full h-32 w-32 border-b-2" />
+    </div>
+  )
+}
+```
+
+## Error Boundaries
+
+```tsx
+// app/error.tsx
+'use client'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  )
+}
+```
+
+## Route Groups
+
+```tsx
+// (marketing) and (shop) share the same URL level
+app/
+├── (marketing)/
+│   ├── layout.tsx      # Marketing layout
+│   └── about/
+│       └── page.tsx    # /about
+└── (shop)/
+    ├── layout.tsx      # Shop layout
+    └── products/
+        └── page.tsx    # /products
+```
+
+## Parallel Routes
+
+```tsx
+// app/dashboard/layout.tsx
+export default function Layout({
+  children,
+  analytics,
+  team,
+}: {
+  children: React.ReactNode
+  analytics: React.ReactNode
+  team: React.ReactNode
+}) {
+  return (
+    <>
+      {children}
+      {analytics}
+      {team}
+    </>
+  )
+}
+
+// app/dashboard/@analytics/page.tsx
+export default function Analytics() {
+  return <div>Analytics Dashboard</div>
+}
+```
+
+## Intercepting Routes
+
+```tsx
+// Show modal when navigating from same app
+// but show full page on direct navigation
+
+// app/photos/[id]/page.tsx (full page)
+export default function PhotoPage({ params }: { params: { id: string } }) {
+  return <div>Photo {params.id} - Full Page</div>
+}
+
+// app/@modal/(.)photos/[id]/page.tsx (modal)
+export default function PhotoModal({ params }: { params: { id: string } }) {
+  return <div>Photo {params.id} - Modal</div>
+}
+```
+
+## Dynamic Routes
+
+```tsx
+// app/blog/[slug]/page.tsx
+export default function BlogPost({ params }: { params: { slug: string } }) {
+  return <h1>Post: {params.slug}</h1>
+}
+
+// Generate static params at build time
+export async function generateStaticParams() {
+  const posts = await fetch('https://api.example.com/posts').then(res => res.json())
+
+  return posts.map((post: { slug: string }) => ({
+    slug: post.slug,
+  }))
+}
+
+// Opt out of static generation
+export const dynamic = 'force-dynamic'
+
+// Revalidate every 60 seconds
+export const revalidate = 60
+```
+
+## Catch-All Routes
+
+```tsx
+// app/docs/[...slug]/page.tsx
+// Matches: /docs/a, /docs/a/b, /docs/a/b/c
+export default function Docs({ params }: { params: { slug: string[] } }) {
+  return <div>Docs: {params.slug.join('/')}</div>
+}
+
+// Optional catch-all: [[...slug]]
+// Also matches: /docs
+```
+
+## Route Handlers (API Routes)
+
+```tsx
+// app/api/users/route.ts
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const users = await db.user.findMany()
+  return NextResponse.json(users)
+}
+
+export async function POST(request: NextRequest) {
+  const body = await request.json()
+  const user = await db.user.create({ data: body })
+  return NextResponse.json(user, { status: 201 })
+}
+
+// Dynamic routes: app/api/users/[id]/route.ts
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  const user = await db.user.findUnique({ where: { id: params.id } })
+  return NextResponse.json(user)
+}
+```
+
+## Metadata API
+
+```tsx
+// app/blog/[slug]/page.tsx
+import type { Metadata } from 'next'
+
+export async function generateMetadata(
+  { params }: { params: { slug: string } }
+): Promise<Metadata> {
+  const post = await fetchPost(params.slug)
+
+  return {
+    title: post.title,
+    description: post.excerpt,
+    openGraph: {
+      title: post.title,
+      description: post.excerpt,
+      images: [{ url: post.coverImage }],
+    },
+  }
+}
+```
+
+## Quick Reference
+
+| File | Purpose | Use Case |
+|------|---------|----------|
+| `layout.tsx` | Persistent UI across routes | Shared navigation, auth wrapper |
+| `page.tsx` | Route UI | Actual page content |
+| `loading.tsx` | Loading fallback | Automatic Suspense boundary |
+| `error.tsx` | Error boundary | Handle errors gracefully |
+| `template.tsx` | Re-mounted layout | Analytics, animations |
+| `not-found.tsx` | 404 page | Custom not found UI |
+| `route.ts` | API handler | Backend API endpoints |