@aexol/spectral 0.9.230 → 0.9.231

package/dist/designer/data/skills/index.js

@@ -0,0 +1,28 @@
+import { blogPost } from "./blog-post.js";
+import { critique } from "./critique.js";
+import { dashboard } from "./dashboard.js";
+import { designBrief } from "./design-brief.js";
+import { docsPage } from "./docs-page.js";
+import { magazinePoster } from "./magazine-poster.js";
+import { mobileApp } from "./mobile-app.js";
+import { motionFrames } from "./motion-frames.js";
+import { pricingPage } from "./pricing-page.js";
+import { saasLanding } from "./saas-landing.js";
+import { slideDeck } from "./slide-deck.js";
+import { socialCarousel } from "./social-carousel.js";
+import { webPrototype } from "./web-prototype.js";
+export const DESIGN_SKILLS = [
+    webPrototype,
+    saasLanding,
+    slideDeck,
+    mobileApp,
+    dashboard,
+    socialCarousel,
+    designBrief,
+    critique,
+    pricingPage,
+    docsPage,
+    blogPost,
+    magazinePoster,
+    motionFrames,
+];

package/dist/designer/data/skills/index.ts

@@ -0,0 +1,30 @@
+import type { DesignSkill } from "./design-skill.js";
+import { blogPost } from "./blog-post.js";
+import { critique } from "./critique.js";
+import { dashboard } from "./dashboard.js";
+import { designBrief } from "./design-brief.js";
+import { docsPage } from "./docs-page.js";
+import { magazinePoster } from "./magazine-poster.js";
+import { mobileApp } from "./mobile-app.js";
+import { motionFrames } from "./motion-frames.js";
+import { pricingPage } from "./pricing-page.js";
+import { saasLanding } from "./saas-landing.js";
+import { slideDeck } from "./slide-deck.js";
+import { socialCarousel } from "./social-carousel.js";
+import { webPrototype } from "./web-prototype.js";
+
+export const DESIGN_SKILLS: DesignSkill[] = [
+  webPrototype,
+  saasLanding,
+  slideDeck,
+  mobileApp,
+  dashboard,
+  socialCarousel,
+  designBrief,
+  critique,
+  pricingPage,
+  docsPage,
+  blogPost,
+  magazinePoster,
+  motionFrames,
+];

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

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

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

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

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

@@ -0,0 +1,70 @@
+export const magazinePoster = {
+    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/magazine-poster.ts

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,229 @@
+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

@@ -0,0 +1,232 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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"}