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., ) - [ ] 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 - […