@aexol/spectral 0.9.270 → 0.9.271

package/dist/designer/data/skills/magazine-poster.ts

@@ -1,73 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-
-export const magazinePoster: DesignSkill = {
-    name: "magazine-poster",
-    scenario: "creative",
-    description:
-      "Editorial magazine poster or spread — bold typography, large-scale display font, dramatic image/color blocking. Magazine-cover aesthetic with strong visual hierarchy.",
-    outputKind: "html",
-    workflow: `# Magazine Poster Skill
-
-Produce an editorial magazine poster or spread. Bold typography, large-scale display font, dramatic layout — the kind of image that could be a magazine cover or poster.
-
-## Phase 1 — Determine Format
-
-- **Poster** (A3-ish: 960×1358px or similar portrait ratio) — single bold composition
-- **Magazine spread** (landscape: 1440×960px or similar) — two-page feel with gutter
-- **Social cover** (square: 1080×1080px) — optimized for social sharing
-
-## Phase 2 — Composition Modes
-
-### Mode A: Typography-first
-Big display text dominates. Color block background, minimal elements. Font scale carries the energy.
-\`\`\`css
-.poster { width: 960px; height: 1358px; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 80px; position: relative; overflow: hidden; }
-.poster-eyebrow { font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 24px; }
-.poster-headline { font-family: var(--font-display, var(--font-body)); font-size: 96px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
-.poster-subhead { font-size: 24px; color: var(--muted); margin-top: 32px; max-width: 600px; line-height: 1.5; }
-.poster-issue { position: absolute; bottom: 60px; left: 80px; font-size: 14px; color: var(--muted); }
-\`\`\`
-
-### Mode B: Image-first
-Large image dominates 70% of the canvas, typography overlays or sits below.
-\`\`\`css
-.poster-image-first { width: 960px; height: 1358px; display: grid; grid-template-rows: 1fr auto; background: var(--bg); }
-.poster-image { width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg, var(--accent), var(--surface)); }
-.poster-text-block { padding: 48px 64px; }
-\`\`\`
-
-### Mode C: Split-screen
-Two-panel composition — color block left, image right (or vice versa).
-\`\`\`css
-.poster-split { width: 1440px; height: 960px; display: grid; grid-template-columns: 1fr 1fr; }
-.poster-split-panel { display: flex; flex-direction: column; justify-content: center; padding: 80px; }
-.poster-split-panel.left { background: var(--accent); color: var(--accent-on, white); }
-.poster-split-panel.right { background: var(--bg); }
-\`\`\`
-
-## Phase 3 — Typography Scale
-
-\`\`\`css
-/* Magazine typography is dramatic — go big */
-.display-xxl { font-size: 120px; font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
-.display-xl { font-size: 80px; font-weight: 800; line-height: 1.0; letter-spacing: -0.03em; }
-.display-lg { font-size: 56px; font-weight: 700; line-height: 1.1; }
-.poster-body { font-size: 18px; line-height: 1.6; }
-.poster-meta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
-\`\`\`
-
-## Phase 4 — Design Elements
-
-- **Accent shapes**: Use ::before/::after pseudo-elements for geometric accents (circles, lines, color blocks)
-- **Photo treatment**: Use mix-blend-mode on images over color backgrounds
-- **Grid lines**: Thin horizontal/vertical rules as structural elements
-- **Page numbers**: ALWAYS include an issue/volume/page-number block
-- **Date line**: MONTH YYYY format in the masthead area
-
-## Phase 5 — Anti-Kitsch Rules
-- No emoji in editorial design
-- Use the design system's display font at scale — not a safe web font
-- Headline should create tension: unexpected word break, dramatic line split, or bold claim
-- One focal point per poster — don't make everything compete
-- white-space is intentional, not leftover`,
-  };

package/dist/designer/data/skills/mobile-app.d.ts

@@ -1,3 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-export declare const mobileApp: DesignSkill;
-//# sourceMappingURL=mobile-app.d.ts.map

package/dist/designer/data/skills/mobile-app.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mobile-app.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/mobile-app.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,WAqOrB,CAAC"}

package/dist/designer/data/skills/mobile-app.js

