Development Quick Reference

# Review uncommitted changes
cr-uncommitted

# Full review
cr-review

# Generate markdown report by severity
cr-lovable

# Quick token-efficient review
cr-quick

# Install dependencies
npm ci --legacy-peer-deps

# Run development server
npm run dev

# Run tests
npm test

# Run linter
npm run lint

# Build for production
npm run build

# Create feature branch
git checkout -b feature/your-feature-name

# Review changes before commit
cr-uncommitted

# Commit changes
git add .
git commit -m "Your commit message"

# Push to remote
git push origin feature/your-feature-name

import { PageContainer } from '@/shared/components/PageContainer';

<PageContainer spacing="md">
  {/* Content */}
</PageContainer>

<div className="space-y-4 md:space-y-6">
  {/* Items */}
</div>

<div className="grid gap-3 md:gap-4 lg:gap-6 md:grid-cols-2">
  {/* Grid items */}
</div>

// ✅ CORRECT: Use semantic tokens
<Badge variant="success">Published</Badge>
<div className="bg-warning/10 text-warning-foreground">Warning</div>

// ❌ WRONG: Hardcoded colors
<Badge className="bg-green-500">Published</Badge>
<div className="text-yellow-600">Warning</div>

import { IconName } from 'lucide-react';

import { OverviewPageWrapper } from '@/shared/components';

<OverviewPageWrapper refreshQueryKeys={['hr']}>
  <PageHeader ... />
  <QuickActionsSection ... />
  {/* Stats and widgets */}
</OverviewPageWrapper>

import { PageContainer } from '@/shared/components/PageContainer';

<PageContainer spacing="md">
  <h1>Page Title</h1>
  {/* Page content */}
</PageContainer>

import { ResponsiveFormLayout } from '@/shared/components';

<ResponsiveFormLayout columns={2} spacing="md">
  <FormField />
  <FormField />
</ResponsiveFormLayout>

import { MobileTableWrapper } from '@/shared/components';

<MobileTableWrapper>
  <Table>
    {/* Wide table content */}
  </Table>
</MobileTableWrapper>

import { PermissionGate } from '@/platform/permissions';

<PermissionGate permission="hr.employees.view">
  <ViewButton />
</PermissionGate>

import { useCurrentUser } from '@/platform/auth';

const { user, userId, isLoading, error } = useCurrentUser();

if (isLoading) return <AppLoadingSkeleton />;
if (error) return <ErrorDisplay error={error} />;

import Dashboard from "./platform/dashboard/Dashboard";

<Route path="/" element={<Dashboard />} />

const Dashboard = lazy(() => import("./platform/dashboard/Dashboard"));

<Suspense fallback={<RouteLoadingSkeleton />}>
  <Route path="/" element={<Dashboard />} />
</Suspense>

if (loading) return null;

if (loading) return <AppLoadingSkeleton />;

if (user.role === 'org_admin') {
  showEditButton();
}

import { useHasPermission } from '@/platform/permissions';

const canEdit = useHasPermission('hr.employees.edit');
if (canEdit) {
  showEditButton();
}

useState(() => {
  supabase.auth.getUser().then(({ data }) => {
    if (data.user) setUserId(data.user.id);
  });
});

import { useCurrentUser } from '@/platform/auth';

const { user, userId, isLoading } = useCurrentUser();

useState(() => {
  import('@/integrations/supabase/client').then(({ supabase }) => {
    // ...
  });
});

import { supabase } from '@/integrations/supabase/client';

const queryClient = new QueryClient();

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      gcTime: 10 * 60 * 1000, // 10 minutes
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});