Frontend Architect Agent Skill

const stackRecommendations = {
  // Marketing sites
  marketingSite: {
    framework: "Next.js 14+ (App Router)",
    styling: "Tailwind CSS",
    components: "shadcn/ui",
    deployment: "Cloudflare Pages",
    rationale: "SSG for speed, great DX, edge deployment"
  },

  // Internal tools
  internalTools: {
    framework: "Next.js 14+ (App Router)",
    styling: "Tailwind CSS",
    components: "shadcn/ui + react-hook-form + zod",
    auth: "Cloudflare Access",
    deployment: "Cloudflare Pages (with Access protection)",
    rationale: "Fast iteration, zero-config auth, preview URLs"
  },

  // Interactive gallery/portfolio
  gallery: {
    framework: "Next.js 14+ (App Router)",
    styling: "Tailwind CSS + Framer Motion",
    components: "shadcn/ui + custom",
    images: "next/image + Pexels/Unsplash API",
    deployment: "Cloudflare Pages",
    rationale: "Optimized images, smooth animations, edge CDN"
  },

  // E-commerce
  ecommerce: {
    framework: "Next.js 14+ (App Router)",
    styling: "Tailwind CSS",
    components: "shadcn/ui + Stripe Elements",
    payments: "Stripe",
    deployment: "Vercel (better Next.js support) or Cloudflare",
    rationale: "SSR for SEO, edge caching, Stripe integration"
  }
};

# wrangler.toml
name = "your-project"
compatibility_date = "2026-01-31"
pages_build_output_dir = ".next"  # or "out" for static

[vars]
API_KEY = "env:API_KEY"

[[kv_namespaces]]
binding = "CACHE"
id = "your-namespace-id"

   # Every PR gets a unique URL
   npx wrangler pages deploy out --project-name=your-project
   # → https://preview-feature-123.your-project.pages.dev

   // middleware.ts
   export async function middleware(request: Request) {
     const flags = await env.KV.get('feature-flags', 'json');
     if (flags?.newCheckout && request.url.includes('/checkout')) {
       return NextResponse.rewrite(new URL('/checkout-v2', request.url));
     }
   }

   # Access policy (configure in Cloudflare dashboard)
   Application: internal-tools.example.com
   Policy: Allow authenticated users from @company.com

// components/ui/button.tsx - shadcn baseline
import { cn } from "@/lib/utils";
import { buttonVariants } from "./button-variants";

// Extend with your design tokens
export const Button = ({ className, variant, size, ...props }) => (
  <button
    className={cn(
      buttonVariants({ variant, size }),
      "transition-all duration-200",  // Add your defaults
      className
    )}
    {...props}
  />
);

internal.yourapp.com/
├── Cloudflare Access (SSO protection)
│   └── Policy: Allow @company.com
├── Feature Flags (per-user visibility)
│   └── KV: { "admin-tools": ["user1", "user2"] }
├── Preview Environments
│   └── preview-{branch}.internal.yourapp.com
└── Routes
    ├── /admin → Full admin dashboard
    ├── /beta → Beta feature preview
    └── /debug → Developer tools

// middleware.ts
export async function middleware(request: Request) {
  // Cloudflare Access provides JWT in CF-Access-JWT-Assertion header
  const jwt = request.headers.get('CF-Access-JWT-Assertion');
  const user = await verifyAccessToken(jwt);

  const flags = await env.KV.get(`user:${user.email}:flags`, 'json');

  if (request.url.includes('/admin') && !flags?.admin) {
    return new Response('Forbidden', { status: 403 });
  }

  return NextResponse.next();
}

// lib/design-bridge.ts
import { buttonPatterns } from '@/data/catalog/button-patterns.json';

// Map catalog patterns to shadcn variants
export const variantMap = {
  'primary-button': 'default',
  'secondary-button': 'outline',
  'destructive-button': 'destructive',
  'tertiary-button': 'ghost',
  'neobrutalism-button': 'brutalist',  // custom variant
} as const;

// Generate Tailwind classes from catalog specs
export function patternToClasses(patternId: string): string {
  const pattern = buttonPatterns.find(p => p.id === patternId);
  if (!pattern) return '';

  return cn(
    pattern.cssProperties.map(prop => propertyToTailwind(prop)),
    pattern.variants?.hover && 'hover:' + pattern.variants.hover
  );
}

## Recommendation: [Technology/Approach]

### Rationale
[2-3 sentences on why this is the right choice]

### Implementation
[Code snippets, configuration, or setup steps]

### Trade-offs
| Pro | Con |
|-----|-----|
| [Benefit] | [Drawback] |

### Alternatives Considered
1. **[Alternative A]**: [Why not chosen]
2. **[Alternative B]**: [When it would be better]

### Migration Path
[How to evolve if requirements change]