# Agent Skill: Slide Creation & Usage

## Purpose
This skill enables AI agents to create presentation slides using the Vicinity Labs design system. Slides are built with existing system components—everything in the component library can be used in slides.

## CRITICAL: Slide Component Architecture

**The `Slide` component handles layout for you. DO NOT recreate what it already provides.**

### What Slide Component Provides (DON'T DUPLICATE):

1. **Title slides**: Logo, title, tagline, centered layout, slide number, corner patterns
2. **Content slides**: Header with title/label, content area, slide number, brand watermark, corner patterns
3. **Section slides**: Large centered text, minimal layout
4. **All slides**: Film grain overlay, fading corner dots, consistent padding

### NEVER DO THIS (Duplicate Content Anti-Pattern):

```astro
<!-- WRONG: Creating duplicate title -->
<Slide variant="title" title="Build Your Moat">
  <div class="relative z-10 flex flex-col items-center justify-center h-full text-center">
    <h1 class="...">Build your moat.</h1>  <!-- DUPLICATE! Slide already shows title -->
    <p class="...">Tagline</p>  <!-- DUPLICATE! Use tagline prop -->
    <Logo />  <!-- DUPLICATE! Slide shows logo -->
  </div>
</Slide>
```

### CORRECT: Let Slide Handle It:

```astro
<!-- CORRECT: Title slide -->
<Slide variant="title" title="Build your moat." tagline="Context Engineering Stacks">
  <a href="..." class="...">Call to Action</a>  <!-- Only additional content -->
</Slide>

<!-- CORRECT: Content slide -->
<Slide variant="content" title="Executive Summary" slideNumber={2} totalSlides={10} slideLabel="Overview">
  <!-- Just the content - Slide provides header -->
  <div class="grid grid-cols-4 gap-4">...</div>
</Slide>
```

---

## Slide Design Principles

### 1. NO Duplicate Content
- Never include titles inside slide content (Slide component renders them)
- Never add logos in content slots (Slide renders brand marks)
- Never recreate centered layouts on title slides (Slide handles layout)
- Never add absolute positioned backgrounds that duplicate Slide's built-in patterns

### 2. NO Random Empty Space
**Every pixel must be purposeful. Cards and containers must fill their allocated space.**

**Visual Balance Psychology:**
- The human brain appreciates symmetry - unbalanced layouts create cognitive dissonance
- Unequal column heights make content look accidental, not intentional
- When side-by-side elements have different heights, always equalize them
- Empty space within containers signals "unfinished" or "forgotten" design

```
Standard spacing scale:
- Gap between major sections: gap-6 (24px)
- Gap between related items: gap-4 (16px)  
- Gap between tight elements: gap-2 (8px)
- Padding inside cards: p-4 or p-5
- Margin between content blocks: mb-6
```

**MANDATORY: Fill All Available Space**

Cards in grids MUST stretch to fill height:
```astro
<!-- WRONG: Cards don't fill space, creating empty voids -->
<div class="grid grid-cols-2 gap-6 h-full">
  <Card class="p-5">Content</Card>  <!-- Only as tall as content -->
  <Card class="p-5">Content</Card>
</div>

<!-- CORRECT: Cards fill available height with flex-1 distribution -->
<div class="grid grid-cols-2 gap-6 h-full">
  <Card class="p-5 h-full flex flex-col">  <!-- Fills grid cell -->
    <div class="flex items-center justify-between mb-4 pb-3 border-b">
      <h3>Header</h3>
      <Badge />
    </div>
    <div class="flex-1 flex items-center">  <!-- Vertically center short content -->
      <p>Content that doesn't fill space gets centered</p>
    </div>
    <div class="mt-4 pt-4 border-t">  <!-- Footer stays at bottom -->
      <p class="text-xs">Footer</p>
    </div>
  </Card>
</div>
```

**3-Column Grid Symmetry Pattern:**
```astro
<!-- WRONG: Mixed containers create uneven visual weight -->
<div class="grid grid-cols-3 gap-4">
  <Card class="p-5">...</Card>
  <Card class="p-5">...</Card>
  <div class="flex flex-col">...</div>  <!-- NOT a Card - looks different -->
</div>

<!-- CORRECT: All columns use Cards for visual consistency -->
<div class="grid grid-cols-3 gap-4 flex-1 min-h-0">
  <Card class="p-5 h-full flex flex-col">...</Card>
  <Card class="p-5 h-full flex flex-col">...</Card>
  <Card class="p-5 h-full flex flex-col">  <!-- Also a Card -->
    <h3 class="mb-4">Title</h3>
    <div class="flex-1 flex flex-col justify-between gap-3">  <!-- Distribute evenly -->
      <div class="p-3 bg-bg-card/50">Item 1</div>
      <div class="p-3 bg-bg-card/50">Item 2</div>
      <div class="p-3 bg-bg-card/50">Item 3</div>
    </div>
  </Card>
</div>
```

