npm - red64-cli - Versions diffs - 0.1.0 → 0.3.0 - Mend

red64-cli 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

package/README.md +1 -2
package/dist/cli/parseArgs.d.ts.map +1 -1
package/dist/cli/parseArgs.js +5 -0
package/dist/cli/parseArgs.js.map +1 -1
package/dist/components/init/CompleteStep.d.ts.map +1 -1
package/dist/components/init/CompleteStep.js +2 -2
package/dist/components/init/CompleteStep.js.map +1 -1
package/dist/components/init/TestCheckStep.d.ts +16 -0
package/dist/components/init/TestCheckStep.d.ts.map +1 -0
package/dist/components/init/TestCheckStep.js +120 -0
package/dist/components/init/TestCheckStep.js.map +1 -0
package/dist/components/init/index.d.ts +1 -0
package/dist/components/init/index.d.ts.map +1 -1
package/dist/components/init/index.js +1 -0
package/dist/components/init/index.js.map +1 -1
package/dist/components/init/types.d.ts +9 -0
package/dist/components/init/types.d.ts.map +1 -1
package/dist/components/screens/InitScreen.d.ts.map +1 -1
package/dist/components/screens/InitScreen.js +69 -6
package/dist/components/screens/InitScreen.js.map +1 -1
package/dist/components/screens/ListScreen.d.ts.map +1 -1
package/dist/components/screens/ListScreen.js +28 -3
package/dist/components/screens/ListScreen.js.map +1 -1
package/dist/components/screens/StartScreen.d.ts.map +1 -1
package/dist/components/screens/StartScreen.js +212 -13
package/dist/components/screens/StartScreen.js.map +1 -1
package/dist/components/ui/ArtifactsSidebar.d.ts +19 -0
package/dist/components/ui/ArtifactsSidebar.d.ts.map +1 -0
package/dist/components/ui/ArtifactsSidebar.js +51 -0
package/dist/components/ui/ArtifactsSidebar.js.map +1 -0
package/dist/components/ui/FeatureSidebar.d.ts.map +1 -1
package/dist/components/ui/FeatureSidebar.js +1 -1
package/dist/components/ui/FeatureSidebar.js.map +1 -1
package/dist/components/ui/index.d.ts +1 -0
package/dist/components/ui/index.d.ts.map +1 -1
package/dist/components/ui/index.js +1 -0
package/dist/components/ui/index.js.map +1 -1
package/dist/services/ClaudeErrorDetector.js +3 -3
package/dist/services/ClaudeErrorDetector.js.map +1 -1
package/dist/services/ConfigService.d.ts +1 -0
package/dist/services/ConfigService.d.ts.map +1 -1
package/dist/services/ConfigService.js.map +1 -1
package/dist/services/ProjectDetector.d.ts +28 -0
package/dist/services/ProjectDetector.d.ts.map +1 -0
package/dist/services/ProjectDetector.js +236 -0
package/dist/services/ProjectDetector.js.map +1 -0
package/dist/services/TestRunner.d.ts +46 -0
package/dist/services/TestRunner.d.ts.map +1 -0
package/dist/services/TestRunner.js +85 -0
package/dist/services/TestRunner.js.map +1 -0
package/dist/services/index.d.ts +2 -0
package/dist/services/index.d.ts.map +1 -1
package/dist/services/index.js +2 -0
package/dist/services/index.js.map +1 -1
package/dist/types/index.d.ts +13 -0
package/dist/types/index.d.ts.map +1 -1
package/dist/types/index.js.map +1 -1
package/framework/.red64/settings/templates/specs/gap-analysis.md +163 -0
package/framework/agents/claude/.claude/agents/red64/spec-impl.md +131 -2
package/framework/agents/claude/.claude/agents/red64/validate-gap.md +13 -7
package/framework/agents/claude/.claude/commands/red64/spec-impl.md +24 -0
package/framework/agents/claude/.claude/commands/red64/validate-gap.md +4 -0
package/framework/agents/codex/.codex/agents/red64/spec-impl.md +131 -2
package/framework/agents/codex/.codex/agents/red64/validate-gap.md +13 -7
package/framework/agents/codex/.codex/commands/red64/spec-impl.md +24 -0
package/framework/agents/codex/.codex/commands/red64/validate-gap.md +4 -0
package/framework/stacks/generic/feedback.md +80 -0
package/framework/stacks/nextjs/accessibility.md +437 -0
package/framework/stacks/nextjs/api.md +431 -0
package/framework/stacks/nextjs/coding-style.md +282 -0
package/framework/stacks/nextjs/commenting.md +226 -0
package/framework/stacks/nextjs/components.md +411 -0
package/framework/stacks/nextjs/conventions.md +333 -0
package/framework/stacks/nextjs/css.md +310 -0
package/framework/stacks/nextjs/error-handling.md +442 -0
package/framework/stacks/nextjs/feedback.md +124 -0
package/framework/stacks/nextjs/migrations.md +332 -0
package/framework/stacks/nextjs/models.md +362 -0
package/framework/stacks/nextjs/queries.md +410 -0
package/framework/stacks/nextjs/responsive.md +338 -0
package/framework/stacks/nextjs/tech-stack.md +177 -0
package/framework/stacks/nextjs/test-writing.md +475 -0
package/framework/stacks/nextjs/validation.md +467 -0
package/framework/stacks/python/api.md +468 -0
package/framework/stacks/python/authentication.md +342 -0
package/framework/stacks/python/code-quality.md +283 -0
package/framework/stacks/python/code-refactoring.md +315 -0
package/framework/stacks/python/coding-style.md +462 -0
package/framework/stacks/python/conventions.md +399 -0
package/framework/stacks/python/error-handling.md +512 -0
package/framework/stacks/python/feedback.md +92 -0
package/framework/stacks/python/implement-ai-llm.md +468 -0
package/framework/stacks/python/migrations.md +388 -0
package/framework/stacks/python/models.md +399 -0
package/framework/stacks/python/python.md +232 -0
package/framework/stacks/python/queries.md +451 -0
package/framework/stacks/python/structure.md +245 -58
package/framework/stacks/python/tech.md +92 -35
package/framework/stacks/python/testing.md +380 -0
package/framework/stacks/python/validation.md +471 -0
package/framework/stacks/rails/authentication.md +176 -0
package/framework/stacks/rails/code-quality.md +287 -0
package/framework/stacks/rails/code-refactoring.md +299 -0
package/framework/stacks/rails/feedback.md +130 -0
package/framework/stacks/rails/implement-ai-llm-with-rubyllm.md +342 -0
package/framework/stacks/rails/rails.md +301 -0
package/framework/stacks/rails/rails8-best-practices.md +498 -0
package/framework/stacks/rails/rails8-css.md +573 -0
package/framework/stacks/rails/structure.md +140 -0
package/framework/stacks/rails/tech.md +108 -0
package/framework/stacks/react/code-quality.md +521 -0
package/framework/stacks/react/components.md +625 -0
package/framework/stacks/react/data-fetching.md +586 -0
package/framework/stacks/react/feedback.md +110 -0
package/framework/stacks/react/forms.md +694 -0
package/framework/stacks/react/performance.md +640 -0
package/framework/stacks/react/product.md +22 -9
package/framework/stacks/react/state-management.md +472 -0
package/framework/stacks/react/structure.md +351 -44
package/framework/stacks/react/tech.md +219 -30
package/framework/stacks/react/testing.md +690 -0
package/package.json +1 -1
package/framework/stacks/node/product.md +0 -27
package/framework/stacks/node/structure.md +0 -82
package/framework/stacks/node/tech.md +0 -63

