@mthanh/vespercli 2.2.0 → 2.3.0

package/assets/copilot/packs/frontend/skills/design-taste-frontend/assets/scenes/stage.css

@@ -0,0 +1,28 @@
+/* tasteskill / scenes / stage.css — the held stage under every scroll scene (references/scenes.md).
+   Without .is-live (no script, a failed CDN, reduced motion, a phone set to 'rest') a scene is an ordinary
+   section showing its finished composition. With it, the section is (hold + 1) screens tall and the
+   stage sticks to the viewport for the hold. */
+
+.scene { position: relative; }
+.scene > .scene-stage { position: relative; }
+
+html.js .scene.is-live { height: calc((var(--hold, 2) + 1) * 100svh); }
+html.js .scene.is-live > .scene-stage {
+  position: sticky;
+  top: 0;
+  height: 100svh;
+  overflow: clip;       /* clip, not hidden: hidden would make the stage a scroll container */
+  contain: layout paint;
+}
+
+/* Everything a scene moves is composited; nothing it moves is laid out again. */
+.scene.is-live [data-move] { will-change: transform, opacity; }
+
+/* Lenis */
+html.is-smooth { scroll-behavior: auto; }
+html.is-smooth body { overscroll-behavior: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  html.js .scene.is-live { height: auto; }
+  html.js .scene.is-live > .scene-stage { position: relative; height: auto; }
+}

package/assets/copilot/packs/frontend/skills/design-taste-frontend/assets/scenes/stage.js