**Key Rules:**
1. All columns in a grid should use the same container type (all Cards or all divs)
2. When content is short, use `flex-1 flex items-center` to vertically center it
3. When you have multiple items in a column, use `justify-between` to distribute them evenly
4. Never mix bare divs with Cards in the same grid row - it breaks visual rhythm

**Sidebar Pattern - Equal Height Cards:**
```astro
<!-- WRONG: space-y leaves gaps, cards don't stretch -->
<div class="w-72 space-y-4">
  <Card class="p-4">...</Card>
  <Card class="p-4">...</Card>
</div>

<!-- CORRECT: flex-col with flex-1 cards fill height evenly -->
<div class="w-72 flex flex-col gap-4">
  <Card class="p-4 flex-1">...</Card>  <!-- Each card expands equally -->
  <Card class="p-4 flex-1">...</Card>
</div>
```

**Short Content Pattern - Vertical Centering:**
```astro
<!-- When text is short and card has extra space, center it vertically -->
<Card class="p-5 h-full flex flex-col">
  <h3 class="mb-4">Title</h3>
  <div class="flex-1 flex items-center">  <!-- Centers short text in available space -->
    <p class="text-sm text-fg-secondary">Brief description text</p>
  </div>
</Card>
```

**Content Slides - Always Use h-full:**
```astro
<Slide variant="content" title="Title">
  <!-- Root content container must have h-full -->
  <div class="flex gap-6 h-full">
    <div class="flex-1 min-w-0">  <!-- Chart area fills width -->
      <LineChart width={640} height={380} />
    </div>
    <div class="w-72 flex flex-col gap-4">  <!-- Sidebar fills height -->
      <Card class="p-4 flex-1">Metric 1</Card>
      <Card class="p-4 flex-1">Metric 2</Card>
      <Card class="p-4 flex-1">Metric 3</Card>
    </div>
  </div>
</Slide>
```

### 3. Logical Column Layouts
**Use web-standard layout patterns:**

**Two-Column Comparison (Before/After):**
```astro
<div class="grid grid-cols-2 gap-6 h-full">
  <Card class="p-5 h-full flex flex-col">
    <div class="flex items-center justify-between mb-4 pb-3 border-b">
      <h3>Current State</h3>
      <Badge text="Before" />
    </div>
    <ul class="space-y-4 flex-1">
      <li class="flex items-start gap-3 py-1">...</li>
    </ul>
    <div class="mt-4 pt-4 border-t">
      <p class="text-xs">Result summary</p>
    </div>
  </Card>
  <!-- Second card same structure -->
</div>
```

**Three-Column with Mixed Content:**
```astro
<div class="grid grid-cols-3 gap-4 flex-1">
  <Card class="p-5 h-full flex flex-col">
    <h3>Section 1</h3>
    <p class="flex-1">Content fills space</p>
  </Card>
  <Card class="p-5 h-full flex flex-col">
    <h3>Section 2</h3>
    <p class="flex-1">Content fills space</p>
  </Card>
  <div class="flex flex-col h-full">  <!-- Non-card column -->
    <p class="mb-3">Label</p>
    <div class="flex-1 flex flex-col gap-3">
      <div class="p-2 bg-bg-card/30">Item</div>
    </div>
  </div>
</div>
```

### 3. Intentional Layout Patterns

**Chart + Sidebar Pattern:**
```astro
<Slide variant="content" title="Market Analysis">
  <div class="flex gap-6 h-full">
    <div class="flex-1 min-w-0">  <!-- Chart fills available space -->
      <LineChart width={640} height={380} />
    </div>
    <div class="w-64 flex flex-col gap-4">  <!-- Fixed-width sidebar -->
      <Card class="p-4 flex-1">Metric 1</Card>
      <Card class="p-4 flex-1">Metric 2</Card>
      <Card class="p-4 flex-1">Context text</Card>
    </div>
  </div>
</Slide>
```