package/framework/stacks/nextjs/conventions.md ADDED Viewed

@@ -0,0 +1,333 @@
+# Project Conventions
+Next.js 15 App Router file conventions, folder structure, environment management, and development workflow.
+---
+## Philosophy
+- **Convention over configuration**: Follow Next.js file-based conventions; avoid custom routing
+- **Colocation**: Keep related files together; tests next to source, types next to usage
+- **Explicit boundaries**: Every route segment has its own loading, error, and not-found states
+- **Environment safety**: Type-safe env vars, never leak secrets to the client
+---
+## App Router File Conventions
+### Special Files
+| File | Purpose | Required |
+|---|---|---|
+| `page.tsx` | Route UI, makes segment publicly accessible | Yes (for routes) |
+| `layout.tsx` | Shared UI wrapper, persists across navigations | Root required |
+| `loading.tsx` | Loading UI shown while page/segment loads | Recommended |
+| `error.tsx` | Error boundary for the segment | Recommended |
+| `not-found.tsx` | UI for `notFound()` calls | Recommended |
+| `template.tsx` | Like layout but re-mounts on navigation | Rare |
+| `default.tsx` | Parallel route fallback | When using parallel routes |
+| `route.ts` | API endpoint (GET, POST, etc.) | For API routes |
+| `global-error.tsx` | Root-level error boundary (wraps `<html>`) | Recommended |
+| `middleware.ts` | Runs before every request (at project root) | As needed |
+### File Naming
+```
+app/
+  layout.tsx                    # Root layout (required)
+  page.tsx                      # Home page (/)
+  loading.tsx                   # Global loading state
+  error.tsx                     # Global error boundary
+  not-found.tsx                 # Global 404 page
+  global-error.tsx              # Root error boundary
+  dashboard/
+    layout.tsx                  # Dashboard layout (sidebar, nav)
+    page.tsx                    # /dashboard
+    loading.tsx                 # Dashboard loading skeleton
+    error.tsx                   # Dashboard error boundary
+    settings/
+      page.tsx                  # /dashboard/settings
+    users/
+      page.tsx                  # /dashboard/users
+      [id]/
+        page.tsx                # /dashboard/users/:id
+        edit/
+          page.tsx              # /dashboard/users/:id/edit
+  (auth)/                       # Route group (no URL segment)
+    login/
+      page.tsx                  # /login
+    register/
+      page.tsx                  # /register
+  api/
+    health/
+      route.ts                  # GET /api/health
+    users/
+      route.ts                  # GET, POST /api/users
+      [id]/
+        route.ts                # GET, PATCH, DELETE /api/users/:id
+```
+---
+## Folder Structure
+### Full Project Layout
+```
+src/
+  app/                          # Next.js routes and layouts
+  components/
+    ui/                         # Reusable primitives (Button, Input, Card)
+    forms/                      # Form-specific components
+    layouts/                    # Layout building blocks (Sidebar, Header)
+  lib/
+    prisma.ts                   # Prisma client singleton
+    auth.ts                     # NextAuth configuration
+    utils.ts                    # General utilities
+  hooks/                        # Custom React hooks
+  actions/                      # Server actions
+  types/                        # Shared TypeScript types
+prisma/
+  schema.prisma                 # Database schema
+  migrations/                   # Migration history
+  seed.ts                       # Seed data script
+public/                         # Static assets (favicons, og images)
+tests/
+  e2e/                          # Playwright end-to-end tests
+```
+### Naming Patterns
+| Entity | Convention | Example |
+|---|---|---|
+| Route directories | kebab-case | `user-settings/`, `api-keys/` |
+| Component files | kebab-case | `user-card.tsx`, `data-table.tsx` |
+| Utility files | kebab-case | `format-date.ts`, `cn.ts` |
+| Hook files | kebab-case with use- prefix | `use-debounce.ts` |
+| Action files | kebab-case | `user-actions.ts` |
+| Type files | kebab-case | `api-types.ts` |
+| Constants | kebab-case file, UPPER_SNAKE exports | `config.ts` with `MAX_RETRIES` |
+---
+## Route Groups and Parallel Routes
+### Route Groups (Parentheses)
+```
+app/
+  (marketing)/                  # No URL impact
+    layout.tsx                  # Marketing layout (different nav)
+    page.tsx                    # / (home)
+    about/
+      page.tsx                  # /about
+    pricing/
+      page.tsx                  # /pricing
+  (dashboard)/                  # No URL impact
+    layout.tsx                  # Dashboard layout (sidebar)
+    dashboard/
+      page.tsx                  # /dashboard
+      settings/
+        page.tsx                # /dashboard/settings
+```
+### Dynamic Routes
+```typescript
+// app/users/[id]/page.tsx
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+export default async function UserPage({ params }: PageProps) {
+  const { id } = await params;
+  const user = await prisma.user.findUnique({ where: { id } });
+  if (!user) {
+    notFound();
+  }
+  return <UserProfile user={user} />;
+}
+// app/blog/[...slug]/page.tsx -- Catch-all route
+interface BlogPageProps {
+  params: Promise<{ slug: string[] }>;
+}
+export default async function BlogPage({ params }: BlogPageProps) {
+  const { slug } = await params;
+  // slug = ["2024", "01", "my-post"] for /blog/2024/01/my-post
+}
+```
+---
+## Environment Variables
+### Naming Convention
+```bash
+# Server-only (never sent to browser)
+DATABASE_URL="postgresql://..."
+NEXTAUTH_SECRET="..."
+STRIPE_SECRET_KEY="sk_..."
+OPENAI_API_KEY="sk-..."
+# Client-safe (bundled into browser code)
+NEXT_PUBLIC_APP_NAME="MyApp"
+NEXT_PUBLIC_APP_URL="https://myapp.com"
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_..."
+```
+### Type-Safe Environment
+```typescript
+// lib/env.ts
+import { z } from "zod";
+const envSchema = z.object({
+  DATABASE_URL: z.string().url(),
+  NEXTAUTH_SECRET: z.string().min(32),
+  NEXTAUTH_URL: z.string().url(),
+  NEXT_PUBLIC_APP_NAME: z.string(),
+  NEXT_PUBLIC_APP_URL: z.string().url(),
+});
+export const env = envSchema.parse(process.env);
+```
+### Files Hierarchy
+| File | Purpose | Committed |
+|---|---|---|
+| `.env` | Defaults for all environments | Yes |
+| `.env.local` | Local overrides with secrets | No (gitignored) |
+| `.env.development` | Dev-specific defaults | Yes |
+| `.env.production` | Prod-specific defaults | Yes |
+| `.env.test` | Test environment | Yes |
+---
+## Git Workflow
+### Branch Naming
+```
+feature/add-user-dashboard
+fix/login-redirect-loop
+chore/upgrade-prisma-6
+refactor/extract-auth-middleware
+```
+### Commit Messages
+```
+feat: add user profile page with avatar upload
+fix: prevent duplicate form submissions on slow networks
+refactor: extract validation schemas to shared module
+chore: upgrade Next.js to 15.1
+docs: add API authentication guide
+test: add E2E tests for checkout flow
+```
+### Pull Request Checklist
+- TypeScript compiles without errors (`pnpm tsc --noEmit`)
+- ESLint passes (`pnpm lint`)
+- Tests pass (`pnpm test`)
+- New routes have `loading.tsx` and `error.tsx`
+- Environment variables documented if added
+- Database migrations included if schema changed
+---
+## Feature Flags
+### Simple Environment-Based
+```typescript
+// lib/flags.ts
+export const flags = {
+  newDashboard: process.env.NEXT_PUBLIC_FF_NEW_DASHBOARD === "true",
+  aiFeatures: process.env.FF_AI_FEATURES === "true",
+} as const;
+```
+### Usage
+```typescript
+import { flags } from "@/lib/flags";
+export default function DashboardPage() {
+  if (flags.newDashboard) {
+    return <NewDashboard />;
+  }
+  return <LegacyDashboard />;
+}
+```
+---
+## Metadata and SEO
+### Static Metadata
+```typescript
+// app/layout.tsx
+import type { Metadata } from "next";
+export const metadata: Metadata = {
+  title: {
+    default: "MyApp",
+    template: "%s | MyApp",
+  },
+  description: "A modern web application",
+  metadataBase: new URL("https://myapp.com"),
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    siteName: "MyApp",
+  },
+};
+```
+### Dynamic Metadata
+```typescript
+// app/users/[id]/page.tsx
+import type { Metadata } from "next";
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { id } = await params;
+  const user = await prisma.user.findUnique({ where: { id } });
+  return {
+    title: user?.name ?? "User Not Found",
+    description: user?.bio ?? undefined,
+  };
+}
+```
+---
+## Anti-Patterns
+| Anti-Pattern | Problem | Correct Approach |
+|---|---|---|
+| Custom routing library | Fights the framework | Use App Router file conventions |
+| `NEXT_PUBLIC_` on secrets | Exposes secrets to the browser | Only prefix client-safe values |
+| Missing `loading.tsx` | Blank screen during navigation | Add loading states for every route segment |
+| Deeply nested routes (5+ levels) | Hard to navigate, slow resolution | Flatten with route groups |
+| Environment variables without validation | Runtime crashes on missing values | Validate with zod at startup |
+| Feature code in `app/` directory | Mixes routing with business logic | Keep route files thin, logic in `lib/` or `actions/` |
+---
+_Follow the framework's conventions. When Next.js provides a file-based solution, use it instead of inventing your own._