@@ -0,0 +1,133 @@
+// tasteskill / scenes / stage.js — the shared stage every scroll scene runs on (references/scenes.md).
+//
+// A scene is a tall section whose stage sticks to the viewport while the page scrolls past it; a GSAP
+// timeline is scrubbed by that scroll. The page always scrolls natively (no wheel capture), the
+// scrollbar always tells the truth, and the finished composition is what reduced motion, no script and
+// a failed CDN all show.
+//
+// Load at the end of <body>, in this order (versions pinned):
+//   <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+//   <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
+//   <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js"></script>  (only if a scene splits text)
+//   <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.min.js"></script>     (optional smoothing)
+//   <script src="assets/scenes/stage.js"></script>
+//   <script src="assets/scenes/<scene>.js"></script>
+// and keep the one-line <script>document.documentElement.classList.add('js')</script> in <head>.
+//
+//   Stage.smooth()                         weighted wheel scrolling (Lenis), off for touch and reduced motion
+//   Stage.scene(root, { hold, scrub, build, phone, rest })
+//   Stage.split(el, 'lines' | 'words' | 'chars')   masked split text, SplitText when loaded
+//   Stage.ready()                          resolves when fonts and the scenes' pictures are ready
+//   Stage.init()                           starts every <section class="scene" data-scene="<id>"> on the page
+//
+// A page:  Stage.smooth(); Stage.init();
+(() => {
+  const html = document.documentElement;
+  const mq = (q) => window.matchMedia(q).matches;
+  const live = !!(window.gsap && window.ScrollTrigger);
+  if (live) gsap.registerPlugin(ScrollTrigger);
+  if (live && window.SplitText) gsap.registerPlugin(SplitText);
+
+  const Stage = {
+    live,
+    get reduced() { return mq('(prefers-reduced-motion: reduce)'); },
+    get phone() { return mq('(max-width: 767px)'); },
+    get touch() { return mq('(pointer: coarse)'); },
+    lenis: null,
+    scenes: [],
+  };
+
+  // Weighted wheel scrolling. lerp 0.1-0.14 feels heavy without lagging behind the hand; touch keeps the
+  // phone's own scrolling, and reduced motion keeps the browser's.
+  Stage.smooth = ({ lerp = 0.12 } = {}) => {
+    if (!live || !window.Lenis || Stage.reduced || Stage.touch || Stage.lenis) return Stage.lenis;
+    const lenis = new Lenis({ lerp, smoothWheel: true, anchors: true, autoRaf: false });
+    lenis.on('scroll', ScrollTrigger.update);
+    gsap.ticker.add((t) => lenis.raf(t * 1000));
+    gsap.ticker.lagSmoothing(0);
+    html.classList.add('is-smooth');
+    Stage.lenis = lenis;
+    return lenis;
+  };
+
+  // One scroll scene.
+  //   root   <section class="scene"> holding one <div class="scene-stage">
+  //   hold   screens of scroll the stage is held for (1-4); the section is (hold + 1) screens tall
+  //   scrub  true = locked to the scrollbar; a number = seconds of catch-up (0.3-0.8 reads as weight)
+  //   build(tl, ctx)  add the tweens to tl; the timeline runs 0 → 1 over the hold. ctx: { root, stage, phone, q }
+  //   phone  'same' (default) | 'rest' (the phone gets the finished composition) | { hold, build }
+  //   rest(ctx)  optional: anything extra the finished composition needs (most scenes need nothing)
+  // Sets --p (0-1) and data-beat on root, so CSS and captions can follow the scene too.
+  Stage.scene = (root, opts = {}) => {
+    if (!root) return null;
+    const { hold = 2, scrub = true, build, phone = 'same', rest, beats = 0 } = opts;
+    const stage = root.querySelector(':scope > .scene-stage') || root.firstElementChild;
+    const q = (sel) => [...root.querySelectorAll(sel)];
+    const toRest = (ctx) => { root.classList.remove('is-live'); root.classList.add('is-rest'); root.style.removeProperty('--hold'); if (rest) rest(ctx); };
+    if (!live) { toRest({ root, stage, phone: Stage.phone, q }); return null; }
+    const mm = gsap.matchMedia();
+    mm.add({ motion: '(prefers-reduced-motion: no-preference)', phone: '(max-width: 767px)' }, (c) => {
+      const isPhone = c.conditions.phone;
+      const ctx = { root, stage, phone: isPhone, q };
+      const plan = isPhone ? (phone === 'rest' ? null : phone === 'same' ? { hold, build } : { hold: phone.hold ?? hold, build: phone.build ?? build }) : { hold, build };
+      if (!c.conditions.motion || !plan || !plan.build) { toRest(ctx); return () => root.classList.remove('is-rest'); }
+      root.classList.remove('is-rest');
+      root.classList.add('is-live');
+      root.style.setProperty('--hold', plan.hold);
+      const tl = gsap.timeline({
+        defaults: { ease: 'none' },
+        scrollTrigger: {
+          trigger: root, start: 'top top', end: 'bottom bottom', scrub, invalidateOnRefresh: true,
+          onUpdate: (self) => {
+            root.style.setProperty('--p', self.progress.toFixed(4));
+            if (beats) root.dataset.beat = String(Math.min(beats - 1, Math.floor(self.progress * beats)));
+          },
+        },
+      });
+      plan.build(tl, ctx);
+      // pad the timeline to exactly 1 so positions in build() read as fractions of the hold
+      if (tl.duration() < 1) tl.to({}, { duration: 1 - tl.duration() }, tl.duration());
+      return () => { root.classList.remove('is-live'); root.style.removeProperty('--hold'); root.style.removeProperty('--p'); };
+    });
+    Stage.scenes.push(mm);
+    return mm;
+  };
+
+  // Masked split text. Lines rise out of their own mask; words and characters are for short headings.
+  Stage.split = (el, type = 'lines') => {
+    if (!el) return [];
+    if (window.SplitText && live) {
+      const s = SplitText.create(el, { type: type === 'lines' ? 'lines' : type === 'words' ? 'lines,words' : 'lines,words,chars', mask: 'lines', aria: 'auto', autoSplit: false });
+      return type === 'lines' ? s.lines : type === 'words' ? s.words : s.chars;
+    }
+    // fallback: words in inline-block spans, the full text kept for screen readers
+    if (!el.dataset.split) {
+      el.setAttribute('aria-label', el.textContent.trim());
+      el.innerHTML = el.textContent.trim().split(/\s+/).map((w) => `<span aria-hidden="true" style="display:inline-block">${w}</span>`).join(' ');
+      el.dataset.split = 'words';
+    }
+    return [...el.children];
+  };
+
+  // Fonts and the scenes' pictures decide every height a trigger measures; refresh once they are in.
+  Stage.ready = () => {
+    const imgs = [...document.querySelectorAll('.scene img')].map((i) => (i.complete ? null : i.decode().catch(() => {}))).filter(Boolean);
+    return Promise.all([document.fonts ? document.fonts.ready : null, ...imgs]).then(() => { if (live) ScrollTrigger.refresh(); });
+  };
+
+  // Every <section class="scene" data-scene="<id>" data-options='{"hold":3}'> on the page, started by
+  // the scene file of that id (assets/scenes/<id>.js registers Scenes['<id>']).
+  Stage.init = () => {
+    for (const el of document.querySelectorAll('.scene[data-scene]')) {
+      if (el.__scene) continue;
+      const make = window.Scenes[el.dataset.scene];
+      if (!make) { console.warn('No scene file loaded for data-scene="' + el.dataset.scene + '"'); continue; }
+      let o = {}; try { o = JSON.parse(el.dataset.options || '{}'); } catch {}
+      el.__scene = make(el, o) || true;
+    }
+  };
+
+  window.Scenes = window.Scenes || {};
+  window.Stage = Stage;
+  if (live) { window.addEventListener('load', () => Stage.ready()); }
+})();

