Data to UI

Overview

Patterns for transforming static data into type-safe React components. This skill covers JSON → TypeScript → React pipelines with emphasis on semantic color systems, derived types, and formatting utilities.

Workflows

1. JSON Schema → TypeScript Types

• Read JSON schema/data structure
• Create base TypeScript interfaces matching JSON shape
• Export union types for enums (e.g., type Severity = 'safety_hazard' | 'repair_needed')
• Use optional properties (?) for nullable/missing fields
• Add JSDoc comments for complex types

2. Derived Types for UI

• Create composed types extending base types with extends
• Use Pick<T, K> and Omit<T, K> for component props
• Build intersection types with & for joined data (e.g., FindingWithAsset)
• Create aggregate interfaces for statistics/summaries