polaris-fundamentals

# Polaris Fundamentals Skill

## Purpose
Provides foundational knowledge of Polaris Web Components, including setup, component categories, design tokens, and best practices.

## When This Skill Activates
- Working with Polaris Web Components
- Building Shopify app UIs
- Implementing design system patterns
- Choosing components for specific use cases

## Core Concepts

### Component Categories

Polaris Web Components are organized into six categories:

**1. Actions** - Interactive elements that trigger actions
- Buttons, links, icon buttons, button groups

**2. Forms** - Input and selection components
- Text fields, checkboxes, selects, file uploads, color pickers

**3. Feedback** - Status and notification components
- Banners, toasts, progress bars, spinners, skeletons

**4. Media** - Visual content components
- Avatars, icons, thumbnails, video thumbnails

**5. Structure** - Layout and organization components
- Pages, cards, sections, boxes, grids, stacks, tables

**6. Titles and Text** - Typography components
- Headings, text, paragraphs, badges, chips

### Design Tokens

#### Spacing Scale
```tsx
gap="050"  // 2px
gap="100"  // 4px
gap="200"  // 8px
gap="300"  // 12px
gap="400"  // 16px (default)
gap="500"  // 20px
gap="600"  // 24px
gap="800"  // 32px
gap="1000" // 40px
gap="1600" // 64px
```

#### Background Colors
```tsx
background="bg-surface"           // Default surface
background="bg-surface-secondary" // Secondary surface
background="bg-surface-tertiary"  // Tertiary surface
background="bg-surface-success"   // Success state
background="bg-surface-warning"   // Warning state
background="bg-surface-critical"  // Error state
```

#### Border Options
```tsx
border="base"     // Default border
border="success"  // Success border
border="warning"  // Warning border
border="critical" // Error border
```

#### Border Radius
```tsx
borderRadius="base"  // 4px
borderRadius="large" // 8px
borderRadius="full"  // 50% (circular)
```

#### Text Tones
```tsx
tone="subd