agentbrief 0.1.0

package/briefs/growth-engineer/skills/seo-audit/references/ai-writing-detection.md

@@ -0,0 +1,200 @@
+# AI Writing Detection
+
+Words, phrases, and punctuation patterns commonly associated with AI-generated text. Avoid these to ensure writing sounds natural and human.
+
+Sources: Grammarly (2025), Microsoft 365 Life Hacks (2025), GPTHuman (2025), Walter Writes (2025), Textero (2025), Plagiarism Today (2025), Rolling Stone (2025), MDPI Blog (2025)
+
+---
+
+## Contents
+- Em Dashes: The Primary AI Tell
+- Overused Verbs
+- Overused Adjectives
+- Overused Transitions and Connectors
+- Phrases That Signal AI Writing (Opening Phrases, Transitional Phrases, Concluding Phrases, Structural Patterns)
+- Filler Words and Empty Intensifiers
+- Academic-Specific AI Tells
+- How to Self-Check
+
+## Em Dashes: The Primary AI Tell
+
+**The em dash (—) has become one of the most reliable markers of AI-generated content.**
+
+Em dashes are longer than hyphens (-) and are used for emphasis, interruptions, or parenthetical information. While they have legitimate uses in writing, AI models drastically overuse them.
+
+### Why Em Dashes Signal AI Writing
+- AI models were trained on edited books, academic papers, and style guides where em dashes appear frequently
+- AI uses em dashes as a shortcut for sentence variety instead of commas, colons, or parentheses
+- Most human writers rarely use em dashes because they don't exist as a standard keyboard key
+- The overuse is so consistent that it has become the unofficial signature of ChatGPT writing
+
+### What To Do Instead
+| Instead of | Use |
+|------------|-----|
+| The results—which were surprising—showed... | The results, which were surprising, showed... |
+| This approach—unlike traditional methods—allows... | This approach, unlike traditional methods, allows... |
+| The study found—as expected—that... | The study found, as expected, that... |
+| Communication skills—both written and verbal—are essential | Communication skills (both written and verbal) are essential |
+
+### Guidelines
+- Use commas for most parenthetical information
+- Use colons to introduce explanations or lists
+- Use parentheses for supplementary information
+- Reserve em dashes for rare, deliberate emphasis only
+- If you find yourself using more than one em dash per page, revise
+
+---
+
+## Overused Verbs
+
+| Avoid | Use Instead |
+|-------|-------------|
+| delve (into) | explore, examine, investigate, look at |
+| leverage | use, apply, draw on |
+| optimise | improve, refine, enhance |
+| utilise | use |
+| facilitate | help, enable, support |
+| foster | encourage, support, develop, nurture |
+| bolster | strengthen, support, reinforce |
+| underscore | emphasise, highlight, stress |
+| unveil | reveal, show, introduce, present |
+| navigate | manage, handle, work through |
+| streamline | simplify, make more efficient |
+| enhance | improve, strengthen |
+| endeavour | try, attempt, effort |
+| ascertain | find out, determine, establish |
+| elucidate | explain, clarify, make clear |
+
+---
+
+## Overused Adjectives
+
+| Avoid | Use Instead |
+|-------|-------------|
+| robust | strong, reliable, thorough, solid |
+| comprehensive | complete, thorough, full, detailed |
+| pivotal | key, critical, central, important |
+| crucial | important, key, essential, critical |
+| vital | important, essential, necessary |
+| transformative | significant, important, major |
+| cutting-edge | new, advanced, recent, modern |
+| groundbreaking | new, original, significant |
+| innovative | new, original, creative |
+| seamless | smooth, easy, effortless |
+| intricate | complex, detailed, complicated |
+| nuanced | subtle, complex, detailed |
+| multifaceted | complex, varied, diverse |
+| holistic | complete, whole, comprehensive |
+
+---
+
+## Overused Transitions and Connectors
+
+| Avoid | Use Instead |
+|-------|-------------|
+| furthermore | also, in addition, and |
+| moreover | also, and, besides |
+| notwithstanding | despite, even so, still |
+| that being said | however, but, still |
+| at its core | essentially, fundamentally, basically |
+| to put it simply | in short, simply put |
+| it is worth noting that | note that, importantly |
+| in the realm of | in, within, regarding |
+| in the landscape of | in, within |
+| in today's [anything] | currently, now, today |
+
+---
+
+## Phrases That Signal AI Writing
+
+### Opening Phrases to Avoid
+- "In today's fast-paced world..."
+- "In today's digital age..."
+- "In an era of..."
+- "In the ever-evolving landscape of..."
+- "In the realm of..."
+- "It's important to note that..."
+- "Let's delve into..."
+- "Imagine a world where..."
+
+### Transitional Phrases to Avoid
+- "That being said..."
+- "With that in mind..."
+- "It's worth mentioning that..."
+- "At its core..."
+- "To put it simply..."
+- "In essence..."
+- "This begs the question..."
+
+### Concluding Phrases to Avoid
+- "In conclusion..."
+- "To sum up..."
+- "By [doing X], you can [achieve Y]..."
+- "In the final analysis..."
+- "All things considered..."
+- "At the end of the day..."
+
+### Structural Patterns to Avoid
+- "Whether you're a [X], [Y], or [Z]..." (listing three examples after "whether")
+- "It's not just [X], it's also [Y]..."
+- "Think of [X] as [elaborate metaphor]..."
+- Starting sentences with "By" followed by a gerund: "By understanding X, you can Y..."
+
+---
+
+## Filler Words and Empty Intensifiers
+
+These words often add nothing to meaning. Remove them or find specific alternatives:
+
+- absolutely
+- actually
+- basically
+- certainly
+- clearly
+- definitely
+- essentially
+- extremely
+- fundamentally
+- incredibly
+- interestingly
+- naturally
+- obviously
+- quite
+- really
+- significantly
+- simply
+- surely
+- truly
+- ultimately
+- undoubtedly
+- very
+
+---
+
+## Academic-Specific AI Tells
+
+| Avoid | Use Instead |
+|-------|-------------|
+| shed light on | clarify, explain, reveal |
+| pave the way for | enable, allow, make possible |
+| a myriad of | many, numerous, various |
+| a plethora of | many, numerous, several |
+| paramount | very important, essential, critical |
+| pertaining to | about, regarding, concerning |
+| prior to | before |
+| subsequent to | after |
+| in light of | because of, given, considering |
+| with respect to | about, regarding, for |
+| in terms of | regarding, for, about |
+| the fact that | that (or rewrite sentence) |
+
+---
+
+## How to Self-Check
+
+1. Read your text aloud. If phrases sound unnatural in speech, revise them
+2. Ask: "Would I say this in a conversation with a colleague?"
+3. Check for repetitive sentence structures
+4. Look for clusters of the words listed above
+5. Ensure varied sentence lengths (not all similar length)
+6. Verify each intensifier adds genuine meaning

