Next.js + Tailwind v4 + Supabase AI Rules Pack

What it fixes

• "use client" everywhere instead of Server Components by default.
• Broken Next.js 15+ page signatures with synchronous params and searchParams.
• Supabase auth using getSession() instead of getUser() for server-side validation.
• Generic select('*') queries instead of explicit typed column selection.
• Tailwind v4 projects still being scaffolded around tailwind.config.js.

What's inside

• .cursorrules and .mdc coverage for Cursor workflows.
• A Claude Code / Codex skill layer for the same stack.
• 15 ready-to-paste prompts for CRUD, auth, forms, Realtime, testing, and debugging.
• Before/after examples showing how generation changes once the rules are installed.
• Coverage for App Router patterns, Supabase SSR, validation, performance, and project structure.
• A private source-of-truth repo with release bundles and QA artifacts behind the commercial package.

Before / After

'use client'

export default function Page({ params }: { params: { slug: string } }) {
  const [data, setData] = useState(null)

  useEffect(() => {
    supabase.from('posts').select('*').then(({ data }) => setData(data))
  }, [])
}

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const supabase = await createServerClient()
  const { data: post, error } = await supabase
    .from('posts')
    .select('id, title, content, created_at')
    .eq('slug', slug)
    .maybeSingle()

  if (error) throw new Error(error.message)
  if (!post) notFound()
}

Free vs Full

The public repo proves the approach. The paid pack expands it into a fuller production asset.

Compatibility

The same underlying conventions can be carried across several AI coding surfaces.