Agent skill · design visual · aiskillstore
core-components
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
Why this skill is useful
Provides specific design patterns and component usage examples that ensure consistent styling and behavior across UI development.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/core-components