devstack 0.1.0

package/vendor/skills/skills/next-best-practices/file-conventions.md

@@ -0,0 +1,141 @@
+# File Conventions
+
+Next.js App Router uses file-based routing with special file conventions.
+
+## Project Structure
+
+Reference: https://nextjs.org/docs/app/getting-started/project-structure
+
+```
+app/
+├── layout.tsx          # Root layout (required)
+├── page.tsx            # Home page (/)
+├── loading.tsx         # Loading UI
+├── error.tsx           # Error UI
+├── not-found.tsx       # 404 UI
+├── global-error.tsx    # Global error UI
+├── route.ts            # API endpoint
+├── template.tsx        # Re-rendered layout
+├── default.tsx         # Parallel route fallback
+├── blog/
+│   ├── page.tsx        # /blog
+│   └── [slug]/
+│       └── page.tsx    # /blog/:slug
+└── (group)/            # Route group (no URL impact)
+    └── page.tsx
+```
+
+## Special Files
+
+| File            | Purpose                                  |
+| --------------- | ---------------------------------------- |
+| `page.tsx`      | UI for a route segment                   |
+| `layout.tsx`    | Shared UI for segment and children       |
+| `loading.tsx`   | Loading UI (Suspense boundary)           |
+| `error.tsx`     | Error UI (Error boundary)                |
+| `not-found.tsx` | 404 UI                                   |
+| `route.ts`      | API endpoint                             |
+| `template.tsx`  | Like layout but re-renders on navigation |
+| `default.tsx`   | Fallback for parallel routes             |
+
+## Route Segments
+
+```
+app/
+├── blog/               # Static segment: /blog
+├── [slug]/             # Dynamic segment: /:slug
+├── [...slug]/          # Catch-all: /a/b/c
+├── [[...slug]]/        # Optional catch-all: / or /a/b/c
+└── (marketing)/        # Route group (ignored in URL)
+```
+
+## Parallel Routes
+
+```
+app/
+├── @analytics/
+│   └── page.tsx
+├── @sidebar/
+│   └── page.tsx
+└── layout.tsx          # Receives { analytics, sidebar } as props
+```
+
+## Intercepting Routes
+
+```
+app/
+├── feed/
+│   └── page.tsx
+├── @modal/
+│   └── (.)photo/[id]/  # Intercepts /photo/[id] from /feed
+│       └── page.tsx
+└── photo/[id]/
+    └── page.tsx
+```
+
+Conventions:
+
+- `(.)` - same level
+- `(..)` - one level up
+- `(..)(..)` - two levels up
+- `(...)` - from root
+
+## Private Folders
+
+```
+app/
+├── _components/        # Private folder (not a route)
+│   └── Button.tsx
+└── page.tsx
+```
+
+Prefix with `_` to exclude from routing.
+
+## Middleware / Proxy
+
+### Next.js 14-15: `middleware.ts`
+
+```ts
+// middleware.ts (root of project)
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function middleware(request: NextRequest) {
+  // Auth, redirects, rewrites, etc.
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/dashboard/:path*", "/api/:path*"],
+};
+```
+
+### Next.js 16+: `proxy.ts`
+
+Renamed for clarity - same capabilities, different names:
+
+```ts
+// proxy.ts (root of project)
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function proxy(request: NextRequest) {
+  // Same logic as middleware
+  return NextResponse.next();
+}
+
+export const proxyConfig = {
+  matcher: ["/dashboard/:path*", "/api/:path*"],
+};
+```
+
+| Version | File            | Export         | Config        |
+| ------- | --------------- | -------------- | ------------- |
+| v14-15  | `middleware.ts` | `middleware()` | `config`      |
+| v16+    | `proxy.ts`      | `proxy()`      | `proxyConfig` |
+
+**Migration**: Run `npx @next/codemod@latest upgrade` to auto-rename.
+
+## File Conventions Reference
+
+Reference: https://nextjs.org/docs/app/api-reference/file-conventions

package/vendor/skills/skills/next-best-practices/font.md

