npm - @cubis/foundry - Versions diffs - 0.3.64 → 0.3.65 - Mend

@cubis/foundry 0.3.64 → 0.3.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (808) hide show

package/workflows/workflows/agent-environment-setup/platforms/claude/skills/nextjs-developer/references/performance.md ADDED Viewed

@@ -0,0 +1,222 @@
+# Performance Optimization
+## Core Web Vitals Targets
+| Metric  | Target  | What It Measures        |
+| ------- | ------- | ----------------------- |
+| TTFB    | < 200ms | Server response time    |
+| FCP     | < 1s    | First content painted   |
+| LCP     | < 2.5s  | Largest content painted |
+| CLS     | < 0.1   | Layout shift score      |
+| FID/INP | < 100ms | Input responsiveness    |
+## Image Optimization
+### next/image
+```tsx
+import Image from "next/image";
+// Local image — auto-sized, optimized at build
+import heroImage from "@/public/hero.jpg";
+export function Hero() {
+  return (
+    <Image
+      src={heroImage}
+      alt="Hero banner"
+      placeholder="blur" // Blur placeholder while loading
+      priority // Preload (use for above-the-fold images)
+      sizes="100vw"
+    />
+  );
+}
+// Remote image — must specify sizes
+export function Avatar({ src, name }: { src: string; name: string }) {
+  return (
+    <Image
+      src={src}
+      alt={`${name}'s avatar`}
+      width={48}
+      height={48}
+      className="rounded-full"
+    />
+  );
+}
+```
+### Image Best Practices
+- Use `priority` for LCP images (hero, above-the-fold)
+- Always provide `sizes` for responsive images
+- Use `placeholder="blur"` for better perceived performance
+- Configure `remotePatterns` in `next.config.js` for external images
+- Use WebP/AVIF formats (automatic with next/image)
+```js
+// next.config.js
+module.exports = {
+  images: {
+    remotePatterns: [{ protocol: "https", hostname: "cdn.example.com" }],
+    formats: ["image/avif", "image/webp"],
+  },
+};
+```
+## Font Optimization
+```tsx
+// app/layout.tsx
+import { Inter, Roboto_Mono } from "next/font/google";
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap", // Prevent FOIT
+  variable: "--font-inter",
+});
+const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-roboto-mono",
+});
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
+```
+### Local Fonts
+```tsx
+import localFont from "next/font/local";
+const myFont = localFont({
+  src: "./fonts/MyFont.woff2",
+  display: "swap",
+  variable: "--font-my-font",
+});
+```
+## Script Loading
+```tsx
+import Script from 'next/script';
+// After page is interactive (default)
+<Script src="https://analytics.example.com/script.js" />
+// Before page hydration (blocking — use sparingly)
+<Script src="/critical.js" strategy="beforeInteractive" />
+// After hydration, when browser is idle
+<Script src="/non-critical.js" strategy="lazyOnload" />
+// Inline script with worker strategy (off main thread)
+<Script strategy="worker">
+  {`console.log('Runs in web worker')`}
+</Script>
+```
+## Link Prefetching
+```tsx
+import Link from 'next/link';
+// Prefetched automatically when visible in viewport
+<Link href="/dashboard">Dashboard</Link>
+// Disable prefetch for rarely visited pages
+<Link href="/admin/settings" prefetch={false}>Settings</Link>
+```
+## Bundle Analysis
+```bash
+# Install analyzer
+npm install @next/bundle-analyzer
+# next.config.js
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+module.exports = withBundleAnalyzer({ /* config */ });
+# Run analysis
+ANALYZE=true npm run build
+```
+## Code Splitting
+### Dynamic Imports
+```tsx
+import dynamic from "next/dynamic";
+// Lazy load heavy components
+const HeavyChart = dynamic(() => import("@/components/HeavyChart"), {
+  loading: () => <ChartSkeleton />,
+  ssr: false, // Skip SSR for client-only components
+});
+// Lazy load below-the-fold content
+const Comments = dynamic(() => import("@/components/Comments"));
+```
+### Route-Based Splitting
+Next.js automatically code-splits by route. Each `page.tsx` is its own chunk.
+## Caching Strategy
+| Layer               | What                               | How                         |
+| ------------------- | ---------------------------------- | --------------------------- |
+| Request memoization | Duplicate fetches in single render | Automatic for `fetch()`     |
+| Data cache          | API responses across requests      | `fetch()` with `revalidate` |
+| Full route cache    | Static HTML + RSC payload          | Automatic for static routes |
+| Router cache        | Client-side route cache            | Automatic, 30s for dynamic  |
+### Opting Out of Caching
+```tsx
+// Per-fetch
+fetch(url, { cache: "no-store" });
+// Per-route segment
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+// Per-route via headers/cookies usage
+import { cookies, headers } from "next/headers";
+// Using these automatically makes the route dynamic
+```
+## React Compiler (experimental)
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    reactCompiler: true, // Auto-memoizes components and hooks
+  },
+};
+```
+When enabled, the compiler automatically handles `useMemo`, `useCallback`, and `React.memo` — you don't need to add them manually.
+## Performance Checklist
+- [ ] LCP image has `priority` prop
+- [ ] Fonts use `next/font` with `display: 'swap'`
+- [ ] Heavy components use `dynamic()` import
+- [ ] Third-party scripts use appropriate `strategy`
+- [ ] Images use `next/image` with proper `sizes`
+- [ ] No layout shift from dynamic content (set explicit dimensions)
+- [ ] Server Components used where possible (smaller client bundle)
+- [ ] Suspense boundaries for streaming
+- [ ] Bundle analyzed for unexpected large dependencies

