Liri Web Design Skill v2 - Style Exploration

Personal web design system that generates complete, production-ready design systems from color palettes.

Core Concept

code

Colors → Analysis → Named Palette → Unified Preview → Select Style → Build
                                          │
                              ┌───────────┴───────────┐
                              │  Single HTML file     │
                              │  with sidebar to      │
                              │  switch styles live   │
                              └───────────────────────┘

Key Innovation: One HTML file with sidebar navigation. Switch between all 5 styles instantly without changing tabs.

Core Philosophy

1. Palette as Experience

Colors must be felt, not just seen:

•Animated background mesh uses ALL palette colors
•Color-tinted shadows and glows reinforce the palette
•Every user-provided color appears meaningfully

2. Mode-Specific Design

Dark and light modes are NOT inversions:

•Each component has unique styling per mode
•Cards, buttons, inputs differ between modes
•Backgrounds treated differently

3. Full Palette Utilization

ALL colors user provides must appear prominently:

•60% Primary (CTAs, links, focus)
•30% Secondary (supporting elements)
•10% Tertiary+ (highlights, badges, charts)

4. Modern Icons

SVG only - NO emoji, NO unicode symbols. See: references/icons/ICONS.md

Sub-Agent Architecture

Small, focused agents with minimal context requirements.

Agent Pipeline

code

┌─────────────────┐
│ Color Analysis  │ ←── Raw hex colors
│    (~200 tok)   │
└────────┬────────┘
         │ temperature, mood, roles
         ▼
┌─────────────────┐
│ Palette Naming  │ ←── Analysis + existing names
│    (~300 tok)   │
└────────┬────────┘
         │ unique name
         ▼
┌─────────────────┐
│  Color Scale    │ ←── Each color separately
│ (~150 tok each) │
└────────┬────────┘
         │ 50-950 scales
         ▼
┌─────────────────┐
│ Background Mesh │ ←── Colors + style + mode
│    (~300 tok)   │
└────────┬────────┘
         │ animated CSS per style
         ▼
┌─────────────────┐
│Chart Generator  │ ←── Colors + chart type
│    (~350 tok)   │
└────────┬────────┘
         │ interactive charts
         ▼
┌─────────────────┐
│  Accessibility  │ ←── All color pairs
│    (~250 tok)   │
└────────┬────────┘
         │ contrast report
         ▼
┌─────────────────┐
│ Unified Preview │ ←── All outputs combined
│   Generator     │
└─────────────────┘
         │
         ▼
    preview.html

Sub-Agents

Agent	Purpose	Context
`color-analysis`	Extract temperature, mood, suggest roles	~200 tok
`palette-naming`	Generate unique evocative name	~300 tok
`color-scale`	Generate 50-950 scale per color	~150 tok
`background-mesh`	Animated background per style/mode	~300 tok
`chart-generator`	Interactive charts with hover values	~350 tok
`accessibility`	Validate contrast, suggest fixes	~250 tok

See: sub-agents/ARCHITECTURE.md for full details.

Unified Preview

Single File, All Styles

Instead of 5 separate HTML files:

•One HTML file with all 5 styles
•Sidebar navigation to switch instantly
•Live preview updates without reload
•Dark/light toggle in sidebar

Layout

code

┌─────────────────────────────────────────────────────────┐
│ ┌───────────┐                                           │
│ │  STYLES   │  ┌─────────────────────────────────────┐  │
│ │           │  │                                     │  │
│ │ ○ Minimal │  │       COMPONENT PREVIEW             │  │
│ │ ● Glass   │  │                                     │  │
│ │ ○ Bold    │  │    (updates live on click)          │  │
│ │ ○ Soft    │  │                                     │  │
│ │ ○ Neon    │  │                                     │  │
│ │           │  │                                     │  │
│ │───────────│  │                                     │  │
│ │  MODE     │  │                                     │  │
│ │ ● Dark    │  │                                     │  │
│ │ ○ Light   │  │                                     │  │
│ │           │  └─────────────────────────────────────┘  │
│ │───────────│                                           │
│ │ [Select]  │                                           │
│ └───────────┘                                           │
└─────────────────────────────────────────────────────────┘

How It Works

CSS uses data attributes for style switching:

css

[data-style="glass"][data-theme="dark"] .card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
}