package/assets/copilot/packs/frontend/skills/design-taste-frontend/evals/evals.json

@@ -0,0 +1,76 @@
+{
+  "skill_name": "design-taste-frontend",
+  "how_to_run": "For each eval, give the prompt to a fresh agent that has this skill, and to a second fresh agent without it (the baseline). Render both with scripts/inspect.mjs and have a judge who does not know which is which score the screenshots with references/critique.md. Record inspector FAIL counts for both. Evals 7 to 10 are app screens: inspect them with --app (a sheet dealt by draw.mjs --app switches it on by itself) and judge them with the app-screen passes in references/critique.md.",
+  "evals": [
+    {
+      "id": 1,
+      "name": "saas-invoicing",
+      "prompt": "Build a landing page for Ledgerly, an invoicing tool for freelance designers. What it does: you write an invoice in under a minute, the client pays by card or bank transfer, and it sends polite reminders by itself when an invoice is overdue. It costs 9 euros a month flat, with a 14-day free trial and no card needed. Include pricing and a short FAQ. There is no existing brand and no screenshots; the product name is all we have. Plain static HTML, CSS and JS in one folder.",
+      "expected_output": "A static landing page with a clear idea drawn from invoicing itself, headlines of two lines or fewer at 1440/768/390, no eyebrow labels, no monospace, no index numbering, no thin rules, no gradients or shadows, a non-default palette and type system, a pricing section that is not three cards, and no invented customers or statistics.",
+      "files": []
+    },
+    {
+      "id": 2,
+      "name": "restaurant-osteria",
+      "prompt": "Make a one-page website for Osteria Nove, a 38-seat Italian restaurant in Alfama, Lisbon. Handmade pasta, a short natural wine list, dinner only, Tuesday to Saturday from 19:00. Address: Rua dos Remédios 9. Reservations by phone (+351 21 000 0009) or email (mesa@osterianove.pt). The page needs the menu (invent a believable short one: antipasti, pasta, dolci, with prices in euros), hours, address and how to book. We have no photographs yet. Static HTML/CSS/JS.",
+      "expected_output": "A one-page restaurant site with a specific idea (for example the page as the menu itself), the menu set typographically without divider lines, practical information easy to find, bundled photographs used only as atmosphere and listed for replacement, and all house rules met.",
+      "files": []
+    },
+    {
+      "id": 3,
+      "name": "portfolio-designer",
+      "prompt": "I'm Mara Lindqvist, a product designer in Stockholm with eight years in fintech and health apps. I need a portfolio homepage: six selected projects (make up plausible names, clients, years and one-line descriptions), a short about paragraph, and a way to contact me (mara@lindqvist.studio). I don't have project images ready, so design it so it still looks finished without them, or use placeholders that I can swap. Static HTML/CSS/JS.",
+      "expected_output": "A portfolio page that looks finished without project imagery (a typographic index, a name-led hero, or atmosphere photographs clearly marked for replacement), with a designed footer, a phone layout that is its own composition, and all house rules met.",
+      "files": []
+    },
+    {
+      "id": 4,
+      "name": "product-ceramics",
+      "prompt": "Launch page for Kiln, a ceramic pour-over coffee set (dripper, carafe and two cups) that is hand-glazed in small batches in Porto. It costs 84 euros and ships across the EU within a week. The glaze is mixed by hand so no two sets are identical. We have not shot product photos yet, so there are no images of the set. One page, with a way to buy (a button is enough). Static HTML/CSS/JS.",
+      "expected_output": "A product page that does not fake product photography: it either commits to type and colour, uses one shape from the object as a motif, or uses atmosphere photographs honestly, with the price and purchase action clear, and all house rules met.",
+      "files": []
+    },
+    {
+      "id": 5,
+      "name": "guesthouse-ericeira",
+      "prompt": "Website for Casa Mirante, a six-room guesthouse on the cliffs above Ericeira, Portugal. Rooms from 140 euros a night with breakfast included; ten minutes' walk to the surf at Ribeira d'Ilhas; open March to November. One page: what it is, the rooms, what's nearby, and how to book (email reservas@casamirante.pt). We have no photographs yet. Static HTML/CSS/JS.",
+      "expected_output": "A calm, photograph-led or type-led one-pager whose hero is one clear thing, with rooms and booking information easy to find, bundled coast photographs used as atmosphere and listed for replacement, and all house rules met.",
+      "files": []
+    },
+    {
+      "id": 6,
+      "name": "conference-format",
+      "prompt": "Landing page for Format, a two-day design conference in Rotterdam on 14 and 15 May 2027. Twelve speakers (invent plausible names and talk titles), 400 seats, tickets at 390 euros, venue: Maassilo. Sections: what it is, the line-up, the schedule in brief, tickets, and a short FAQ. No brand exists yet beyond the name. Static HTML/CSS/JS.",
+      "expected_output": "An event page with a strong typographic or colour idea, the line-up and schedule set as structured text without divider lines or index numbers, a ticket section that is not three cards, and all house rules met.",
+      "files": []
+    },
+    {
+      "id": 7,
+      "name": "app-budget-overview",
+      "prompt": "Build the main screen of Ledgerly, a budgeting app for couples who share money: the October overview with their accounts and balances, the spending plan (planned against spent by category), bills due in the next 14 days and recent transactions. Two people use it, Mia and Tom. Desktop first, and it must work on a phone. Static HTML/CSS/JS.",
+      "expected_output": "An app screen, not a landing page: a quiet shell (sidebar or rail), a clear screen title, numbers that add up and are right-aligned with tabular figures, one chart per question, colour spent on data and status only, no icons in tinted squares, no gradients or glows, no placeholder names, and a phone layout where the navigation folds away. inspect.mjs --app passes.",
+      "files": []
+    },
+    {
+      "id": 8,
+      "name": "app-deploy-dashboard",
+      "prompt": "Dashboard for Relay, an edge deployment platform for web teams: one project's overview with recent deployments (status, branch, commit message, author, duration, region), requests and p95 latency over the last 24 hours, the error rate, and usage against the plan's limits. Dark theme. Static HTML/CSS/JS.",
+      "expected_output": "A dense, readable dark screen on a neutral (not navy) ground: one surface step or one hairline between regions, a deployments table with honest statuses and aligned numbers, charts with few gridlines and one series each, IDs in monospace at most, no rainbow series, no glow, and app inspector checks passing.",
+      "files": []
+    },
+    {
+      "id": 9,
+      "name": "app-settings-billing",
+      "prompt": "Workspace settings for Proofline, a design-review tool: general settings, members and roles (a members table with an invite form), billing (current plan, seats, invoices) and notifications. Static HTML/CSS/JS, desktop and phone.",
+      "expected_output": "A settings screen with a label column beside its fields (or stacked fields on a phone), labels above inputs, one control height, quiet borders, honest disabled states, a members table with right-aligned figures and one status pill per row, and no decorative icons or gradients.",
+      "files": []
+    },
+    {
+      "id": 10,
+      "name": "app-support-queue",
+      "prompt": "The queue screen of Hearth, a support inbox for a six-person SaaS team: the list of conversations with assignee, priority, channel and time to the SLA, the open conversation with the customer's details beside it, plus filters and saved views. Static HTML/CSS/JS.",
+      "expected_output": "A three-region work screen (navigation, list, conversation) that stays readable at 1440 and folds to one region at a time on a phone, with status shown once per row, times in words, no tinted icon squares or emoji, and app inspector checks passing.",
+      "files": []
+    }
+  ]
+}