**Grid of Cards Pattern:**
```astro
<Slide variant="content" title="Three Pillars">
  <div class="grid grid-cols-3 gap-5 h-full">
    <Card class="p-5 flex flex-col">
      <div class="flex items-center gap-3 mb-4 pb-3 border-b border-gold/10">
        <Icon />
        <span class="font-mono text-[10px] text-gold-text uppercase">Pillar 1</span>
      </div>
      <p class="text-sm flex-1">Description...</p>
      <ul class="text-xs space-y-1.5">...</ul>
    </Card>
    <!-- Repeat for 2, 3 -->
  </div>
</Slide>
```

---

## Slide Variants Reference

**1. Title Slide** (`variant="title"`)
- Full-screen centered content
- Large headline (text-5xl to text-7xl)
- Tagline below headline
- Background patterns (RadialBloom, DotGrid)
- Company branding at bottom

```astro
<Slide variant="title" title="Headline" tagline="Subheadline" slideNumber={1} totalSlides={10} slideLabel="Title">
  <div class="relative z-10 flex flex-col items-center justify-center h-full text-center">
    <h1 class="font-[family-name:var(--font-primary)] text-6xl text-fg-primary">Headline</h1>
    <p class="text-xl text-fg-secondary max-w-2xl">Tagline</p>
  </div>
</Slide>
```

**2. Content Slide** (`variant="content"`)
- Header with title and slide number
- Flexible content area
- Charts, cards, grids fit here

```astro
<Slide variant="content" title="Slide Title" slideNumber={2} totalSlides={10} slideLabel="Section">
  <!-- Content here -->
</Slide>
```

**3. Section Divider** (`variant="section"`)
- Minimal slide with large centered text
- Used between major sections

```astro
<Slide variant="section" title="Section Name" slideNumber={5} totalSlides={10} slideLabel="Deep Dive" />
```

**4. Full-bleed Statement** (`variant="full"`)
- Centered quote or key message
- No header
- Large typography

```astro
<Slide variant="full" slideNumber={11} totalSlides={14} slideLabel="Statement">
  <blockquote class="font-[family-name:var(--font-primary)] text-4xl text-fg-primary italic">
    "Key quote or message"
  </blockquote>
</Slide>
```

## Slide Dimensions
- **Resolution**: 1920x1080 (16:9)
- **Canvas**: 1080p-native design
- **Minimum typography**: 16px
- **Content area**: Full width minus padding

## Formatting Design Instructions for Slides

When writing design instructions or content for slides, follow this format:

### Text Content Format
```
Slide [N]: [Variant]
Title: [Title text]
Label: [Short category label]

Content:
- Use bullet points for lists
- Keep text concise (max 2 lines per point)
- Use labels with `font-mono text-xs text-gold-text uppercase`

Visual Elements:
- [Chart type]: [Data description]
- [Component]: [Configuration]

Layout:
- [Grid/flex description]
- [Spacing requirements]
```

### Visual Element Specs

**Data Cards**
```
DataCard:
  - title: [metric name]
  - value: [number]
  - subtitle: [context]
  - variant: gold|amber|default|outline
  - icon: MiniDonut with value
```

**Charts**
```
Chart:
  - type: LineChart|BarChart|NetworkGraph
  - data: [describe data points]
  - emphasis: [which element to highlight]
  - colors: gold for primary, amber for comparison
```

**Grids**
```
Layout:
  - type: grid|flex
  - columns: 2|3|4
  - gap: 6 (24px) standard
```

## Component Combinations for Slides

### Executive Summary Slide
```astro
<div class="grid grid-cols-4 gap-6 mb-8">
  <DataCard title="Metric" value="X%" subtitle="context" variant="gold">
    <MiniDonut value={78} slot="icon" />
  </DataCard>
  <!-- Repeat for 4 metrics -->
</div>
<div class="grid grid-cols-2 gap-8">
  <Card class="p-6 border-l-4 border-l-gold">...</Card>
  <Card class="p-6 border-l-4 border-l-gold">...</Card>
</div>
```

### Chart + Analysis Slide
```astro
<div class="flex gap-8 h-full">
  <div class="flex-1">
    <LineChart ... />
  </div>
  <div class="w-80 space-y-6">
    <Card class="p-5">
      <span class="font-mono text-xs text-gold-text uppercase">Label</span>
      <p class="font-[family-name:var(--font-primary)] text-3xl text-fg-primary mt-1">Value</p>
    </Card>
    <!-- Additional cards -->
  </div>
</div>
```

