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 Inspect the actual project component exports, token definitions and framework first. The names, $ tokens and props below illustrate an assumed local library; none is bundled here. Use its real documented API, preserve accessibility/native behavior and do not invent components/core imports or variantStyles. Reuse project primitives when appropriate rather than replacing valid native components solely to match this example. 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