package/briefs/nextjs-fullstack/brief.yaml

@@ -0,0 +1,12 @@
+name: nextjs-fullstack
+version: "1.0.0"
+description: "Next.js 15 + App Router + React 19 + Tailwind full-stack specialist"
+personality: personality.md
+knowledge:
+  - knowledge/
+skills:
+  - skills/
+scale:
+  timeout: 120
+  engine: claude-code
+  model: claude-sonnet-4-6

package/briefs/nextjs-fullstack/knowledge/conventions.md

@@ -0,0 +1,57 @@
+# Next.js Full-Stack Conventions
+
+## Architecture Principles
+
+- **Server Components by default** -- only add `'use client'` when you need browser APIs, event handlers, or useState/useEffect
+- **Server Actions for mutations** -- prefer over API routes for form submissions and data mutations
+- **Route segments** -- use `layout.tsx`, `page.tsx`, `loading.tsx`, `error.tsx`, `not-found.tsx` correctly
+- **Parallel routes and intercepting routes** when the UX requires them
+- **Metadata API** for SEO -- use `generateMetadata` in layouts and pages
+
+## Data Fetching Patterns
+
+- Fetch data in Server Components -- no `useEffect` for initial data loads
+- Use `fetch` with Next.js caching semantics (`cache`, `revalidate`, `tags`)
+- Use React `cache()` to deduplicate requests within a render pass
+- Server Actions with `revalidatePath` / `revalidateTag` for cache invalidation
+- Colocate data fetching with the component that uses it
+
+## Styling Rules
+
+- **Tailwind CSS** for all styling -- no CSS modules or styled-components
+- Use `class-variance-authority` (cva) for component variants
+- Use `cn()` utility (clsx + tailwind-merge) for conditional classes
+- Follow mobile-first responsive design
+- Breakpoints: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px)
+
+## Component Patterns
+
+- Co-locate tests next to components: `component.tsx` + `component.test.tsx`
+- Use `Suspense` boundaries for streaming
+- Use `dynamic()` for heavy client components
+- Optimize images with `next/image`
+- Use `next/font` for font loading
+- Keep client components small and leaf-level -- push `'use client'` as far down the tree as possible
+
+## Project Structure
+
+```
+app/
+  layout.tsx          # Root layout
+  page.tsx            # Home page
+  (auth)/
+    login/page.tsx
+    register/page.tsx
+  dashboard/
+    layout.tsx
+    page.tsx
+    loading.tsx
+    error.tsx
+components/
+  ui/                 # shadcn/ui primitives
+  [feature]/          # Feature-specific components
+lib/
+  actions/            # Server Actions
+  db/                 # Database queries
+  utils.ts            # Shared utilities (cn, etc.)
+```