@@ -1,229 +0,0 @@
-export const mobileApp = {
-    name: "mobile-app",
-    scenario: "design",
-    description: "Mobile app prototype. Phone-frame-contained HTML with iOS/Android patterns, touch targets, and native-feel interactions.",
-    outputKind: "html",
-    workflow: `# Mobile App Prototype Skill
-
-Produce a mobile app prototype as a single HTML file. Phone-frame contained, touch-friendly, native-feel interactions.
-
-## Phase 0 — Pre-flight
-
-1. Read the design system for color tokens.
-2. Determine: app name, screens needed (2-5), platform style (iOS or Material).
-3. Vocalize: "I'll build [app name] with [N] screens: [screen names]. [iOS/Material] patterns."
-
-## Phase 1 — Shell with Phone Frame
-
-Create \`app.html\` with a phone frame wrapper:
-
-\`\`\`html
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>App Name</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; }
-
-    :root {
-      --phone-w: 390px;
-      --phone-h: 844px;
-      --phone-radius: 44px;
-      --safe-top: 54px;
-      --safe-bottom: 34px;
-      /* Design system tokens */
-    }
-
-    body {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      background: #f0f0f0;
-      font-family: -apple-system, "SF Pro Text", "Inter", sans-serif;
-    }
-
-    .phone-frame {
-      width: var(--phone-w);
-      height: var(--phone-h);
-      background: var(--color-bg-primary);
-      border-radius: var(--phone-radius);
-      overflow: hidden;
-      position: relative;
-      box-shadow: 0 0 0 8px #1a1a1a, 0 0 0 10px #333, 0 20px 60px rgba(0,0,0,0.3);
-    }
-
-    .status-bar {
-      height: var(--safe-top);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 24px;
-      font-size: 14px;
-      font-weight: 600;
-      background: var(--color-bg-primary);
-    }
-
-    .screen {
-      position: absolute;
-      top: var(--safe-top);
-      left: 0;
-      right: 0;
-      bottom: var(--safe-bottom);
-      display: none;
-      flex-direction: column;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-    .screen.active { display: flex; }
-
-    .bottom-nav {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: var(--safe-bottom);
-      display: flex;
-      border-top: 1px solid var(--color-border);
-      background: var(--color-bg-surface, var(--color-bg-primary));
-    }
-    .nav-item {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 2px;
-      font-size: 10px;
-      color: var(--color-text-secondary);
-      cursor: pointer;
-      user-select: none;
-    }
-    .nav-item.active { color: var(--color-accent); }
-    .nav-icon { font-size: 22px; line-height: 1; }
-  </style>
-</head>
-<body>
-  <div class="phone-frame">
-    <div class="status-bar">
-      <span>9:41</span>
-      <span>●●●○ WiFi ▮▮▮</span>
-    </div>
-
-    <div class="screen active" id="screen-home"><!-- Home content --></div>
-    <div class="screen" id="screen-detail"><!-- Detail content --></div>
-    <div class="screen" id="screen-settings"><!-- Settings content --></div>
-
-    <div class="bottom-nav">
-      <div class="nav-item active" onclick="showScreen('home')">
-        <span class="nav-icon">🏠</span>Home
-      </div>
-      <div class="nav-item" onclick="showScreen('detail')">
-        <span class="nav-icon">🔍</span>Search
-      </div>
-      <div class="nav-item" onclick="showScreen('settings')">
-        <span class="nav-icon">👤</span>Profile
-      </div>
-    </div>
-  </div>
-
-  <script>
-    function showScreen(id) {
-      document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
-      document.getElementById('screen-' + id).classList.add('active');
-      document.querySelectorAll('.nav-item').forEach((n, i) => {
-        n.classList.toggle('active', n.textContent.trim().toLowerCase().includes(id));
-      });
-    }
-  </script>
-</body>
-</html>
-\`\`\`
-
-## Phase 2 — Component Patterns
-
-### List Item (44px minimum tap target)
-\`\`\`css
-.list-item {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  min-height: 44px;
-  gap: 12px;
-  border-bottom: 0.5px solid var(--color-border);
-  cursor: pointer;
-}
-.list-item:active { background: var(--color-bg-hover, rgba(0,0,0,0.04)); }
-.list-item-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-accent); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }
-.list-item-content { flex: 1; }
-.list-item-title { font-size: 16px; font-weight: 500; }
-.list-item-subtitle { font-size: 14px; color: var(--color-text-secondary); margin-top: 2px; }
-.list-item-trailing { color: var(--color-text-secondary); font-size: 14px; }
-\`\`\`
-
-### Card
-\`\`\`css
-.card {
-  background: var(--color-bg-surface, #fff);
-  border-radius: 16px;
-  padding: 16px;
-  margin: 8px 16px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
-}
-.card-image { width: 100%; height: 180px; border-radius: 12px; object-fit: cover; background: var(--color-bg-secondary); }
-.card-title { font-size: 17px; font-weight: 600; margin: 12px 0 4px; }
-.card-subtitle { font-size: 14px; color: var(--color-text-secondary); }
-\`\`\`
-
-### Input Field
-\`\`\`css
-.input-group { padding: 8px 16px; }
-.input-label { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 4px; display: block; }
-.input-field {
-  width: 100%;
-  height: 44px;
-  padding: 0 12px;
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  font-size: 16px;
-  background: var(--color-bg-secondary, #f5f5f5);
-  outline: none;
-}
-.input-field:focus { border-color: var(--color-accent); }
-\`\`\`
-
-### Button
-\`\`\`css
-.btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  padding: 0 24px;
-  border-radius: 14px;
-  font-size: 17px;
-  font-weight: 600;
-  border: none;
-  cursor: pointer;
-  margin: 8px 16px;
-  user-select: none;
-}
-.btn-primary { background: var(--color-accent); color: #fff; }
-.btn-secondary { background: var(--color-bg-secondary, #f0f0f0); color: var(--color-text-primary); }
-.btn:active { opacity: 0.8; transform: scale(0.98); }
-\`\`\`
-
-## Phase 3 — Mobile-Specific Rules
-
-- Minimum touch target: 44×44px
-- Font sizes: 13px (captions), 15px (body), 17px (headlines), 22px (titles), 28px (hero)
-- Padding: 16px horizontal standard, 8-16px card margins
-- Never use hover effects — use :active for tap feedback
-- Scrollable content uses \`overflow-y: auto; -webkit-overflow-scrolling: touch;\`
-- Status bar: 54px height standard, dark or light based on design system
-- Bottom safe area: 34px for home indicator
-- Images: use \`object-fit: cover\` with fixed aspect ratios, gradient placeholders
-- No hamburger menus — use tab bar navigation (3-5 items)`,
-};