### Before/After Comparison Slide
```astro
<div class="grid grid-cols-2 gap-8 h-full">
  <Card class="p-6 relative border-amber/30">
    <Badge text="Before" variant="outline" />
    <h3 class="font-mono text-sm text-amber uppercase">Current State</h3>
    <!-- List with × markers -->
  </Card>
  <Card class="p-6 relative border-gold/50">
    <Badge text="After" variant="solid" />
    <h3 class="font-mono text-sm text-gold-text uppercase">Future State</h3>
    <!-- List with ✓ markers -->
  </Card>
</div>
```

### Timeline/Roadmap Slide
```astro
<div class="space-y-6">
  <div class="flex gap-6 items-start">
    <div class="flex-shrink-0 w-28 text-right">
      <span class="font-mono text-sm text-gold-text">Week 1-2</span>
      <Badge text="Phase 1" variant="outline" />
    </div>
    <div class="w-4 h-4 rounded-full bg-gold mt-1" />
    <div class="flex-1 pb-6">
      <h3 class="font-[family-name:var(--font-primary)] text-lg text-fg-primary">Phase Title</h3>
      <p class="text-fg-secondary text-sm">Description</p>
      <ProgressBar value={75} height={6} />
    </div>
  </div>
  <!-- Repeat phases -->
</div>
```

## Best Practices

1. **Use background patterns sparingly**: RadialBloom and DotGrid add texture but keep opacity low (0.05-0.25)
2. **Maintain visual hierarchy**: Headlines use `font-[family-name:var(--font-primary)]`, body uses default sans
3. **Gold for emphasis**: Use gold borders, text, or backgrounds for key elements
4. **Consistent spacing**: Use the 4px grid (Tailwind spacing scale)
5. **Charts need context**: Always include axis labels and legends
6. **Keep it dense**: Consulting slides should pack information—use grids and multiple elements
7. **Number all slides**: Always include `slideNumber` and `totalSlides` props
8. **Add slide labels**: Brief category labels help navigate the deck

## How to Make It Real

When implementing slide designs:

1. **Start with SlideDeck**: Wrap all slides in `<SlideDeck>`
2. **Choose the right variant**: title, content, section, or full
3. **Use existing components**: Import from `../components/...`
4. **Copy patterns from examples**: Reference the existing slides.astro for structure
5. **Test at 1920x1080**: Slides are designed for full HD presentation
6. **Check print/PDF export**: Slides should work when printed to PDF

## Resources
- Example deck: `/slides` page in this library
- Available charts: `/charts` page
- All components: `/components` page
- Design tokens: `src/styles/global.css`

---

# Visual Communication Framework

## Chart Selection Decision Tree

When generating slides, the system must ask:

### Question 1: What is your primary data type?

**TIME-BASED DATA (Trends, changes over time)**
→ **Use LineChart**
- ✅ Best for: Continuous data, trends, time series (5+ points)
- ✅ Emphasizes: Flow, progression, patterns
- ❌ Avoid: Fewer than 3 time points, categorical comparisons
- **Code**: `<LineChart width={640} height={320} data={...} />`

**CATEGORICAL COMPARISON (A vs B vs C)**
→ **Use BarChart** (vertical)
- ✅ Best for: Comparing values across discrete categories
- ✅ When: 3-10 categories, emphasizing magnitude/differences
- ✅ Variants: Grouped bars for 2-series comparison
- **Code**: `<BarChart data={...} orientation="vertical" />`

**RANKING/ORDERING (Top 5, leaderboards)**
→ **Use BarChart** (horizontal)
- ✅ Best for: Long category names, ranked lists, top-N
- ✅ When: 6+ items with clear hierarchy
- **Code**: `<BarChart data={...} orientation="horizontal" />`

**PROPORTION/PART-TO-WHOLE (Percentages, completion)**
→ **Use MiniDonut** or **StackedBar**
- ✅ MiniDonut: Single percentage or completion metric
- ✅ StackedBar: Multiple proportions over time
- ❌ Never: Pie charts (donuts are cleaner, readable)
- **Code**: `<MiniDonut value={78} size={64} />`