[data-style="glass"][data-theme="light"] .card {
  background: rgba(255,255,255,0.7);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

JavaScript switches styles instantly:

javascript

document.documentElement.dataset.style = 'glass';
document.documentElement.dataset.theme = 'dark';

See: references/UNIFIED-PREVIEW.md for full architecture.

Preview Contents

Sidebar Sections

•Style selector (5 options with mini-preview)
•Mode toggle (dark/light with SVG icons)
•Jump-to navigation (anchor links)
•"Select This Style" button

Main Content Sections

Section	Contents
Colors	All palette colors, 50-950 scales, 60-30-10 demo, contrast pairs
Buttons	Primary, secondary, tertiary (using 3 colors), ghost, gradient, loading
Cards	6+ variants with mode-specific styling, gradients, mesh backgrounds
Charts	Bar, line, donut, progress - ALL interactive with hover values
Forms	Inputs, checkbox, radio, toggle - focus states with palette colors
Dropdowns	3 variants with SVG icons and color indicators
Animations	8 variations (fade, scale, slide, bounce, pulse, shake, rotate, glow)
Icons	8 style variations using palette colors
Alerts	Semantic + palette-colored variants

Directory Structure

code

liri-web-design-v2/
├── SKILL.md                          # This file
├── README.md
├── scripts/
│   ├── generate_unified_preview.py   # Main preview generator
│   ├── generate_color_scale.py
│   ├── oklch_utils.py
│   └── ...
├── sub-agents/
│   ├── ARCHITECTURE.md               # Sub-agent overview
│   ├── color-analysis.md
│   ├── palette-naming.md
│   ├── color-scale.md
│   ├── background-mesh.md
│   ├── chart-generator.md
│   ├── accessibility.md
│   └── style-generation.md
├── styles/
│   ├── minimal.md
│   ├── glass.md
│   ├── bold.md
│   ├── soft.md
│   └── neon.md
├── references/
│   ├── UNIFIED-PREVIEW.md            # Preview architecture
│   ├── icons/
│   │   └── ICONS.md                  # SVG icon reference
│   └── palettes/
│       └── {palette-name}/
│           ├── colors.json
│           ├── preview.html          # Single unified preview
│           └── ACTIVE.md             # Selected style
└── workflows/
    └── create-design-system.md

Workflow Summary

Step 1: Receive Colors

Parse and name colors (auto-suggest or user-provided names).

Step 2: Analyze Colors

xml

<sub-agent name="color-analysis-agent">
<input>colors: ["#ff7ac6", "#6298b0", "#ff798c", "#f6ab6e"]</input>
</sub-agent>

→ Temperature, mood, role suggestions

Step 3: Name Palette

xml

<sub-agent name="palette-naming-agent">
<input>analysis + existing_names</input>
</sub-agent>

→ Unique name like "neon-bittle"

Step 4: Generate Scales

xml

<sub-agent name="color-scale-agent">
<input>hex: "#ff7ac6", name: "pink"</input>
</sub-agent>

→ 50-950 scale per color

Step 5: Generate Unified Preview

Combines outputs from all agents into single HTML with:

•All 5 styles switchable via sidebar
•Dark/light mode toggle
•Interactive charts
•SVG icons throughout

Step 6: User Explores & Selects

•Opens single preview.html
•Clicks through styles in sidebar
•Toggles dark/light mode
•Clicks "Select This Style"

Step 7: Finalize

Create ACTIVE.md documenting selected style.

Critical Rules

DO

✓ Use ALL user-provided colors throughout ✓ Create distinct dark/light mode designs ✓ Use SVG icons exclusively ✓ Make charts interactive with hover states ✓ Generate single unified preview file ✓ Use focused sub-agents with minimal context

DON'T

✗ Ignore any user-provided colors ✗ Use same component styling for both modes ✗ Use emoji or unicode for icons ✗ Create static, non-interactive charts ✗ Generate separate files per style ✗ Load all context into single agent

Example Session

code

User: "Create design system from #ff7ac6, #6298b0, #ff798c, #f6ab6e"

Agent: 
  [color-analysis-agent] Analyzing colors...
    • Pink (#ff7ac6) - warm, playful, energetic
    • Teal (#6298b0) - cool, professional, balanced
    • Coral (#ff798c) - warm, friendly, vibrant
    • Amber (#f6ab6e) - warm, optimistic, inviting
  
  [palette-naming-agent] Generated name: "neon-bittle" ✓
  
  [color-scale-agent] Generated scales for all 4 colors
  
  [Generating unified preview...]
  
  ✅ Created: references/palettes/neon-bittle/preview.html
  
  Open the preview and use the sidebar to:
  • Switch between 5 styles (Minimal, Glass, Bold, Soft, Neon)
  • Toggle dark/light mode
  • Explore all components
  
  Click "Select This Style" when you find your favorite!

User: [Opens preview, clicks through styles, selects Glass]

Agent: ✅ Set "Glass" as active style for neon-bittle
  
  Created: references/palettes/neon-bittle/ACTIVE.md
  
  All future builds will use:
  • Frosted glass surfaces
  • 16px backdrop blur
  • Animated mesh background with all 4 colors
  • Mode-specific component styling
  
  Ready to build!

Orchestrator Agent

This skill has an associated orchestrator agent at .claude/agents/web-design.md that coordinates the sub-agents through a pipeline. The orchestrator:

•Analyzes colors for temperature, mood, and roles
•Generates unique palette names and color scales
•Creates animated mesh backgrounds per style/mode
•Generates interactive charts with hover states
•Validates accessibility and contrast ratios
•Produces single unified preview with all 5 styles

Efficiency Summary

Approach	Context Tokens	Files
Monolithic	~8,000+	5 HTML
Sub-agents	~3,500 total	1 HTML

Sub-agents enable:

•Parallel processing
•Targeted updates
•Reusable components
•Lower error rates