Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.

Core Components Design System Overview Use components from your core library instead of raw platform components. This ensures consistent styling and behavior. Design Tokens NEVER hard code values. Always use design tokens. Spacing Tokens Token Value $1 4px $2 8px $3 12px $4 16px $6 24px $8 32px Color Tokens Semantic Token Use For $textPrimary Main text $textSecondary Supporting text $textTertiary Disabled/hint text $primary500 Brand/accent color $statusError Error states $statusSuccess Success states Typography Tokens Token Size $xs 12px $sm 14px $md 16px $lg 18px $xl 20px $2xl 24px Core Components Box Base layout component with token support: HStack / VStack Horizontal and vertical flex layouts: Text Typography with token support: Button Interactive button with variants: Variant Use For solid Primary actions outline Secondary actions ghost Tertiary/subtle actions link Inline actions Input Form input with validation: Card Content container: Layout Patterns Screen Layout Form Layout List Item Layout Anti Patterns Component Props Pattern When creating components, use token based props: Integration with Other Skills react ui patterns : Use core components for UI states testing patterns : Mock core components in tests storybook : Document component variants When to Use This skill is applicable to execute the workflow or actions described in the overview. Limitations Use this skill only when the task clearly matches the scope described above. Do not treat the output as a substitute for environment specific validation, testing, or expert review. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

core-components