Project Consistency

Ensure consistency by producing shared artifacts and automated checks before parallel work begins.

Foundation-First Principle

Phase 1 (sequential): create shared artifacts (tokens, Layout, UI components). Phase 2 (parallel): every page imports from Phase 1; no new tokens or duplicated components.

Foundation Artifacts & Page Rules

Validation checkpoints:

1. Foundation complete: tokens.css has all palette/type/spacing vars, Layout renders, UI components compile.
2. Per-page: grep -r 'style={{' src/pages/ returns 0 hits (no inline styles). All imports resolve.

Convoy Integration

Phase 1 (sequential): foundation-setup creates tokens, Layout, UI library, and style guide brief. Phase 2 (parallel): every page task imports from Phase 1. Include these 5 references in every page prompt:

1. Design tokens path   2. Layout path   3. UI components path
4. Aesthetic direction   5. Content tone

Prompt templates: see TEMPLATES.md.

Executable Examples

Example: src/styles/tokens.css

:root {
	/* Palette */
	--color-bg: #ffffff;
	--color-foreground: #0f172a;
	--color-primary: #0ea5e9;
	--color-primary-600: #0284c7;

	/* Typography */
	--font-base: 'Inter, system-ui, -apple-system, sans-serif';
	--text-sm: 0.875rem;
	--text-base: 1rem;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 12px;
}

Minimal Button component example (React)

import './tokens.css';
type ButtonProps = { children: React.ReactNode; variant?: 'primary' | 'ghost'; className?: string };
export function Button({ children, variant = 'primary', className = '' }: ButtonProps) {
	const base = 'px-4 py-2 rounded';
	const variantCls = variant === 'primary' ? 'bg-[var(--color-primary)] text-white' : 'bg-transparent';
	return <button className={`${base} ${variantCls} ${className}`}>{children}</button>;
}

Anti-Patterns