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 token usage that ensure consistency in UI development, which the AI wouldn't reliably generate on its own.
What it needs
About 3k 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 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/core-components--493a97