@officexapp/vidfarm-devcli 0.21.10

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.

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

@@ -0,0 +1,271 @@
+# Farmville SaaS — Design Tokens
+
+The complete design system as CSS custom properties. Paste the `:root` block below into your global
+stylesheet and reference the variables everywhere — never hand-pick ad-hoc hex/px values, or the system
+drifts. Values are the real ones distilled from Fillout.com (a Tailwind-v4 default scale + a custom
+honey-gold brand palette + rounded display type).
+
+## Table of contents
+1. Fonts (loading + stacks)
+2. The `:root` token block (copy-paste)
+3. Color rationale
+4. Typography scale & usage
+5. Radius, shadow, spacing rationale
+6. Glass / blur
+7. Motion
+
+---
+
+## 1. Fonts
+
+**Display / headings — `Hanken Grotesk`.** Fillout uses a proprietary rounded grotesque called
+*blMelody*. Hanken Grotesk is the closest free, warm, rounded grotesque with an excellent bold. Good
+alternates, all free on Google Fonts, in order of similarity: **Figtree**, **Gantari**, **Onest**,
+**Plus Jakarta Sans**. If you have a license for blMelody, use it and keep Hanken as the fallback.
+
+**Body / UI — `Inter`.** Exact match to Fillout. Free.
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+```
+
+Rules of thumb:
+- Headlines, section titles, big numbers, the logo → **Hanken Grotesk** (or blMelody).
+- Body copy, labels, buttons, nav items, form fields → **Inter**.
+- Never set body copy in the display font, and never set a huge headline in Inter — the mix is the point.
+
+---
+
+## 2. The `:root` token block
+
+```css
+:root {
+  /* ---- Fonts ---- */
+  --font-display: "Hanken Grotesk", "blMelody", ui-sans-serif, system-ui, sans-serif;
+  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
+
+  /* ---- Signature accent: HONEY GOLD (the one "joy" color) ---- */
+  --gold-500:  #ffc738;   /* primary accent */
+  --gold-400:  #ffd66f;   /* lighter */
+  --gold-300:  #f8d884;   /* soft */
+  --gold-600:  #f6c744;   /* focus-ring gold */
+  --gold-700:  #fcb900;   /* deep / hover */
+  --gold-tint: #fff5e4;   /* pale wash bg */
+  --gold-tint2:#ffe9cc;   /* warm cream */
+
+  /* ---- Ink & neutral scale (Tailwind neutral) ---- */
+  --ink:        #171717;  /* primary text, dark buttons, footer */
+  --ink-950:    #0a0a0a;  /* deepest */
+  --n-900:      #171717;
+  --n-800:      #262626;
+  --n-700:      #404040;  /* heading text on light */
+  --n-600:      #525252;
+  --n-500:      #737373;  /* secondary / body text */
+  --n-400:      #a3a3a3;  /* muted, placeholders, disabled */
+  --n-300:      #d4d4d4;  /* strong border */
+  --n-200:      #ededed;  /* hairline border (default) */
+  --n-150:      #f0f0f0;
+  --n-100:      #f5f5f5;  /* section tint background */
+  --n-50:       #fbfbfb;  /* page background */
+  --white:      #ffffff;  /* card surface */
+
+  /* ---- Support pastels (icon tiles, nodes, illustration accents) ---- */
+  --sky:        #3f9fe0;  --sky-tint:    #e2effd;   /* hero sky / info */
+  --violet:     #9f5bde;  --violet-tint: #e4ddfd;   /* AI / smart */
+  --green:      #22c55e;  --green-tint:  #dcfce7;   /* branch / success / nature */
+  --coral:      #f97316;  --coral-tint:  #ffe9cc;   /* energy / warm */
+  --red:        #ef4444;  --red-tint:    #fee2e2;   /* destructive */
+
+  /* ---- Semantic roles ---- */
+  --bg:            var(--n-50);
+  --bg-section:    var(--n-100);
+  --surface:       var(--white);
+  --border:        var(--n-200);
+  --border-strong: var(--n-300);
+  --text:          var(--n-700);
+  --text-muted:    var(--n-500);
+  --text-faint:    var(--n-400);
+  --accent:        var(--gold-500);
+
+  /* ---- Radius (curves are signature — nothing sharp) ---- */
+  --r-sm:  4px;
+  --r-md:  6px;     /* inputs, small chips */
+  --r-lg:  8px;     /* small buttons */
+  --r-xl:  12px;    /* buttons, icon tiles */
+  --r-2xl: 16px;    /* cards, nodes */
+  --r-3xl: 24px;    /* big feature cards, image frames, nav pill */
+  --r-full: 9999px; /* nav bar, pill buttons, badges, avatars */
+
+  /* ---- Shadows (diffuse, low-opacity = soft sunlight, never harsh) ---- */
+  --shadow-xs: 0 1px 2px 0 #0000000d;
+  --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+  --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+  --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
+  --shadow-2xl:0 25px 50px -12px #00000040;
+  --shadow-card:  0 1px 2px #0000000d, 0 8px 24px -12px #00000014; /* lifted-card ambient */
+  --shadow-nav:   0 4px 24px -8px #00000026, 0 1px 2px #0000000d;  /* floating glass nav */
+  --ring-gold:    0 0 0 3px var(--gold-600), 0 0 14px rgba(246,199,68,.4); /* focus */
+
+  /* ---- Type scale (rem) ---- */
+  --text-xs:  0.75rem;   --lh-xs:  1rem;
+  --text-sm:  0.875rem;  --lh-sm:  1.25rem;
+  --text-base:1rem;      --lh-base:1.5rem;
+  --text-lg:  1.125rem;  --lh-lg:  1.75rem;
+  --text-xl:  1.25rem;   --lh-xl:  1.75rem;
+  --text-2xl: 1.5rem;    --lh-2xl: 2rem;
+  --text-3xl: 1.875rem;  --lh-3xl: 2.25rem;
+  --text-4xl: 2.25rem;   --lh-4xl: 2.5rem;
+  --text-5xl: 3rem;      --lh-5xl: 1.05;
+  --text-6xl: 3.75rem;   --lh-6xl: 1.0;
+  --text-7xl: 4.5rem;    --lh-7xl: 1.0;
+  --display:  clamp(3rem, 7vw, 6rem);   /* hero headline, fluid */
+
+  /* ---- Font weights ---- */
+  --fw-normal: 400;  --fw-medium: 500;  --fw-semibold: 600;
+  --fw-bold: 700;    --fw-extrabold: 800;
+
+  /* ---- Tracking / leading ---- */
+  --track-tighter: -0.05em;
+  --track-tight:   -0.025em;   /* headings default */
+  --track-normal:  0em;
+  --lh-tight: 1.1;  --lh-snug: 1.25;  --lh-normal: 1.5;  --lh-relaxed: 1.6;
+
+  /* ---- Spacing (4px base) ---- */
+  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
+  --sp-6: 24px; --sp-8: 32px;  --sp-10:40px; --sp-12:48px; --sp-16:64px;
+  --sp-20:80px; --sp-24:96px;  --sp-32:128px;
+  --section-y: clamp(4rem, 9vw, 7rem);   /* vertical rhythm between sections */
+  --container: 75rem;                     /* 1200px, max content width */
+  --gutter:    clamp(1rem, 4vw, 2rem);
+
+  /* ---- Glass / blur ---- */
+  --glass-bg:   rgba(251,251,251,0.8);
+  --glass-blur: 16px;
+
+  /* ---- Motion ---- */
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* gentle ease-out */
+  --dur-fast: 150ms;  --dur: 220ms;  --dur-slow: 320ms;
+}
+
+/* Baseline application */
+html { font-size: 16px; }
+body {
+  font-family: var(--font-body);
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+h1,h2,h3,h4 {
+  font-family: var(--font-display);
+  font-weight: var(--fw-extrabold);
+  letter-spacing: var(--track-tight);
+  line-height: var(--lh-tight);
+  color: var(--ink);
+}
+```
+
+---
+
+## 3. Color rationale
+
+- **Honey-gold `#ffc738` is the whole personality.** It is the *only* saturated brand color. Use it
+  where you want a smile: the footer's primary CTA, star ratings, a "Publish" chip, the logo, a small
+  underline/highlight, a hover glow. If you find yourself using gold on more than ~5–10% of a screen,
+  pull back — its power is scarcity. Never pair it with a second competing bright brand color.
+- **Charcoal `#171717` is the workhorse.** Primary buttons on light backgrounds, primary text, the
+  footer surface. It reads premium and calm and lets the gold pop.
+- **Everything else is the neutral gray scale.** Backgrounds alternate `#fbfbfb` (page) ↔ `#f5f5f5`
+  (tinted section) ↔ `#ffffff` (cards). Borders are the near-invisible `#ededed` hairline. Text steps
+  down `#171717` → `#404040` → `#737373` → `#a3a3a3`.
+- **Support pastels are for tiny surfaces only** — icon tiles, workflow nodes, illustration accents,
+  chart dots. Each has a saturated glyph color + a pale tint background (violet on `#e4ddfd`, green on
+  `#dcfce7`, etc.). They add life without stealing the gold's job.
+- **The illustrated hero introduces sky-blue and green** as *painted* colors, not UI colors. That's
+  intentional — the warmth lives in the artwork, the UI stays disciplined.
+
+---
+
+## 4. Typography scale & usage
+
+| Element | Font | Size | Weight | Tracking | Line-height |
+|---|---|---|---|---|---|
+| Hero headline | display | `--display` (clamp 3→6rem) | 800 | -0.03em | 1.0 |
+| Section title | display | `--text-5xl`/`4xl` | 800 | -0.025em | 1.05 |
+| Card / feature title | display | `--text-xl`/`2xl` | 700 | -0.02em | 1.2 |
+| Subhead / lede | body | `--text-lg`/`xl` | 400 | 0 | 1.5 |
+| Body copy | body | `--text-base` | 400 | 0 | 1.6 |
+| Small / caption | body | `--text-sm` | 400/500 | 0 | 1.4 |
+| Button label | body | `--text-sm`/`base` | 600 | 0 | 1 |
+| Badge / eyebrow | body | `--text-sm` | 500 | 0 | 1 |
+| Big stat number | display | `--text-5xl`+ | 700 | -0.02em | 1 |
+
+**Two-tone hero trick:** split the headline across two lines and set the first line to a translucent
+white and the second to solid white for a soft-to-strong reveal:
+
+```css
+.hero-h1 { font: 800 var(--display)/1.0 var(--font-display); letter-spacing:-0.03em; color:#fff; }
+.hero-h1 .soft { color: rgba(255,255,255,0.55); }
+```
+```html
+<h1 class="hero-h1"><span class="soft">Forms that</span><br>do it all</h1>
+```
+
+On light backgrounds, headings are ink `#171717`; subheads are `#737373`.
+
+---
+
+## 5. Radius, shadow, spacing rationale
+
+- **Radius is a personality dial and it's turned way up.** Interactive elements are *fully* rounded
+  (nav, buttons, badges → `--r-full`). Containers are generously rounded (cards `16px`, big cards &
+  image frames `24px`). Only truly small utility elements go as low as `4–6px`. When in doubt, round
+  more. A single sharp corner breaks the whole cozy feeling.
+- **Shadows imitate soft ambient sunlight**, not hard drop-shadows. They're always large-radius and
+  low-opacity (`#0000001a` ≈ 10% black; the biggest is 25%). Use `--shadow-card` on resting cards and
+  `--shadow-nav` on the floating nav. On hover, step a card from `--shadow-card` to `--shadow-lg` and
+  nudge it up 2px.
+- **Spacing is generous and rhythmic.** Sections get `--section-y` (≈ 6rem) of vertical padding.
+  Content maxes at `--container` (1200px) and stays centered with `--gutter` side padding. Inside
+  cards, pad `24–40px`. Whitespace *is* the premium signal — don't crowd.
+
+---
+
+## 6. Glass / blur
+
+The floating nav and any sticky "feature tab" bar use frosted glass:
+
+```css
+.glass {
+  background: var(--glass-bg);              /* rgba(251,251,251,0.8) */
+  backdrop-filter: blur(var(--glass-blur)); /* 16px */
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-nav);
+}
+```
+Over the illustrated hero, use a whiter translucent fill (`rgba(255,255,255,0.7)`) so nav text stays legible.
+
+---
+
+## 7. Motion
+
+Gentle and springy, never bouncy-cartoonish. One easing curve (`--ease`, a soft ease-out) and short
+durations (150–320ms). The canonical interactions:
+
+- **Card hover:** `transform: translateY(-2px)` + shadow `--shadow-card` → `--shadow-lg`.
+- **Button hover:** slight brightness/darken + `--shadow-md`; the trailing `→` arrow nudges right ~3px.
+- **Focus:** `box-shadow: var(--ring-gold)` — the gold glow ring.
+- **Section reveal (optional):** fade-up 12px over 320ms as it enters the viewport.
+
+```css
+.card { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
+.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
+.btn .arrow { transition: transform var(--dur) var(--ease); }
+.btn:hover .arrow { transform: translateX(3px); }
+:where(a,button,input,textarea):focus-visible { outline: none; box-shadow: var(--ring-gold); }
+```

package/.agents/skills/flockposter/LICENSE

@@ -0,0 +1,17 @@
+GNU AFFERO GENERAL PUBLIC LICENSE
+Version 3, 19 November 2007
+
+Copyright (C) 2024 Nevo David
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published
+by the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.

package/.agents/skills/flockposter/README.md

@@ -0,0 +1,72 @@
+# FlockPoster Customer Skill
+
+This repository contains a customer-safe `SKILL.md` for using FlockPoster through the public CLI and public API.
+
+It is intentionally limited to supported customer workflows:
+- install `flockposter-cli`
+- configure `FLOCKPOSTER_API_KEY`
+- discover integrations and provider settings
+- upload media
+- create draft or scheduled posts
+- handle platform-specific cases for X, TikTok, Instagram, and YouTube
+- fetch analytics
+- recover missing release IDs
+
+## Install the CLI
+
+```bash
+npm install -g flockposter-cli
+```
+
+Verify installation:
+
+```bash
+flockposter --help
+```
+
+## Configure access
+
+```bash
+export FLOCKPOSTER_API_KEY=your_api_key_here
+```
+
+Optional for self-hosted instances:
+
+```bash
+export FLOCKPOSTER_API_URL=https://your-host.example.com/api
+```
+
+## Quick start
+
+```bash
+flockposter integrations:list
+
+flockposter posts:create \
+  -c "Hello from FlockPoster" \
+  -s "2026-05-18T15:00:00Z" \
+  -i "your-integration-id"
+
+flockposter posts:list
+```
+
+## Provider examples
+
+The agent-facing skill includes exact examples and guardrails for:
+- X posts, reply controls, communities, and threads
+- TikTok direct posting and upload-without-posting flows
+- Instagram posts, Reels, Stories, and Trial Reels
+- YouTube uploads and Shorts
+
+Ready-to-use examples are included inline in `SKILL.md` so the landing page `SKILL.md` clipboard button is self-contained.
+
+## Files
+
+- `SKILL.md` contains the agent-facing workflow and guardrails.
+- `README.md` contains the human-facing quick start.
+- `examples/` contains the same customer-safe CLI and public API payload examples as standalone files.
+
+## Public links
+
+- App: `https://app.flockposter.com`
+- Docs: `https://docs.flockposter.com`
+- npm: `https://www.npmjs.com/package/flockposter-cli`