Frontend Development Guidelines

Deep reference guide for complex React patterns in the Marble monorepo. For basic conventions (imports, styling, routes, i18n), see .claude/rules/.

Core Conventions

Components

// Plain function declarations - NOT React.FC or FunctionComponent
// Named exports only - NO default exports
// Props via interface (or type)

interface CaseCardProps {
  caseData: Case;
  onSelect?: (id: string) => void;
  className?: string;
}

export function CaseCard({ caseData, onSelect, className }: CaseCardProps) {
  return (
    <div className={cn('rounded-lg border border-grey-border p-4', className)}>
      <h3 className="text-l font-semibold text-grey-primary">{caseData.name}</h3>
      <Button onClick={() => onSelect?.(caseData.id)}>Select</Button>
    </div>
  );
}

Query Hook (one file per query)

// queries/cases/get-case.ts
import { useQuery } from '@tanstack/react-query';
import { getRoute } from '@app-builder/utils/routes';

export function useGetCaseQuery(caseId: string) {
  return useQuery({
    queryKey: ['cases', 'get-case', caseId],
    queryFn: async () => {
      const response = await fetch(
        getRoute('/ressources/cases/:caseId', { caseId }),
      );
      return response.json() as Promise<CaseDetail>;
    },
    enabled: !!caseId,
  });
}

Topic Guides

Read these when working on specific areas: