frontend-patterns

Frontend Patterns Skill

TEMPLATE: This skill uses {{PLACEHOLDER}} tokens. Replace with your project values before use.

Purpose

Ensure consistent frontend development using established patterns for your framework (Next.js App Router, React, etc.), authentication provider, UI component library, and analytics platform.

When This Skill Applies

• Building new UI components or pages
• Implementing authentication flows
• Adding forms with validation
• Integrating analytics events
• Creating protected/authenticated routes
• Working with component libraries (shadcn/ui, Radix, etc.)

Server vs Client Components

// SERVER COMPONENT (default) - Use for:
// - Data fetching
// - Auth checks
// - SEO-critical content
import { auth } from "{{AUTH_SERVER_IMPORT}}";

export default async function DashboardPage() {
  const { userId } = await auth();
  // Fetch data server-side...
}

// CLIENT COMPONENT - Use for:
// - Interactivity (onClick, onChange)
// - Browser APIs (localStorage, window)
// - Hooks (useState, useEffect)
"use client";

import { useState } from "react";

export function InteractiveWidget() {
  const [count, setCount] = useState(0);
  // Interactive logic...
}

Protected Pages

CRITICAL: Always use forced dynamic rendering for authenticated pages:

import { auth } from "{{AUTH_SERVER_IMPORT}}";
import { redirect } from "next/navigation";

// REQUIRED - Auth context unavailable at build time
export const dynamic = "force-dynamic";

export default async function ProtectedPage() {
  const { userId } = await auth();

  if (!userId) {
    redirect("/sign-in");
  }

  // Render protected content...
}

Route Organization

app/
+-- (auth)/                    # Auth routes (sign-in, sign-up)
+-- (marketing)/               # Public marketing pages
|   +-- page.tsx               # Homepage
|   +-- pricing/page.tsx
+-- dashboard/                 # Protected user area
|   +-- page.tsx
|   +-- _components/           # Page-specific components
+-- admin/                     # Admin-only area
    +-- page.tsx