package/briefs/nextjs-fullstack/personality.md

@@ -0,0 +1,19 @@
+## Role
+
+You are a Next.js 15 full-stack specialist. You build production applications using App Router, React 19, TypeScript, and Tailwind CSS. You follow the framework's conventions precisely and prefer server-first patterns.
+
+## Tone
+
+- Pragmatic and framework-aligned -- follow Next.js conventions, not custom abstractions
+- Explain server vs client decisions when the boundary matters
+- Prefer fewer dependencies and built-in framework features
+
+## Constraints
+
+- Never use `useEffect` for data fetching -- use Server Components or Server Actions
+- Never use `getServerSideProps` or `getStaticProps` -- those are Pages Router patterns
+- Never put `'use client'` on a component that does not need browser APIs, event handlers, or useState/useEffect
+- Always use TypeScript strict mode -- no `any`
+- Always handle loading and error states with the appropriate route segment files (`loading.tsx`, `error.tsx`, `not-found.tsx`)
+- Use `satisfies` for type validation
+- Named exports for all components and functions

package/briefs/nextjs-fullstack/skills/next-best-practices/SKILL.md

@@ -0,0 +1,153 @@
+---
+name: next-best-practices
+description: Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
+user-invocable: false
+---
+
+# Next.js Best Practices
+
+Apply these rules when writing or reviewing Next.js code.
+
+## File Conventions
+
+See [file-conventions.md](./file-conventions.md) for:
+- Project structure and special files
+- Route segments (dynamic, catch-all, groups)
+- Parallel and intercepting routes
+- Middleware rename in v16 (middleware → proxy)
+
+## RSC Boundaries
+
+Detect invalid React Server Component patterns.
+
+See [rsc-boundaries.md](./rsc-boundaries.md) for:
+- Async client component detection (invalid)
+- Non-serializable props detection
+- Server Action exceptions
+
+## Async Patterns
+
+Next.js 15+ async API changes.
+
+See [async-patterns.md](./async-patterns.md) for:
+- Async `params` and `searchParams`
+- Async `cookies()` and `headers()`
+- Migration codemod
+
+## Runtime Selection
+
+See [runtime-selection.md](./runtime-selection.md) for:
+- Default to Node.js runtime
+- When Edge runtime is appropriate
+
+## Directives
+
+See [directives.md](./directives.md) for:
+- `'use client'`, `'use server'` (React)
+- `'use cache'` (Next.js)
+
+## Functions
+
+See [functions.md](./functions.md) for:
+- Navigation hooks: `useRouter`, `usePathname`, `useSearchParams`, `useParams`
+- Server functions: `cookies`, `headers`, `draftMode`, `after`
+- Generate functions: `generateStaticParams`, `generateMetadata`
+
+## Error Handling
+
+See [error-handling.md](./error-handling.md) for:
+- `error.tsx`, `global-error.tsx`, `not-found.tsx`
+- `redirect`, `permanentRedirect`, `notFound`
+- `forbidden`, `unauthorized` (auth errors)
+- `unstable_rethrow` for catch blocks
+
+## Data Patterns
+
+See [data-patterns.md](./data-patterns.md) for:
+- Server Components vs Server Actions vs Route Handlers
+- Avoiding data waterfalls (`Promise.all`, Suspense, preload)
+- Client component data fetching
+
+## Route Handlers
+
+See [route-handlers.md](./route-handlers.md) for:
+- `route.ts` basics
+- GET handler conflicts with `page.tsx`
+- Environment behavior (no React DOM)
+- When to use vs Server Actions
+
+## Metadata & OG Images
+
+See [metadata.md](./metadata.md) for:
+- Static and dynamic metadata
+- `generateMetadata` function
+- OG image generation with `next/og`
+- File-based metadata conventions
+
+## Image Optimization
+
+See [image.md](./image.md) for:
+- Always use `next/image` over `<img>`
+- Remote images configuration
+- Responsive `sizes` attribute
+- Blur placeholders
+- Priority loading for LCP
+
+## Font Optimization
+
+See [font.md](./font.md) for:
+- `next/font` setup
+- Google Fonts, local fonts
+- Tailwind CSS integration
+- Preloading subsets
+
+## Bundling
+
+See [bundling.md](./bundling.md) for:
+- Server-incompatible packages
+- CSS imports (not link tags)
+- Polyfills (already included)
+- ESM/CommonJS issues
+- Bundle analysis
+
+## Scripts
+
+See [scripts.md](./scripts.md) for:
+- `next/script` vs native script tags
+- Inline scripts need `id`
+- Loading strategies
+- Google Analytics with `@next/third-parties`
+
+## Hydration Errors
+
+See [hydration-error.md](./hydration-error.md) for:
+- Common causes (browser APIs, dates, invalid HTML)
+- Debugging with error overlay
+- Fixes for each cause
+
+## Suspense Boundaries
+
+See [suspense-boundaries.md](./suspense-boundaries.md) for:
+- CSR bailout with `useSearchParams` and `usePathname`
+- Which hooks require Suspense boundaries
+
+## Parallel & Intercepting Routes
+
+See [parallel-routes.md](./parallel-routes.md) for:
+- Modal patterns with `@slot` and `(.)` interceptors
+- `default.tsx` for fallbacks
+- Closing modals correctly with `router.back()`
+
+## Self-Hosting
+
+See [self-hosting.md](./self-hosting.md) for:
+- `output: 'standalone'` for Docker
+- Cache handlers for multi-instance ISR
+- What works vs needs extra setup
+
+## Debug Tricks
+
+See [debug-tricks.md](./debug-tricks.md) for:
+- MCP endpoint for AI-assisted debugging
+- Rebuild specific routes with `--debug-build-paths`
+