package/framework/stacks/nextjs/css.md ADDED Viewed

@@ -0,0 +1,310 @@
+# CSS and Styling
+Tailwind CSS v4 patterns for Next.js projects with design tokens, component variants, and dark mode.
+---
+## Philosophy
+- **Utility-first**: Compose styles in markup; extract components, not CSS classes
+- **Design tokens**: Define colors, spacing, and typography as CSS custom properties
+- **No custom CSS unless necessary**: Tailwind utilities handle 95% of cases
+- **Consistent variants**: Use class-variance-authority for component style APIs
+---
+## Tailwind CSS v4 Configuration
+### CSS-First Config (No `tailwind.config.js`)
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@theme {
+  /* Colors */
+  --color-brand-50: oklch(0.97 0.02 250);
+  --color-brand-500: oklch(0.55 0.2 250);
+  --color-brand-900: oklch(0.25 0.1 250);
+  /* Semantic colors */
+  --color-background: var(--color-white);
+  --color-foreground: var(--color-gray-950);
+  --color-muted: var(--color-gray-100);
+  --color-muted-foreground: var(--color-gray-500);
+  --color-border: var(--color-gray-200);
+  --color-primary: var(--color-brand-500);
+  --color-destructive: oklch(0.55 0.2 25);
+  /* Typography */
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
+  /* Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+}
+```
+### Dark Mode
+```css
+/* app/globals.css (continued) */
+@variant dark (&:where(.dark, .dark *));
+@theme {
+  /* Light mode defaults above, dark mode overrides: */
+}
+.dark {
+  --color-background: var(--color-gray-950);
+  --color-foreground: var(--color-gray-50);
+  --color-muted: var(--color-gray-900);
+  --color-muted-foreground: var(--color-gray-400);
+  --color-border: var(--color-gray-800);
+}
+```
+### Dark Mode Toggle
+```typescript
+// components/theme-toggle.tsx
+"use client";
+import { useEffect, useState } from "react";
+export function ThemeToggle() {
+  const [dark, setDark] = useState(false);
+  useEffect(() => {
+    const stored = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    setDark(stored === "dark" || (!stored && prefersDark));
+  }, []);
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", dark);
+    localStorage.setItem("theme", dark ? "dark" : "light");
+  }, [dark]);
+  return (
+    <button onClick={() => setDark(!dark)} aria-label="Toggle dark mode">
+      {dark ? <SunIcon /> : <MoonIcon />}
+    </button>
+  );
+}
+```
+---
+## The `cn()` Utility
+### Setup
+```typescript
+// lib/utils.ts
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+```
+### Usage
+```typescript
+import { cn } from "@/lib/utils";
+interface BadgeProps {
+  variant: "success" | "warning" | "error";
+  className?: string;
+  children: React.ReactNode;
+}
+export function Badge({ variant, className, children }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+        {
+          "bg-green-100 text-green-800": variant === "success",
+          "bg-yellow-100 text-yellow-800": variant === "warning",
+          "bg-red-100 text-red-800": variant === "error",
+        },
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+```
+**Why `cn()`**: `clsx` handles conditionals, `twMerge` resolves conflicting Tailwind classes (e.g., a passed `className` of `bg-blue-500` correctly overrides an internal `bg-green-100`).
+---
+## Component Variants with CVA
+### Setup
+```typescript
+// components/ui/button.tsx
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+const buttonVariants = cva(
+  // Base styles
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-white hover:bg-primary/90",
+        secondary: "bg-muted text-foreground hover:bg-muted/80",
+        destructive: "bg-destructive text-white hover:bg-destructive/90",
+        outline: "border border-border bg-transparent hover:bg-muted",
+        ghost: "hover:bg-muted",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-10 px-4",
+        lg: "h-12 px-6 text-base",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  }
+);
+interface ButtonProps
+  extends React.ComponentProps<"button">,
+    VariantProps<typeof buttonVariants> {
+  isLoading?: boolean;
+}
+export function Button({
+  variant,
+  size,
+  isLoading,
+  disabled,
+  className,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={cn(buttonVariants({ variant, size }), className)}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading && <Spinner className="mr-2 h-4 w-4 animate-spin" />}
+      {children}
+    </button>
+  );
+}
+export { buttonVariants };
+```
+---
+## Common Patterns
+### Container
+```css
+/* Use Tailwind's container or define a custom one */
+@utility container {
+  margin-inline: auto;
+  padding-inline: 1rem;
+  max-width: 80rem;
+}
+```
+### Focus Styles
+```typescript
+// Consistent focus ring across all interactive elements
+const focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
+```
+### Animations
+```css
+/* app/globals.css */
+@theme {
+  --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-slide-up: slide-up 0.3s ease-out;
+}
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slide-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+```
+---
+## Layout Patterns
+### Sidebar Layout
+```typescript
+export function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen">
+      <aside className="w-64 shrink-0 border-r bg-muted/50">
+        <nav className="p-4">
+          {/* nav items */}
+        </nav>
+      </aside>
+      <main className="flex-1 p-8">{children}</main>
+    </div>
+  );
+}
+```
+### Centered Content
+```typescript
+export function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-muted/30">
+      <div className="w-full max-w-md rounded-xl border bg-background p-8 shadow-sm">
+        {children}
+      </div>
+    </div>
+  );
+}
+```
+---
+## Anti-Patterns
+| Anti-Pattern | Problem | Correct Approach |
+|---|---|---|
+| `@apply` everywhere | Defeats utility-first purpose | Extract React components instead |
+| Hardcoded colors | Inconsistent, no dark mode | Use design tokens from `@theme` |
+| `!important` in utilities | Fragile, hard to override | Use `cn()` to merge conflicts |
+| CSS modules + Tailwind | Two styling systems to maintain | Pick one; prefer Tailwind |
+| Inline `style={{}}` | No design system, no responsive | Use Tailwind utilities |
+| Magic numbers for spacing | Inconsistent spacing | Use Tailwind's spacing scale |
+---
+_Style components with utilities. Extract React components, not CSS classes. Let the design system enforce consistency._