**RELATIONSHIPS/CONNECTIONS (Network, dependencies)**
→ **Use NetworkGraph**
- ✅ Best for: Nodes and edges, systems architecture, relationships
- ✅ When: Showing flows, dependencies, entity connections
- **Code**: `<NetworkGraph nodes={...} edges={...} />`

**PROCESS/WORKFLOW (Steps, stages, swimlanes)**
→ **Use ProcessFlowChart** (new)
- ✅ Best for: Sequential processes with handoffs
- ✅ When: Multi-step flows across departments/phases
- **Code**: `<ProcessFlowChart nodes={...} swimlanes={...} />`

---

## Layout Selection by Content Structure

### Decision Matrix: What layout matches your content?

| Content Type | Layout Pattern | Why It Works |
|-------------|----------------|--------------|
| **Single Chart + Metrics** | Chart (70%) + Sidebar (30%) | Visual dominance for data, supporting context |
| **Before/After Comparison** | 2-Column Equal Split | Creates tension, easy A/B comparison |
| **3 Concepts/Pillars** | 3-Column Grid | Visual balance, equal weighting |
| **4+ Metrics Only** | 4-Column Grid | Dashboard-style density |
| **Timeline/Process** | Vertical Stack with Connectors | Shows progression, keeps narrative flow |
| **Single Key Number** | Centered Full-Bleed | Maximum impact for hero metric |
| **Complex System** | Main (60%) + Details (40%) | Overview + drill-down architecture |

### Layout Implementation Patterns

**Chart + Sidebar** (for data-heavy slides)
```astro
<div class="flex gap-6 h-full">
  <div class="flex-1 min-w-0">
    <LineChart width={640} height={360} data={timeSeriesData} />
  </div>
  <div class="w-72 flex flex-col gap-4">
    <Card class="p-4 flex-1">
      <span class="font-mono text-xs text-gold-text uppercase">Key Metric</span>
      <p class="font-[family-name:var(--font-primary)] text-3xl text-fg-primary">+142%</p>
    </Card>
    <!-- More context cards -->
  </div>
</div>
```

**Split Comparison** (for before/after, current/future)
```astro
<div class="grid grid-cols-2 gap-6 h-full">
  <Card class="p-5 h-full flex flex-col border-l-4 border-l-amber/50">
    <div class="flex items-center justify-between mb-4 pb-3 border-b border-amber/20">
      <h3 class="font-mono text-xs text-amber uppercase tracking-wider">Current State</h3>
      <Badge text="Before" variant="outline" />
    </div>
    <ul class="space-y-4 flex-1">
      <li class="flex items-start gap-3 py-1">
        <span class="text-amber mt-0.5">×</span>
        <span>Problem point</span>
      </li>
    </ul>
  </Card>
  <Card class="p-5 h-full flex flex-col border-l-4 border-l-gold">
    <!-- Mirror structure with gold accents -->
  </Card>
</div>
```

**3-Pillar Grid** (for concept breakdown)
```astro
<div class="grid grid-cols-3 gap-5 h-full">
  <Card class="p-5 h-full flex flex-col">
    <div class="flex items-center gap-3 mb-4 pb-3 border-b border-gold/10">
      <span class="w-8 h-8 rounded bg-gold/10 flex items-center justify-center text-gold">1</span>
      <span class="font-mono text-[10px] text-gold-text uppercase">Pillar 1</span>
    </div>
    <p class="text-sm flex-1">Description here...</p>
    <ul class="text-xs space-y-1.5 mt-4">...</ul>
  </Card>
  <!-- Repeat for pillars 2 and 3 -->
</div>
```

---

## Color Psychology in Slides

### Strategic Color Usage

