frontend-patterns

Frontend Patterns

Reference: CLAUDE.md is the authoritative source.

Theme Integration — NEVER hardcode colors

// ✅ CORRECT — semantic Tailwind classes
<div className="bg-background text-primary border-weak">
<span className="text-error">Error occurred</span>

// ❌ WRONG — hardcoded colors break dark/light mode
<div className="bg-gray-900 text-white border-gray-700">

Semantic classes:

• Backgrounds: bg-background bg-secondary bg-surface bg-canvas bg-elevated
• Text: text-primary text-secondary text-disabled text-link
• Borders: border-weak border-medium border-strong
• Status: text-success text-warning text-error text-info

Prefer @grafana/ui components over custom implementations.

Error Handling — No silent failures, no console.*

// ✅ CORRECT — surface errors in the UI
} catch (err) {
  setError('Failed to load tools. Please try again.');
}

// ❌ WRONG — swallowed error, console pollution
} catch (err) {
  console.error(err);
}

No console.log, console.error, or console.warn in shipped code.

Component Patterns

• Functional components with hooks only — no class components
• async/await not .then()/.catch()
• Custom hooks for reusable business logic (useChat, useSessionManager)
• useMemo / useCallback for performance-sensitive computations