package/briefs/nextjs-fullstack/skills/next-best-practices/async-patterns.md

@@ -0,0 +1,87 @@
+# Async Patterns
+
+In Next.js 15+, `params`, `searchParams`, `cookies()`, and `headers()` are asynchronous.
+
+## Async Params and SearchParams
+
+Always type them as `Promise<...>` and await them.
+
+### Pages and Layouts
+
+```tsx
+type Props = { params: Promise<{ slug: string }> }
+
+export default async function Page({ params }: Props) {
+  const { slug } = await params
+}
+```
+
+### Route Handlers
+
+```tsx
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+}
+```
+
+### SearchParams
+
+```tsx
+type Props = {
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ query?: string }>
+}
+
+export default async function Page({ params, searchParams }: Props) {
+  const { slug } = await params
+  const { query } = await searchParams
+}
+```
+
+### Synchronous Components
+
+Use `React.use()` for non-async components:
+
+```tsx
+import { use } from 'react'
+
+type Props = { params: Promise<{ slug: string }> }
+
+export default function Page({ params }: Props) {
+  const { slug } = use(params)
+}
+```
+
+### generateMetadata
+
+```tsx
+type Props = { params: Promise<{ slug: string }> }
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params
+  return { title: slug }
+}
+```
+
+## Async Cookies and Headers
+
+```tsx
+import { cookies, headers } from 'next/headers'
+
+export default async function Page() {
+  const cookieStore = await cookies()
+  const headersList = await headers()
+
+  const theme = cookieStore.get('theme')
+  const userAgent = headersList.get('user-agent')
+}
+```
+
+## Migration Codemod
+
+```bash
+npx @next/codemod@latest next-async-request-api .
+```

package/briefs/nextjs-fullstack/skills/next-best-practices/bundling.md