**Gold (#D4A853)** - Use for:
- Your solution, your company, positive outcomes
- Primary call-to-action
- Success metrics and achievements
- Headers and key emphasis

**Amber (#B8860B)** - Use for:
- Secondary information, competitors
- Warning states (not critical)
- Alternative options
- Progress indicators

**Red/Burgundy** - Use for:
- Problems, friction points
- "Before" state in comparisons
- Critical warnings
- Cost/loss indicators

**Green** - Use for:
- Completion, success states
- Growth indicators
- "After" state in comparisons
- Go-live, approval

### Color Pattern Rules

1. **Maximum 3 data colors per slide** (primary, secondary, accent)
2. **Consistent meaning**: Gold = You/Good, Amber = Other/Neutral
3. **Gradients for progress**: Light to dark = beginning to end
4. **Never use color alone** for meaning (always pair with icon/text)

---

## Typography Hierarchy for Data Communication

### Type Scale for Visual Impact

```
Hero Numbers:     text-5xl font-primary text-fg-primary
Page Titles:      text-2xl font-medium text-fg-primary
Card Headers:     text-lg  font-medium text-fg-primary
Section Labels:   text-xs  font-mono text-gold-text uppercase tracking-wider
Body/Context:     text-sm  text-fg-secondary
Data Labels:      text-xs  text-fg-tertiary
```

### Typography Patterns

**Big Number + Context**
```astro
<div class="text-center">
  <p class="font-[family-name:var(--font-primary)] text-5xl text-gold">248%</p>
  <p class="font-mono text-xs text-gold-text uppercase tracking-wider mt-2">ROI Improvement</p>
  <p class="text-sm text-fg-tertiary mt-1">vs. previous quarter</p>
</div>
```

**Metric Card Pattern**
```astro
<Card class="p-5 flex items-center justify-between">
  <div>
    <span class="font-mono text-xs text-gold-text uppercase">Query Volume</span>
    <p class="font-[family-name:var(--font-primary)] text-3xl text-fg-primary mt-1">2.4M</p>
    <p class="text-xs text-fg-tertiary">queries/month</p>
  </div>
  <MiniDonut value={85} size={64} />
</Card>
```

---

## Anti-Patterns: What to Avoid

### Chart Anti-Patterns

❌ **Line chart for few data points** (< 5 points)  
→ Use BarChart instead - lines imply continuous flow

❌ **Pie charts**  
→ Use MiniDonut or StackedBar - pies are hard to compare

❌ **3D effects, shadows on charts**  
→ Use flat 2D - 3D distorts data perception

❌ **Dual Y-axes** without clear labeling  
→ Use separate charts or normalized values

❌ **Too many data series** (> 4) on one chart  
→ Break into small multiples or focus on top 3

### Layout Anti-Patterns

❌ **Mixed container types** in same grid (Card vs div)  
→ Use all Cards or all divs - mixed weights break rhythm

❌ **Random empty space** in cards  
→ Use `flex-1` and `justify-between` to fill space

❌ **Inconsistent spacing** (mixing gap-4 and gap-6 randomly)  
→ Use systematic spacing: 8px, 16px, 24px scale

❌ **Decorative graphics** that don't convey data  
→ Every visual element must communicate information

---

## Skill Prompting Framework

When a user requests slide generation, the system should ask these follow-up questions:

### Step 1: Content Discovery
**"What is the main message of this slide?"**
- [ ] Comparison (A vs B)
- [ ] Trend over time
- [ ] Process/sequence
- [ ] Structure/system
- [ ] Single metric highlight
- [ ] Concept explanation

### Step 2: Data Characterization
**"Describe your data:"**
- How many data points? (1, 2-4, 5-10, 10+)
- Is there a time component?
- Are you comparing categories or showing relationships?
- Any specific values that need emphasis?

### Step 3: Visual Selection
**"Based on your data, I recommend: [Chart Type]**
- Why: [Reasoning based on decision tree above]
- Alternative: [If they want something else]

### Step 4: Layout Selection
**"How should we structure this?"**
- [ ] Full chart with sidebar metrics
- [ ] Split comparison layout
- [ ] Multi-column concept grid
- [ ] Timeline progression
- [ ] Hero metric centered

### Step 5: Refinement Questions
**"Any specific requirements?"**
- Color emphasis (problem/solution, before/after)
- Required branding elements
- Accessibility considerations
- Animation preferences

---

## Quick Reference: Chart-to-Data Mapping

| Data Goal | Best Chart | Layout | Example |
|-----------|-----------|--------|---------|
| Show growth over months | LineChart | Chart + 3 sidebar metrics | Revenue trend |
| Compare 4 products | BarChart (V) | 2x2 grid of cards | Feature comparison |
| Rank top 10 customers | BarChart (H) | Full-width chart | Leaderboard |
| Show 75% completion | MiniDonut | Centered with context | Project status |
| System architecture | NetworkGraph | Full canvas | Tech stack |
| 3-step process | ProcessFlow | Vertical timeline | Onboarding flow |
| Before vs After | Comparison | 2-column split | Transformation |

This framework ensures every visual decision is intentional, data-appropriate, and follows established design psychology principles.