package/workflows/workflows/agent-environment-setup/platforms/claude/skills/nextjs-developer/references/seo.md ADDED Viewed

@@ -0,0 +1,290 @@
+# SEO Implementation
+## Metadata API
+### Static Metadata
+```tsx
+// app/layout.tsx or app/page.tsx
+import type { Metadata } from "next";
+export const metadata: Metadata = {
+  title: {
+    default: "My App",
+    template: "%s | My App", // Child pages: "About | My App"
+  },
+  description: "A description of my app",
+  metadataBase: new URL("https://myapp.com"),
+  openGraph: {
+    title: "My App",
+    description: "A description of my app",
+    url: "https://myapp.com",
+    siteName: "My App",
+    images: [
+      {
+        url: "/og.png",
+        width: 1200,
+        height: 630,
+        alt: "My App",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "My App",
+    description: "A description of my app",
+    images: ["/og.png"],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+};
+```
+### Dynamic Metadata
+```tsx
+// app/blog/[slug]/page.tsx
+import type { Metadata } from "next";
+type Props = { params: { slug: string } };
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const post = await getPost(params.slug);
+  return {
+    title: post.title,
+    description: post.excerpt,
+    openGraph: {
+      title: post.title,
+      description: post.excerpt,
+      images: [post.coverImage],
+      type: "article",
+      publishedTime: post.publishedAt,
+      authors: [post.author.name],
+    },
+  };
+}
+```
+## Sitemap
+### Static Sitemap
+```tsx
+// app/sitemap.ts
+import type { MetadataRoute } from "next";
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: "https://myapp.com",
+      lastModified: new Date(),
+      changeFrequency: "yearly",
+      priority: 1,
+    },
+    {
+      url: "https://myapp.com/about",
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.8,
+    },
+    {
+      url: "https://myapp.com/blog",
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 0.5,
+    },
+  ];
+}
+```
+### Dynamic Sitemap
+```tsx
+// app/sitemap.ts
+import type { MetadataRoute } from "next";
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const posts = await db.post.findMany({
+    select: { slug: true, updatedAt: true },
+  });
+  const postUrls = posts.map((post) => ({
+    url: `https://myapp.com/blog/${post.slug}`,
+    lastModified: post.updatedAt,
+    changeFrequency: "weekly" as const,
+    priority: 0.6,
+  }));
+  return [
+    { url: "https://myapp.com", lastModified: new Date(), priority: 1 },
+    ...postUrls,
+  ];
+}
+```
+## Robots.txt
+```tsx
+// app/robots.ts
+import type { MetadataRoute } from "next";
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+        disallow: ["/admin/", "/api/", "/private/"],
+      },
+    ],
+    sitemap: "https://myapp.com/sitemap.xml",
+  };
+}
+```
+## Structured Data (JSON-LD)
+```tsx
+// app/blog/[slug]/page.tsx
+export default async function BlogPost({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const post = await getPost(params.slug);
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    headline: post.title,
+    description: post.excerpt,
+    image: post.coverImage,
+    datePublished: post.publishedAt,
+    dateModified: post.updatedAt,
+    author: {
+      "@type": "Person",
+      name: post.author.name,
+    },
+  };
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <article>
+        <h1>{post.title}</h1>
+        <div dangerouslySetInnerHTML={{ __html: post.content }} />
+      </article>
+    </>
+  );
+}
+```
+## Dynamic OG Images
+```tsx
+// app/api/og/route.tsx
+import { ImageResponse } from "next/og";
+export const runtime = "edge";
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const title = searchParams.get("title") ?? "My App";
+  return new ImageResponse(
+    <div
+      style={{
+        fontSize: 60,
+        background: "linear-gradient(to bottom, #1a1a2e, #16213e)",
+        color: "white",
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 40,
+      }}
+    >
+      {title}
+    </div>,
+    { width: 1200, height: 630 },
+  );
+}
+// Reference in metadata
+export const metadata: Metadata = {
+  openGraph: {
+    images: ["/api/og?title=My+Page"],
+  },
+};
+```
+## Canonical URLs
+```tsx
+export const metadata: Metadata = {
+  alternates: {
+    canonical: "https://myapp.com/blog/my-post",
+    languages: {
+      "en-US": "https://myapp.com/en/blog/my-post",
+      "es-ES": "https://myapp.com/es/blog/my-post",
+    },
+  },
+};
+```
+## International SEO
+```tsx
+// app/[lang]/layout.tsx
+export async function generateStaticParams() {
+  return [{ lang: "en" }, { lang: "es" }, { lang: "fr" }];
+}
+export async function generateMetadata({
+  params,
+}: {
+  params: { lang: string };
+}) {
+  return {
+    alternates: {
+      canonical: `https://myapp.com/${params.lang}`,
+      languages: {
+        en: "https://myapp.com/en",
+        es: "https://myapp.com/es",
+        fr: "https://myapp.com/fr",
+      },
+    },
+  };
+}
+```
+## SEO Checklist
+- [ ] Title and description on every page
+- [ ] Open Graph tags for social sharing
+- [ ] Twitter card meta tags
+- [ ] Sitemap generated and submitted
+- [ ] robots.txt configured
+- [ ] Structured data (JSON-LD) for content pages
+- [ ] Canonical URLs set
+- [ ] Dynamic OG images for key pages
+- [ ] Alt text on all images
+- [ ] Semantic HTML (h1-h6, article, nav, main)
+- [ ] Mobile-friendly (responsive)
+- [ ] Fast loading (Core Web Vitals passing)