code-showcase-core-components

name	code-showcase-core-components
description	Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
risk	unknown
source	https://github.com/ChrisWiles/claude-code-showcase/tree/main/.claude/skills/core-components
source_repo	ChrisWiles/claude-code-showcase
source_type	community
date_added	2026-07-01T00:00:00.000Z
license	MIT
license_source	https://github.com/ChrisWiles/claude-code-showcase/blob/main/LICENSE

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

// CORRECT - Use tokens
<Box padding="$4" marginBottom="$2" />

// WRONG - Hard-coded values
<Box padding={16} marginBottom={8} />

Token	Value
$1	4px
$2	8px
$3	12px
$4	16px
$6	24px
$8	32px

Color Tokens

// CORRECT - Semantic tokens
<Text color="$textPrimary" />
<Box backgroundColor="$backgroundSecondary" />

// WRONG - Hard-coded colors
<Text color="#333333" />
<Box backgroundColor="rgb(245, 245, 245)" />