@@ -0,0 +1,246 @@
+# Font Optimization
+
+Use `next/font` for automatic font optimization with zero layout shift.
+
+## Google Fonts
+
+```tsx
+// app/layout.tsx
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+## Multiple Fonts
+
+```tsx
+import { Inter, Roboto_Mono } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
+});
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+Use in CSS:
+
+```css
+body {
+  font-family: var(--font-inter);
+}
+
+code {
+  font-family: var(--font-roboto-mono);
+}
+```
+
+## Font Weights and Styles
+
+```tsx
+// Single weight
+const inter = Inter({
+  subsets: ["latin"],
+  weight: "400",
+});
+
+// Multiple weights
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+});
+
+// Variable font (recommended) - includes all weights
+const inter = Inter({
+  subsets: ["latin"],
+  // No weight needed - variable fonts support all weights
+});
+
+// With italic
+const inter = Inter({
+  subsets: ["latin"],
+  style: ["normal", "italic"],
+});
+```
+
+## Local Fonts
+
+```tsx
+import localFont from "next/font/local";
+
+const myFont = localFont({
+  src: "./fonts/MyFont.woff2",
+});
+
+// Multiple files for different weights
+const myFont = localFont({
+  src: [
+    {
+      path: "./fonts/MyFont-Regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "./fonts/MyFont-Bold.woff2",
+      weight: "700",
+      style: "normal",
+    },
+  ],
+});
+
+// Variable font
+const myFont = localFont({
+  src: "./fonts/MyFont-Variable.woff2",
+  variable: "--font-my-font",
+});
+```
+
+## Tailwind CSS Integration
+
+```tsx
+// app/layout.tsx
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={inter.variable}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-inter)"],
+      },
+    },
+  },
+};
+```
+
+## Preloading Subsets
+
+Only load needed character subsets:
+
+```tsx
+// Latin only (most common)
+const inter = Inter({ subsets: ["latin"] });
+
+// Multiple subsets
+const inter = Inter({ subsets: ["latin", "latin-ext", "cyrillic"] });
+```
+
+## Display Strategy
+
+Control font loading behavior:
+
+```tsx
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap", // Default - shows fallback, swaps when loaded
+});
+
+// Options:
+// 'auto' - browser decides
+// 'block' - short block period, then swap
+// 'swap' - immediate fallback, swap when ready (recommended)
+// 'fallback' - short block, short swap, then fallback
+// 'optional' - short block, no swap (use if font is optional)
+```
+
+## Don't Use Manual Font Links
+
+Always use `next/font` instead of `<link>` tags for Google Fonts.
+
+```tsx
+// Bad: Manual link tag (blocks rendering, no optimization)
+<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
+
+// Bad: Missing display and preconnect
+<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
+
+// Good: Use next/font (self-hosted, zero layout shift)
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+```
+
+## Common Mistakes
+
+```tsx
+// Bad: Importing font in every component
+// components/Button.tsx
+import { Inter } from 'next/font/google'
+const inter = Inter({ subsets: ['latin'] }) // Creates new instance each time!
+
+// Good: Import once in layout, use CSS variable
+// app/layout.tsx
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
+
+// Bad: Using @import in CSS (blocks rendering)
+/* globals.css */
+@import url('https://fonts.googleapis.com/css2?family=Inter');
+
+// Good: Use next/font (self-hosted, no network request)
+import { Inter } from 'next/font/google'
+
+// Bad: Loading all weights when only using a few
+const inter = Inter({ subsets: ['latin'] }) // Loads all weights
+
+// Good: Specify only needed weights (for non-variable fonts)
+const inter = Inter({ subsets: ['latin'], weight: ['400', '700'] })
+
+// Bad: Missing subset - loads all characters
+const inter = Inter({})
+
+// Good: Always specify subset
+const inter = Inter({ subsets: ['latin'] })
+```
+
+## Font in Specific Components
+
+```tsx
+// For component-specific fonts, export from a shared file
+// lib/fonts.ts
+import { Inter, Playfair_Display } from "next/font/google";
+
+export const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+export const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair" });
+
+// components/Heading.tsx
+import { playfair } from "@/lib/fonts";
+
+export function Heading({ children }) {
+  return <h1 className={playfair.className}>{children}</h1>;
+}
+```

package/vendor/skills/skills/next-best-practices/functions.md

