@mevdragon/vidfarm-devcli 0.15.0 → 0.17.0

package/.agents/skills/farmville-saas-ux/references/components.md

@@ -0,0 +1,340 @@
+# Farmville SaaS — Component Recipes
+
+Copy-paste HTML + CSS for every signature component. All of them reference the tokens in `tokens.md`
+(paste that `:root` block first). Class names are plain so you can port them into React/Vue/Tailwind
+easily. `assets/starter.html` assembles most of these into one working page.
+
+## Table of contents
+1. Floating glass pill nav
+2. Pill buttons (charcoal, gold, ghost, arrow)
+3. Pill badges / eyebrows
+4. Illustrated hero (+ 3 background tiers)
+5. Soft cards & feature-card grid
+6. Colored icon tiles
+7. Workflow / node chips
+8. Logo cloud (grayscale trust bar)
+9. Review / stat cards
+10. Integration grid
+11. Warm-dark footer
+12. Form fields (the product's own surface)
+
+---
+
+## 1. Floating glass pill nav
+
+Detached, frosted, hairline-bordered, softly shadowed pill with margin from the top edge.
+
+```html
+<header class="nav-wrap">
+  <nav class="nav glass">
+    <a class="brand" href="/">Fillout</a>
+    <ul class="nav-links">
+      <li><a href="#">Products <span class="caret">⌄</span></a></li>
+      <li><a href="#">Templates <span class="caret">⌄</span></a></li>
+      <li><a href="#">Integrations <span class="caret">⌄</span></a></li>
+      <li><a href="#">Pricing</a></li>
+    </ul>
+    <div class="nav-cta">
+      <a class="link-quiet" href="#">Log in</a>
+      <a class="btn btn-ink" href="#">Get started <span class="arrow">→</span></a>
+    </div>
+  </nav>
+</header>
+```
+```css
+.nav-wrap { position: sticky; top: 0; z-index: 50; padding: 16px var(--gutter); display: flex; justify-content: center; }
+.nav {
+  width: min(var(--container), 100%);
+  display: flex; align-items: center; gap: 24px;
+  padding: 10px 12px 10px 24px;
+  border-radius: var(--r-full);
+}
+.brand { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; }
+.nav-links { display: flex; gap: 4px; margin: 0 auto; list-style: none; }
+.nav-links a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--r-lg);
+  font-size: 15px; font-weight: 500; color: var(--n-700); transition: background var(--dur) var(--ease); }
+.nav-links a:hover { background: #0000000a; }
+.caret { font-size: 11px; color: var(--n-400); }
+.nav-cta { display: flex; align-items: center; gap: 8px; }
+.link-quiet { padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--n-700); }
+```
+Over the illustrated hero, give the nav a whiter fill: `.nav.on-hero { background: rgba(255,255,255,0.72); }`.
+
+---
+
+## 2. Pill buttons
+
+Three variants + the arrow-nudge. Buttons are always fully rounded.
+
+```css
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 12px 20px; border-radius: var(--r-full);
+  font-family: var(--font-body); font-size: 15px; font-weight: 600;
+  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
+  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
+}
+.btn .arrow { transition: transform var(--dur) var(--ease); }
+.btn:hover .arrow { transform: translateX(3px); }
+
+/* Charcoal — the workhorse primary on light backgrounds */
+.btn-ink { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
+.btn-ink:hover { background: #000; box-shadow: var(--shadow-md); transform: translateY(-1px); }
+
+/* Honey-gold — the "joy" CTA. Use sparingly (footer hero CTA, key conversion). */
+.btn-gold { background: var(--gold-500); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-sm); }
+.btn-gold:hover { background: var(--gold-700); box-shadow: 0 6px 18px -6px rgba(252,185,0,.6); transform: translateY(-1px); }
+
+/* Ghost — white pill with hairline border, secondary actions */
+.btn-ghost { background: #fff; color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-xs); }
+.btn-ghost:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
+```
+```html
+<a class="btn btn-ink">Get started <span class="arrow">→</span></a>
+<a class="btn btn-gold">Get started <span class="arrow">→</span></a>
+<a class="btn btn-ghost">View all integrations <span class="arrow">→</span></a>
+```
+
+---
+
+## 3. Pill badges / eyebrows
+
+Small rounded-full chips with a mini glyph, used to label section intros.
+
+```css
+.badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 14px; border-radius: var(--r-full);
+  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-xs);
+  font-size: 14px; font-weight: 500; color: var(--n-700);
+}
+```
+```html
+<span class="badge">🔥 Features</span>
+<span class="badge">📋 Forms by Zite</span>
+```
+
+---
+
+## 4. Illustrated hero
+
+The #1 signature move. A warm, sunny, hand-illustrated scene behind a centered, two-tone headline.
+
+```html
+<section class="hero">
+  <div class="hero-art"><!-- background art: see tiers below --></div>
+  <div class="hero-inner">
+    <span class="badge">📋 Forms by Zite</span>
+    <h1 class="hero-h1"><span class="soft">Forms that</span><br>do it all</h1>
+    <p class="hero-sub">Make any form with Fillout,<br>the all-in-one form solution.</p>
+    <a class="btn btn-ink btn-lg">Get Started <span class="arrow">→</span></a>
+  </div>
+</section>
+```
+```css
+.hero { position: relative; overflow: hidden; text-align: center; padding: 120px var(--gutter) 96px; }
+.hero-art { position: absolute; inset: 0; z-index: 0; }
+.hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; display: grid; gap: 24px; justify-items: center; }
+.hero-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--display); line-height: 1.0; letter-spacing: -0.03em; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.12); }
+.hero-h1 .soft { color: rgba(255,255,255,0.55); }
+.hero-sub { font-size: var(--text-xl); line-height: 1.5; color: rgba(255,255,255,0.92); font-weight: 400; }
+.btn-lg { padding: 15px 26px; font-size: 16px; }
+```
+
+### Background tiers — pick the highest one you can produce
+
+**Tier 1 — commissioned/generated illustration (the real signature).** A painterly, Ghibli/storybook
+scene: bright blue sky, golden-hour cumulus clouds, lush green foliage, a soft sunlit city. Warm,
+optimistic, hand-made. Set as `.hero-art { background: url(...) center/cover; }`. Generation prompt to
+reuse: *"soft anime / Studio-Ghibli style illustration, sunny bright blue sky, big fluffy golden-hour
+cumulus clouds, lush green trees framing the sides, gentle sunlit city buildings, warm optimistic,
+painterly, no text, 16:9."*
+
+**Tier 2 — CSS sunny-sky fallback** (no art asset). A blue gradient sky with a soft sun glow and
+optional SVG clouds:
+```css
+.hero-art {
+  background:
+    radial-gradient(60% 50% at 78% 22%, rgba(255,241,204,0.9), transparent 60%),  /* sun glow */
+    linear-gradient(180deg, #3f9fe0 0%, #6cc0f5 55%, #a9dbfb 100%);               /* sky */
+}
+.hero-art::after { /* soft cloud */
+  content: ""; position: absolute; right: 8%; bottom: 18%; width: 320px; height: 120px;
+  background: radial-gradient(ellipse 60% 60% at 30% 60%, #fff, transparent 70%),
+              radial-gradient(ellipse 50% 70% at 65% 50%, #fff, transparent 70%);
+  filter: blur(2px); opacity: .95;
+}
+```
+
+**Tier 3 — warm minimal wash** (fastest, still on-brand). Cream/gold radial glow on off-white; use ink
+headline instead of white:
+```css
+.hero-art { background: radial-gradient(80% 70% at 50% -10%, var(--gold-tint), var(--n-50) 60%); }
+/* then: .hero-h1 { color: var(--ink); } .hero-h1 .soft { color: var(--n-400); } .hero-sub { color: var(--n-500); } */
+```
+
+Under the hero, Fillout floats a product screenshot on a big `--r-3xl` card with `--shadow-xl`,
+overlapping the section boundary — a nice touch: `margin-bottom: -80px; position: relative; z-index: 2`.
+
+---
+
+## 5. Soft cards & feature-card grid
+
+```css
+.card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r-3xl); padding: 32px;
+  box-shadow: var(--shadow-card);
+  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
+}
+.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
+.card h3 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 8px; }
+.card p  { color: var(--text-muted); font-size: var(--text-lg); line-height: 1.5; margin: 0; }
+
+.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
+@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }
+```
+The card border is always the uniform `1px solid var(--border)` on all four sides. **Never** add a
+thicker or colored side border (`border-left: 3px solid …` status stripes, edge accents) — it breaks
+the soft, even frame. To mark status/category on a card or list chip, put a pill (`.badge`) or a small
+colored dot inside the card instead.
+Section intro pattern (centered): badge → big title → one-line subhead, then the grid.
+```html
+<section class="section section-tint">
+  <div class="container center-intro">
+    <span class="badge">🔥 Features</span>
+    <h2 class="section-title">It all starts with a form</h2>
+    <p class="section-sub">Build the exact form you need, in minutes.</p>
+  </div>
+  <div class="container grid-2"> …cards… </div>
+</section>
+```
+```css
+.section { padding: var(--section-y) 0; }
+.section-tint { background: var(--bg-section); }
+.container { width: min(var(--container), 100%); margin: 0 auto; padding: 0 var(--gutter); }
+.center-intro { text-align: center; display: grid; gap: 16px; justify-items: center; margin-bottom: 48px; }
+.section-title { font-size: var(--text-5xl); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
+.section-sub { font-size: var(--text-xl); color: var(--text-muted); }
+```
+
+---
+
+## 6. Colored icon tiles
+
+Rounded-square tiles with a pale-tint background and a colored glyph. Used in cards, nodes, and feature
+lists.
+
+```css
+.tile { width: 40px; height: 40px; border-radius: var(--r-xl); display: grid; place-items: center; font-size: 20px; }
+.tile-violet { background: var(--violet-tint); color: var(--violet); }
+.tile-green  { background: var(--green-tint);  color: var(--green); }
+.tile-gold   { background: var(--gold-tint2);  color: var(--gold-700); }
+.tile-sky    { background: var(--sky-tint);    color: var(--sky); }
+.tile-coral  { background: var(--coral-tint);  color: var(--coral); }
+```
+
+---
+
+## 7. Workflow / node chips
+
+Small connected cards, each a white pill-ish card with an icon tile + title + subtitle. Great for
+"automation" product mockups.
+
+```html
+<div class="node">
+  <span class="tile tile-violet">✦</span>
+  <div><div class="node-title">AI action</div><div class="node-sub">Qualify lead</div></div>
+</div>
+```
+```css
+.node { display: inline-flex; align-items: center; gap: 12px; background: #fff;
+  border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 12px 16px; box-shadow: var(--shadow-sm); }
+.node-title { font-weight: 600; font-size: 15px; color: var(--ink); }
+.node-sub { font-size: 13px; color: var(--text-muted); }
+```
+Connect nodes with 2px `--n-300` lines/curved SVG paths. A "Publish ⚡" chip uses `.badge` with gold fill.
+
+---
+
+## 8. Logo cloud (grayscale trust bar)
+
+Muted, single-tone logos for social proof.
+
+```css
+.logo-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; }
+.logo-cloud img, .logo-cloud .logo { opacity: .55; filter: grayscale(1); height: 28px; transition: opacity var(--dur) var(--ease); }
+.logo-cloud img:hover { opacity: .8; }
+```
+
+---
+
+## 9. Review / stat cards
+
+White cards with a source row, a big number, and gold stars.
+
+```html
+<div class="card stat-card">
+  <div class="stat-head"><span class="tile tile-coral">G</span> Business reviews</div>
+  <div class="stat-num">5/5</div>
+  <div class="stars">★★★★★</div>
+</div>
+```
+```css
+.stat-card { display: grid; gap: 12px; }
+.stat-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
+.stat-num { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
+.stars { color: var(--gold-500); font-size: 20px; letter-spacing: 2px; }
+```
+
+---
+
+## 10. Integration grid
+
+Cards each holding 2–3 app icons (rounded-square white tiles) with a label below.
+
+```css
+.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
+.int-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 20px; box-shadow: var(--shadow-card); text-align: center; }
+.int-icons { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
+.int-icon { width: 56px; height: 56px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--border); display: grid; place-items: center; box-shadow: var(--shadow-xs); }
+.int-label { font-weight: 600; color: var(--ink); font-size: 15px; }
+```
+
+---
+
+## 11. Warm-dark footer
+
+Near-black surface, **amber logo**, muted-gray link columns, pill trust badges.
+
+```css
+.footer { background: var(--ink); color: var(--n-400); padding: 80px var(--gutter) 40px; }
+.footer-inner { width: min(var(--container), 100%); margin: 0 auto; }
+.footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--gold-500); }
+.footer-tagline { color: var(--n-500); margin-top: 8px; }
+.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
+.footer-col h4 { color: var(--n-400); font-size: 14px; font-weight: 600; margin-bottom: 16px; font-family: var(--font-body); letter-spacing: 0.02em; }
+.footer-col a { display: block; color: var(--n-300); font-size: 15px; padding: 6px 0; transition: color var(--dur) var(--ease); }
+.footer-col a:hover { color: #fff; }
+.trust-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 32px; border-top: 1px solid #ffffff1a; }
+.trust-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-full); background: #ffffff0d; color: var(--n-400); font-size: 14px; }
+```
+The footer's primary "Get started →" CTA is the **gold** variant — this is the one place gold headlines a
+dark surface and it sings.
+
+---
+
+## 12. Form fields (the product's own surface)
+
+For the app/product UI itself, keep fields soft and friendly.
+
+```css
+.field label { display: block; font-size: 14px; font-weight: 500; color: var(--n-700); margin-bottom: 6px; }
+.field input, .field textarea {
+  width: 100%; padding: 12px 14px; border-radius: var(--r-md);
+  border: 1px solid var(--border-strong); background: #fff; font: 400 15px var(--font-body); color: var(--ink);
+  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
+}
+.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: var(--ring-gold); }
+.field input::placeholder { color: var(--text-faint); }
+```

package/.agents/skills/farmville-saas-ux/references/porting-guide.md

@@ -0,0 +1,121 @@
+# Porting Guide — Reskin any site into Farmville SaaS
+
+Use this when the user hands you an existing website, landing page, or component and wants it
+*re-themed* into this style. The rule: **keep their structure, DOM, and copy — swap only the design
+language.** Don't redesign the information architecture; re-dress it.
+
+Work through these passes in order. Each is cheap and independently verifiable; together they transform
+the feel. After each pass, glance at the result — the vibe should be visibly warming up.
+
+---
+
+## Pass 0 — Install the system
+
+1. Paste the `:root` token block from `references/tokens.md` into the global stylesheet.
+2. Add the font `<link>` (Hanken Grotesk + Inter).
+3. Set base `body`/heading styles as shown at the bottom of tokens.md. This alone shifts ~40% of the feel.
+
+## Pass 1 — Typography
+
+- Point all headings at `--font-display` (Hanken Grotesk), body at Inter.
+- Bump heading weights to **700–800** and pull tracking to **-0.02 / -0.03em**. Farmville headlines are
+  heavy and confident, not thin.
+- Tighten heading line-height to ~1.0–1.2; open body to ~1.5–1.6.
+- Make the hero headline *big* (`--display`) and, if it's over an image, split it two-tone
+  (translucent line + solid line).
+
+## Pass 2 — Round everything
+
+- Nav bar, all buttons, and all badges → `--r-full` (full pills). This is the single most recognizable
+  change.
+- Cards, modals, images, media frames → `--r-2xl`/`--r-3xl` (16–24px).
+- Inputs, small chips, menu items → `--r-md`/`--r-lg` (6–8px).
+- Search the CSS for `border-radius: 0`, `2px`, `4px` on big elements and round them up. No sharp
+  corners survive on anything a user clicks.
+
+## Pass 3 — Neutralize the palette to gray + one gold
+
+- Replace the site's background grays/blues with the neutral scale: page `#fbfbfb`, tinted sections
+  `#f5f5f5`, cards `#fff`, hairline borders `#ededed`, text `#171717`→`#404040`→`#737373`.
+- Pick **honey-gold `#ffc738`** as the single accent. Retire the site's existing brand color from UI
+  chrome (or demote it to one of the support pastels). Two competing saturated colors kill the look.
+- Primary buttons on light backgrounds → **charcoal `#171717`**. Reserve **gold** for the one hero/
+  footer conversion CTA, star ratings, badges, and small highlights.
+- Keep at most 1–2 support pastels for icon tiles / accents (violet, green, sky, coral), each on its
+  pale tint.
+- Strip colored side-border accents from cards and list items (`border-left: 3px solid <status color>`
+  stripes are common in the wild). Cards keep a uniform `1px` hairline on all sides; move the status
+  signal into a pill or dot inside the card.
+
+## Pass 4 — Soften shadows & add lift
+
+- Replace hard/tight/dark shadows with the diffuse low-opacity set (`--shadow-card`, `--shadow-lg`).
+  If a shadow is darker than ~10% black or has a small blur radius, swap it.
+- Add hover lift to cards (`translateY(-2px)` + deeper shadow) and the arrow-nudge to CTAs.
+- Set focus states to the gold ring (`--ring-gold`).
+
+## Pass 5 — Float the nav
+
+- Detach the top nav into the glass pill (`references/components.md` §1): translucent fill,
+  `backdrop-blur`, hairline border, `--shadow-nav`, `--r-full`, with `16px` margin from the top.
+- Center the nav links; keep a charcoal "Get started →" pill on the right.
+
+## Pass 6 — Warm the hero
+
+- Give the hero the highest background tier you can produce (illustrated scene → sunny CSS sky →
+  warm cream wash; see components.md §4). This is where the "farmville" warmth actually lives — a
+  neutral UI with a sunny hero reads cozy; a neutral UI with a plain hero reads corporate.
+- Center the hero content: badge → two-tone headline → one-line subhead → CTA.
+- Optionally float a product screenshot on a `--r-3xl` card overlapping the next section.
+
+## Pass 7 — Re-pad & re-center sections
+
+- Give sections `--section-y` (≈6rem) vertical breathing room; cap content at `--container` (1200px).
+- Convert section intros to the centered pattern with a pill **badge eyebrow** (`🔥 Features`).
+- Alternate section backgrounds white ↔ `#f5f5f5` for gentle rhythm.
+
+## Pass 8 — Warm-dark the footer
+
+- Convert the footer to charcoal `#171717` with the **logo in amber gold**, muted-gray link columns,
+  and pill trust badges. Make its primary CTA the **gold** pill.
+
+## Pass 9 — Sprinkle delight
+
+- Star ratings in gold; emoji/mini-glyph badges; colored icon tiles; grayscale logo cloud for trust;
+  arrow-nudge on CTAs. These small touches are what make it feel *handmade and friendly* rather than
+  merely rounded.
+
+---
+
+## Before → After checklist
+
+Run this to confirm the port landed. If any row still says "before", keep going.
+
+| Aspect | Before (generic) | After (farmville) |
+|---|---|---|
+| Heading font | thin default sans | Hanken Grotesk 700–800, tracking -0.025em |
+| Corners | sharp / 4–8px everywhere | full-pill nav & buttons, 16–24px cards |
+| Accent | site's brand blue/multi | one honey-gold `#ffc738`, charcoal workhorse |
+| Shadows | dark / tight | diffuse, ≤10% black, soft-sunlight |
+| Card borders | colored `border-left` status stripes | uniform 1px hairline all sides, status pill inside |
+| Nav | full-width bar glued to top | floating frosted-glass pill |
+| Hero | plain / photo / mesh gradient | warm illustrated (or sunny-sky) scene, two-tone headline |
+| Section rhythm | dense, edge-to-edge | ~6rem padding, centered, badge eyebrows |
+| Footer | light or plain dark | warm charcoal, amber logo, pill trust badges |
+| Delight | none | gold stars, emoji badges, icon tiles, arrow nudge |
+
+---
+
+## Common mistakes (they quietly kill the vibe)
+
+- **Too much gold.** Gold on every button = cheap. It's the *scarce* joy color; charcoal does the heavy
+  lifting.
+- **Forgetting the illustrated hero.** A neutral, rounded UI with a flat hero is just "clean SaaS," not
+  "farmville." The warm hero is load-bearing.
+- **Keeping a second bright brand color.** Pick gold and go all in; demote everything else to neutral or
+  a pale support tint.
+- **Hard shadows.** One tight dark drop-shadow anywhere makes the whole page feel colder — audit them.
+- **Side-border accents on cards.** A colored `border-left` stripe (status rails, category edges) reads
+  as a different, colder design system. Uniform hairline borders only; status goes in a pill or dot.
+- **Sharp corners on buttons/nav.** Even one un-rounded CTA reads as a different design system.
+- **Cramped spacing.** Farmville breathes. If it feels dense, add whitespace before adding anything else.