package/dist/designer/data/skills/mobile-app.ts

@@ -1,232 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-
-export const mobileApp: DesignSkill = {
-    name: "mobile-app",
-    scenario: "design",
-    description:
-      "Mobile app prototype. Phone-frame-contained HTML with iOS/Android patterns, touch targets, and native-feel interactions.",
-    outputKind: "html",
-    workflow: `# Mobile App Prototype Skill
-
-Produce a mobile app prototype as a single HTML file. Phone-frame contained, touch-friendly, native-feel interactions.
-
-## Phase 0 — Pre-flight
-
-1. Read the design system for color tokens.
-2. Determine: app name, screens needed (2-5), platform style (iOS or Material).
-3. Vocalize: "I'll build [app name] with [N] screens: [screen names]. [iOS/Material] patterns."
-
-## Phase 1 — Shell with Phone Frame
-
-Create \`app.html\` with a phone frame wrapper:
-
-\`\`\`html
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>App Name</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; }
-
-    :root {
-      --phone-w: 390px;
-      --phone-h: 844px;
-      --phone-radius: 44px;
-      --safe-top: 54px;
-      --safe-bottom: 34px;
-      /* Design system tokens */
-    }
-
-    body {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      background: #f0f0f0;
-      font-family: -apple-system, "SF Pro Text", "Inter", sans-serif;
-    }
-
-    .phone-frame {
-      width: var(--phone-w);
-      height: var(--phone-h);
-      background: var(--color-bg-primary);
-      border-radius: var(--phone-radius);
-      overflow: hidden;
-      position: relative;
-      box-shadow: 0 0 0 8px #1a1a1a, 0 0 0 10px #333, 0 20px 60px rgba(0,0,0,0.3);
-    }
-
-    .status-bar {
-      height: var(--safe-top);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 24px;
-      font-size: 14px;
-      font-weight: 600;
-      background: var(--color-bg-primary);
-    }
-
-    .screen {
-      position: absolute;
-      top: var(--safe-top);
-      left: 0;
-      right: 0;
-      bottom: var(--safe-bottom);
-      display: none;
-      flex-direction: column;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-    .screen.active { display: flex; }
-
-    .bottom-nav {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: var(--safe-bottom);
-      display: flex;
-      border-top: 1px solid var(--color-border);
-      background: var(--color-bg-surface, var(--color-bg-primary));
-    }
-    .nav-item {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 2px;
-      font-size: 10px;
-      color: var(--color-text-secondary);
-      cursor: pointer;
-      user-select: none;
-    }
-    .nav-item.active { color: var(--color-accent); }
-    .nav-icon { font-size: 22px; line-height: 1; }
-  </style>
-</head>
-<body>
-  <div class="phone-frame">
-    <div class="status-bar">
-      <span>9:41</span>
-      <span>●●●○ WiFi ▮▮▮</span>
-    </div>
-
-    <div class="screen active" id="screen-home"><!-- Home content --></div>
-    <div class="screen" id="screen-detail"><!-- Detail content --></div>
-    <div class="screen" id="screen-settings"><!-- Settings content --></div>
-
-    <div class="bottom-nav">
-      <div class="nav-item active" onclick="showScreen('home')">
-        <span class="nav-icon">🏠</span>Home
-      </div>
-      <div class="nav-item" onclick="showScreen('detail')">
-        <span class="nav-icon">🔍</span>Search
-      </div>
-      <div class="nav-item" onclick="showScreen('settings')">
-        <span class="nav-icon">👤</span>Profile
-      </div>
-    </div>
-  </div>
-
-  <script>
-    function showScreen(id) {
-      document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
-      document.getElementById('screen-' + id).classList.add('active');
-      document.querySelectorAll('.nav-item').forEach((n, i) => {
-        n.classList.toggle('active', n.textContent.trim().toLowerCase().includes(id));
-      });
-    }
-  </script>
-</body>
-</html>
-\`\`\`
-
-## Phase 2 — Component Patterns
-
-### List Item (44px minimum tap target)
-\`\`\`css
-.list-item {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  min-height: 44px;
-  gap: 12px;
-  border-bottom: 0.5px solid var(--color-border);
-  cursor: pointer;
-}
-.list-item:active { background: var(--color-bg-hover, rgba(0,0,0,0.04)); }
-.list-item-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-accent); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }
-.list-item-content { flex: 1; }
-.list-item-title { font-size: 16px; font-weight: 500; }
-.list-item-subtitle { font-size: 14px; color: var(--color-text-secondary); margin-top: 2px; }
-.list-item-trailing { color: var(--color-text-secondary); font-size: 14px; }
-\`\`\`
-
-### Card
-\`\`\`css
-.card {
-  background: var(--color-bg-surface, #fff);
-  border-radius: 16px;
-  padding: 16px;
-  margin: 8px 16px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
-}
-.card-image { width: 100%; height: 180px; border-radius: 12px; object-fit: cover; background: var(--color-bg-secondary); }
-.card-title { font-size: 17px; font-weight: 600; margin: 12px 0 4px; }
-.card-subtitle { font-size: 14px; color: var(--color-text-secondary); }
-\`\`\`
-
-### Input Field
-\`\`\`css
-.input-group { padding: 8px 16px; }
-.input-label { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 4px; display: block; }
-.input-field {
-  width: 100%;
-  height: 44px;
-  padding: 0 12px;
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  font-size: 16px;
-  background: var(--color-bg-secondary, #f5f5f5);
-  outline: none;
-}
-.input-field:focus { border-color: var(--color-accent); }
-\`\`\`
-
-### Button
-\`\`\`css
-.btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  padding: 0 24px;
-  border-radius: 14px;
-  font-size: 17px;
-  font-weight: 600;
-  border: none;
-  cursor: pointer;
-  margin: 8px 16px;
-  user-select: none;
-}
-.btn-primary { background: var(--color-accent); color: #fff; }
-.btn-secondary { background: var(--color-bg-secondary, #f0f0f0); color: var(--color-text-primary); }
-.btn:active { opacity: 0.8; transform: scale(0.98); }
-\`\`\`
-
-## Phase 3 — Mobile-Specific Rules
-
-- Minimum touch target: 44×44px
-- Font sizes: 13px (captions), 15px (body), 17px (headlines), 22px (titles), 28px (hero)
-- Padding: 16px horizontal standard, 8-16px card margins
-- Never use hover effects — use :active for tap feedback
-- Scrollable content uses \`overflow-y: auto; -webkit-overflow-scrolling: touch;\`
-- Status bar: 54px height standard, dark or light based on design system
-- Bottom safe area: 34px for home indicator
-- Images: use \`object-fit: cover\` with fixed aspect ratios, gradient placeholders
-- No hamburger menus — use tab bar navigation (3-5 items)`,
-  };