@@ -0,0 +1,180 @@
+# Bundling
+
+Fix common bundling issues with third-party packages.
+
+## Server-Incompatible Packages
+
+Some packages use browser APIs (`window`, `document`, `localStorage`) and fail in Server Components.
+
+### Error Signs
+
+```
+ReferenceError: window is not defined
+ReferenceError: document is not defined
+ReferenceError: localStorage is not defined
+Module not found: Can't resolve 'fs'
+```
+
+### Solution 1: Mark as Client-Only
+
+If the package is only needed on client:
+
+```tsx
+// Bad: Fails - package uses window
+import SomeChart from 'some-chart-library'
+
+export default function Page() {
+  return <SomeChart />
+}
+
+// Good: Use dynamic import with ssr: false
+import dynamic from 'next/dynamic'
+
+const SomeChart = dynamic(() => import('some-chart-library'), {
+  ssr: false,
+})
+
+export default function Page() {
+  return <SomeChart />
+}
+```
+
+### Solution 2: Externalize from Server Bundle
+
+For packages that should run on server but have bundling issues:
+
+```js
+// next.config.js
+module.exports = {
+  serverExternalPackages: ['problematic-package'],
+}
+```
+
+Use this for:
+- Packages with native bindings (sharp, bcrypt)
+- Packages that don't bundle well (some ORMs)
+- Packages with circular dependencies
+
+### Solution 3: Client Component Wrapper
+
+Wrap the entire usage in a client component:
+
+```tsx
+// components/ChartWrapper.tsx
+'use client'
+
+import { Chart } from 'chart-library'
+
+export function ChartWrapper(props) {
+  return <Chart {...props} />
+}
+
+// app/page.tsx (server component)
+import { ChartWrapper } from '@/components/ChartWrapper'
+
+export default function Page() {
+  return <ChartWrapper data={data} />
+}
+```
+
+## CSS Imports
+
+Import CSS files instead of using `<link>` tags. Next.js handles bundling and optimization.
+
+```tsx
+// Bad: Manual link tag
+<link rel="stylesheet" href="/styles.css" />
+
+// Good: Import CSS
+import './styles.css'
+
+// Good: CSS Modules
+import styles from './Button.module.css'
+```
+
+## Polyfills
+
+Next.js includes common polyfills automatically. Don't load redundant ones from polyfill.io or similar CDNs.
+
+Already included: `Array.from`, `Object.assign`, `Promise`, `fetch`, `Map`, `Set`, `Symbol`, `URLSearchParams`, and 50+ others.
+
+```tsx
+// Bad: Redundant polyfills
+<script src="https://polyfill.io/v3/polyfill.min.js?features=fetch,Promise,Array.from" />
+
+// Good: Next.js includes these automatically
+```
+
+## ESM/CommonJS Issues
+
+### Error Signs
+
+```
+SyntaxError: Cannot use import statement outside a module
+Error: require() of ES Module
+Module not found: ESM packages need to be imported
+```
+
+### Solution: Transpile Package
+
+```js
+// next.config.js
+module.exports = {
+  transpilePackages: ['some-esm-package', 'another-package'],
+}
+```
+
+## Common Problematic Packages
+
+| Package | Issue | Solution |
+|---------|-------|----------|
+| `sharp` | Native bindings | `serverExternalPackages: ['sharp']` |
+| `bcrypt` | Native bindings | `serverExternalPackages: ['bcrypt']` or use `bcryptjs` |
+| `canvas` | Native bindings | `serverExternalPackages: ['canvas']` |
+| `recharts` | Uses window | `dynamic(() => import('recharts'), { ssr: false })` |
+| `react-quill` | Uses document | `dynamic(() => import('react-quill'), { ssr: false })` |
+| `mapbox-gl` | Uses window | `dynamic(() => import('mapbox-gl'), { ssr: false })` |
+| `monaco-editor` | Uses window | `dynamic(() => import('@monaco-editor/react'), { ssr: false })` |
+| `lottie-web` | Uses document | `dynamic(() => import('lottie-react'), { ssr: false })` |
+
+## Bundle Analysis
+
+Analyze bundle size with the built-in analyzer (Next.js 16.1+):
+
+```bash
+next experimental-analyze
+```
+
+This opens an interactive UI to:
+- Filter by route, environment (client/server), and type
+- Inspect module sizes and import chains
+- View treemap visualization
+
+Save output for comparison:
+
+```bash
+next experimental-analyze --output
+# Output saved to .next/diagnostics/analyze
+```
+
+Reference: https://nextjs.org/docs/app/guides/package-bundling
+
+## Migrating from Webpack to Turbopack
+
+Turbopack is the default bundler in Next.js 15+. If you have custom webpack config, migrate to Turbopack-compatible alternatives:
+
+```js
+// next.config.js
+module.exports = {
+  // Good: Works with Turbopack
+  serverExternalPackages: ['package'],
+  transpilePackages: ['package'],
+
+  // Bad: Webpack-only - migrate away from this
+  webpack: (config) => {
+    // custom webpack config
+  },
+}
+```
+
+Reference: https://nextjs.org/docs/app/building-your-application/upgrading/from-webpack-to-turbopack