@@ -0,0 +1,108 @@
+# Functions
+
+Next.js function APIs.
+
+Reference: https://nextjs.org/docs/app/api-reference/functions
+
+## Navigation Hooks (Client)
+
+| Hook                        | Purpose                                                        | Reference                                                                                |
+| --------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `useRouter`                 | Programmatic navigation (`push`, `replace`, `back`, `refresh`) | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-router)                   |
+| `usePathname`               | Get current pathname                                           | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-pathname)                 |
+| `useSearchParams`           | Read URL search parameters                                     | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-search-params)            |
+| `useParams`                 | Access dynamic route parameters                                | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-params)                   |
+| `useSelectedLayoutSegment`  | Active child segment (one level)                               | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment)  |
+| `useSelectedLayoutSegments` | All active segments below layout                               | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segments) |
+| `useLinkStatus`             | Check link prefetch status                                     | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-link-status)              |
+| `useReportWebVitals`        | Report Core Web Vitals metrics                                 | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-report-web-vitals)        |
+
+## Server Functions
+
+| Function     | Purpose                                      | Reference                                                              |
+| ------------ | -------------------------------------------- | ---------------------------------------------------------------------- |
+| `cookies`    | Read/write cookies                           | [Docs](https://nextjs.org/docs/app/api-reference/functions/cookies)    |
+| `headers`    | Read request headers                         | [Docs](https://nextjs.org/docs/app/api-reference/functions/headers)    |
+| `draftMode`  | Enable preview of unpublished CMS content    | [Docs](https://nextjs.org/docs/app/api-reference/functions/draft-mode) |
+| `after`      | Run code after response finishes streaming   | [Docs](https://nextjs.org/docs/app/api-reference/functions/after)      |
+| `connection` | Wait for connection before dynamic rendering | [Docs](https://nextjs.org/docs/app/api-reference/functions/connection) |
+| `userAgent`  | Parse User-Agent header                      | [Docs](https://nextjs.org/docs/app/api-reference/functions/userAgent)  |
+
+## Generate Functions
+
+| Function                | Purpose                                 | Reference                                                                           |
+| ----------------------- | --------------------------------------- | ----------------------------------------------------------------------------------- |
+| `generateStaticParams`  | Pre-render dynamic routes at build time | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-static-params)  |
+| `generateMetadata`      | Dynamic metadata                        | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)       |
+| `generateViewport`      | Dynamic viewport config                 | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-viewport)       |
+| `generateSitemaps`      | Multiple sitemaps for large sites       | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps)       |
+| `generateImageMetadata` | Multiple OG images per route            | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata) |
+
+## Request/Response
+
+| Function        | Purpose                        | Reference                                                                  |
+| --------------- | ------------------------------ | -------------------------------------------------------------------------- |
+| `NextRequest`   | Extended Request with helpers  | [Docs](https://nextjs.org/docs/app/api-reference/functions/next-request)   |
+| `NextResponse`  | Extended Response with helpers | [Docs](https://nextjs.org/docs/app/api-reference/functions/next-response)  |
+| `ImageResponse` | Generate OG images             | [Docs](https://nextjs.org/docs/app/api-reference/functions/image-response) |
+
+## Common Examples
+
+### Navigation
+
+Use `next/link` for internal navigation instead of `<a>` tags.
+
+```tsx
+// Bad: Plain anchor tag
+<a href="/about">About</a>;
+
+// Good: Next.js Link
+import Link from "next/link";
+
+<Link href="/about">About</Link>;
+```
+
+Active link styling:
+
+```tsx
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function NavLink({ href, children }) {
+  const pathname = usePathname();
+
+  return (
+    <Link href={href} className={pathname === href ? "active" : ""}>
+      {children}
+    </Link>
+  );
+}
+```
+
+### Static Generation
+
+```tsx
+// app/blog/[slug]/page.tsx
+export async function generateStaticParams() {
+  const posts = await getPosts();
+  return posts.map(post => ({ slug: post.slug }));
+}
+```
+
+### After Response
+
+```tsx
+import { after } from "next/server";
+
+export async function POST(request: Request) {
+  const data = await processRequest(request);
+
+  after(async () => {
+    await logAnalytics(data);
+  });
+
+  return Response.json({ success: true });
+}
+```

package/vendor/skills/skills/next-best-practices/hydration-error.md

@@ -0,0 +1,86 @@
+# Hydration Errors
+
+Diagnose and fix React hydration mismatch errors.
+
+## Error Signs
+
+- "Hydration failed because the initial UI does not match"
+- "Text content does not match server-rendered HTML"
+
+## Debugging
+
+In development, click the hydration error to see the server/client diff.
+
+## Common Causes and Fixes
+
+### Browser-only APIs
+
+```tsx
+// Bad: Causes mismatch - window doesn't exist on server
+<div>{window.innerWidth}</div>;
+
+// Good: Use client component with mounted check
+("use client");
+import { useState, useEffect } from "react";
+
+export function ClientOnly({ children }: { children: React.ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted ? children : null;
+}
+```
+
+### Date/Time Rendering
+
+Server and client may be in different timezones:
+
+```tsx
+// Bad: Causes mismatch
+<span>{new Date().toLocaleString()}</span>;
+
+// Good: Render on client only
+("use client");
+const [time, setTime] = useState<string>();
+useEffect(() => setTime(new Date().toLocaleString()), []);
+```
+
+### Random Values or IDs
+
+```tsx
+// Bad: Random values differ between server and client
+<div id={Math.random().toString()}>
+
+// Good: Use useId hook
+import { useId } from 'react'
+
+function Input() {
+  const id = useId()
+  return <input id={id} />
+}
+```
+
+### Invalid HTML Nesting
+
+```tsx
+// Bad: Invalid - div inside p
+<p><div>Content</div></p>
+
+// Bad: Invalid - p inside p
+<p><p>Nested</p></p>
+
+// Good: Valid nesting
+<div><p>Content</p></div>
+```
+
+### Third-party Scripts
+
+Scripts that modify DOM during hydration.
+
+```tsx
+// Good: Use next/script with afterInteractive
+import Script from "next/script";
+
+export default function Page() {
+  return <Script src="https://example.com/script.js" strategy="afterInteractive" />;
+}
+```