package/dist/designer/data/skills/motion-frames.d.ts

@@ -1,3 +0,0 @@
-import type { DesignSkill } from "./design-skill.js";
-export declare const motionFrames: DesignSkill;
-//# sourceMappingURL=motion-frames.d.ts.map

package/dist/designer/data/skills/motion-frames.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"motion-frames.d.ts","sourceRoot":"","sources":["../../../../src/designer/data/skills/motion-frames.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,YAAY,EAAE,WAyHxB,CAAC"}

package/dist/designer/data/skills/motion-frames.js

@@ -1,121 +0,0 @@
-export const motionFrames = {
-    name: "motion-frames",
-    scenario: "creative",
-    description: "CSS animation and motion design frames. Keyframe-driven animations, scroll-triggered reveals, staggered lists, loading states, and page transitions — all CSS-only where possible.",
-    outputKind: "html",
-    workflow: `# Motion Frames Skill
-
-Produce a motion design showcase as a single HTML file. CSS keyframe animations, scroll-triggered effects, and subtle micro-interactions — no JavaScript libraries.
-
-## Phase 1 — Animation Vocabulary
-
-### Entrance Animations
-\`\`\`css
-/* Fade up */
-@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
-
-/* Scale in */
-@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
-
-/* Slide from left */
-@keyframes slideLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
-
-/* Reveal by clip-path */
-@keyframes clipReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
-\`\`\`
-
-### Scroll-Triggered Reveals
-\`\`\`css
-/* Use scroll-driven animations (modern browsers) */
-.reveal {
-  animation: fadeUp 0.6s ease-out;
-  animation-timeline: view();
-  animation-range: entry 20% cover 40%;
-}
-
-/* Fallback: use Intersection Observer pattern in a small script */
-.reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
-.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }
-\`\`\`
-
-### Staggered Lists
-\`\`\`css
-.stagger-list > * { opacity: 0; animation: fadeUp 0.4s ease-out forwards; }
-.stagger-list > *:nth-child(1) { animation-delay: 0ms; }
-.stagger-list > *:nth-child(2) { animation-delay: 80ms; }
-.stagger-list > *:nth-child(3) { animation-delay: 160ms; }
-.stagger-list > *:nth-child(4) { animation-delay: 240ms; }
-.stagger-list > *:nth-child(5) { animation-delay: 320ms; }
-.stagger-list > *:nth-child(6) { animation-delay: 400ms; }
-/* Continue pattern: delay = (n-1) * 80ms up to n=20 */
-\`\`\`
-
-### Loading States
-\`\`\`css
-/* Spinner */
-@keyframes spin { to { transform: rotate(360deg); } }
-.spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; }
-
-/* Skeleton pulse */
-@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
-.skeleton { background: linear-gradient(90deg, var(--surface) 25%, color-mix(in oklab, var(--surface) 50%, var(--bg)) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 4px; }
-
-/* Progress bar */
-@keyframes progress { from { width: 0%; } to { width: 100%; } }
-.progress-bar { height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; }
-.progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; animation: progress 2s ease-out forwards; }
-\`\`\`
-
-### Hover Micro-Interactions
-\`\`\`css
-/* Subtle card lift */
-.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
-.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
-
-/* Button press */
-.btn-press { transition: transform 0.1s ease; }
-.btn-press:active { transform: scale(0.97); }
-
-/* Link underline slide */
-.link-slide { position: relative; text-decoration: none; }
-.link-slide::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 1.5px; background: var(--accent); transition: width 0.3s ease; }
-.link-slide:hover::after { width: 100%; }
-
-/* Image zoom */
-.img-zoom { overflow: hidden; border-radius: 8px; }
-.img-zoom img { transition: transform 0.3s ease; }
-.img-zoom:hover img { transform: scale(1.05); }
-\`\`\`
-
-### Page Transitions (View Transitions API)
-\`\`\`css
-/* Add to :root for cross-fade transitions */
-::view-transition-old(root),
-::view-transition-new(root) {
-  animation-duration: 0.4s;
-}
-
-/* Named transitions for specific elements */
-.hero-title { view-transition-name: hero-title; }
-.hero-image { view-transition-name: hero-image; }
-\`\`\`
-
-## Phase 2 — Showcase Layout
-
-Build a single HTML page demonstrating each animation category:
-1. **Entrance section** — cards/stats that animate in on load
-2. **Scroll reveal section** — content that appears as you scroll
-3. **Staggered list** — feature list with cascading reveal
-4. **Loading section** — skeleton screens next to real content
-5. **Hover gallery** — cards with different hover treatments
-6. **Interactive section** — buttons and links with micro-interactions
-
-## Phase 3 — Motion Design Rules
-- **Duration**: 150-400ms for micro-interactions; 400-800ms for entrances; DON'T use values above 1s
-- **Easing**: ease-out for entrances (fast start, settle gracefully); ease-in-out for continuous animations
-- **Stagger**: 60-100ms between children; maximum 20 items in a stagger
-- **Performance**: animate transform and opacity only (no width/height/margin animations)
-- **Respect reduced motion**: wrap animations in @media (prefers-reduced-motion: no-preference)
-- **No animation on every element** — pick 2-3 key moments per page
-- **Animation should communicate** — loading state, new content arriving, affordance — not just decoration`,
-};