Agent skill · design visual · sickn33
code-showcase-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 system patterns and component usage examples that enhance UI consistency and development efficiency.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Core Components When to Use Use this skill when you need core component library and design system patterns. Use when building UI, using design tokens, or working with the component library. 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 Limitations Use this skill only when the task clearly matches its upstream source and local project context. Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes. Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/code-showcase-core-components--c5627f