spirewise 1.7.1 → 1.9.0

package/skills/glassmorphism-design-system/website-generation-rules.md

@@ -0,0 +1,195 @@
+# Website Generation Rules — Glassmorphism
+
+How an agent turns this design system into a **production-ready, multi-page, glassmorphism
+website**. Output clean, semantic **pure HTML + CSS + vanilla JavaScript** plus design
+tokens. The signature: one **living mesh background** per page with a *few* tasteful,
+**accessible** glass panels floating over it. (The token/spec system can be exported for
+other agents — see below — but the generated website itself is always pure vanilla.)
+
+## Technology stack (MANDATORY — no frameworks, no libraries)
+
+Build everything — the mesh background, glass surfaces, and all interactions — with
+**HTML5 + CSS3 + vanilla JavaScript only**. The generated site must contain **zero** of:
+
+> ❌ React · ❌ Vue · ❌ Angular · ❌ Svelte/Next/Nuxt · ❌ Bootstrap · ❌ Tailwind ·
+> ❌ jQuery · ❌ any UI library · ❌ any CSS framework · ❌ any JS animation/utility library
+
+No build step, no npm dependencies, no CDN kits. Glass = CSS `backdrop-filter` + tint +
+edge + shadow (with fallback); the mesh = CSS gradients (or a small vanilla canvas);
+reveals/sheen = native CSS + `IntersectionObserver`/`pointermove`. Exporting `tokens.json`
+for other agents is allowed; shipping the site in a framework is not.
+
+## Mandatory scale & structure (read first)
+- **Multipage: build 15+ pages (recommended ~20)** — a full site map, not one page.
+- **Every page has at least 10 sections (recommend 12)** from the layouts/components.
+- **One living background per page; glass used on a *few* deliberate surfaces** (nav, hero,
+  key cards) — not everything (the anti-pattern is excessive glassmorphism).
+- **No borders or dividers between sections** — separate with `--section-y` spacing, the
+  backdrop, and glass-panel elevation. In CSS: `.section { background: transparent; border:
+  0 }`; never `<hr>`/divider or `border-top/bottom` between sections.
+- **Accessible glass:** every glass panel passes AA text contrast; ship the **solid
+  fallback** (`@supports` + `prefers-reduced-transparency`).
+- **Clean, extensionless, Vercel-ready URLs** (`/pricing`, not `/pricing.html`).
+
+## Required pages (build all — 15+; ~20 recommended)
+Home `/` · Platform `/platform` · Solutions `/solutions` · Products `/products` ·
+Features `/features` · AI Agents `/ai-agents` · Enterprise `/enterprise` · Security
+`/security` · Pricing `/pricing` · Customers `/customers` · Case Studies `/case-studies`
+· Developers `/developers` · Documentation `/docs` · About `/about` · Careers `/careers`
+· Blog `/blog` · Contact `/contact` · Partners `/partners` · Resources `/resources` ·
+FAQ `/faq`. Add product/solution/blog/doc subpages freely.
+
+## Required sections (every page — ≥10, recommend 12)
+Hero (glass) · Feature Sections · Product Highlights · Trust Signals (logos) · Testimonials
+· Use Cases · Statistics · Integrations · CTA · Footer. Add more (Security, Enterprise,
+Glass Bento, Code/Terminal, Pricing, FAQ) to reach 12.
+
+## Site types this must support
+Landing pages · startup websites · AI company websites · enterprise SaaS · developer
+platforms · agentic-AI startups · infrastructure startups. (See `example-page-structures.md`.)
+
+## What to generate
+- **HTML** — semantic, accessible, one file per page; one `.page-bg` + glass panels.
+- **CSS** — `tokens.css` (`:root` vars incl. the glass utility + fallback) + `styles.css`.
+- **JavaScript** — vanilla: nav/glass dropdown, mesh drift (or pause), reveal, hover sheen,
+  pointer glow, accordion, tabs, toggle, copy. Usable without JS; text legible without blur.
+- **`vercel.json`** + **`sitemap.xml`** + **`robots.txt`**.
+- **Design tokens** — `tokens.json` (token export only).
+- **Component specifications** — when asked for the *system*, emit component + glass-utility
+  markup from `component-library.md`/`color-system.md`.
+- **Accessibility + responsive guidance** inline (comments) and honored.
+
+## File/output layout (default — flat files + clean URLs)
+```
+website/
+├── index.html              # served at /
+├── platform.html  solutions.html  products.html  features.html  ai-agents.html
+├── enterprise.html  security.html  pricing.html  customers.html  case-studies.html
+├── developers.html  docs.html  about.html  careers.html  blog.html  contact.html
+├── partners.html  resources.html  faq.html
+├── css/  { tokens.css, styles.css }
+├── js/   { main.js }        # nav, mesh, reveal, sheen, accordion, tabs, copy
+├── assets/                  # icons, og images, optional noise.png grain
+├── tokens.json
+├── sitemap.xml  robots.txt
+└── vercel.json
+```
+Alternative: folder-per-page `platform/index.html`. Either way **all internal links are
+extensionless** (`href="/pricing"`).
+
+## Clean URLs & Vercel (MANDATORY)
+- **No `.html` in any URL**, no `page.html` links, no ugly query params.
+- Emit **`vercel.json`** so `.html` is stripped, refresh works, and deep links resolve:
+```json
+{
+  "cleanUrls": true,
+  "trailingSlash": false,
+  "headers": [
+    { "source": "/assets/(.*)", "headers": [
+      { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } ] }
+  ]
+}
+```
+  `cleanUrls: true` serves `platform.html` at `/platform` and 301-redirects `.html`.
+  Provide a `404.html`. Every nav/footer/internal link is extensionless.
+
+## Navigation system (vanilla JS, glass)
+- **Desktop nav** = `.glass--nav` bar with **glass dropdown/mega-menus**; keyboard +
+  `aria-expanded`/`aria-haspopup`.
+- **Mobile nav**: full-screen `.glass--strong` overlay, accordion, focus-trap, ESC.
+- **Multi-level nav** + **breadcrumbs** on deep pages; `aria-current="page"`.
+
+## Hard rules
+1. **Vanilla only.** No frameworks/libraries in the shipped site.
+2. **Tasteful glass.** One living background; a *few* glass panels per section (not a wall
+   of blur); primary CTAs are **solid** accent buttons.
+3. **Accessible glass (non-negotiable).** Every glass panel's text passes AA over the
+   brightest backdrop it can overlap; ship the **solid fallback** (`@supports` +
+   `prefers-reduced-transparency`); legible without blur.
+4. **Tokens first, once.** All colors/type/spacing/glass as `:root` vars; no scattered
+   hex/px; rebrand = change `--accent-*`.
+5. **No section borders.** Transparent sections over one backdrop; separate with spacing +
+   elevation. `.section{background:transparent;border:0}`.
+6. **Mobile-first + responsive**; single column by `md`; no 320px scroll; consider reducing
+   blur on low-power/mobile (performance) without losing contrast.
+7. **Semantic + accessible** per `accessibility-system.md` (contrast, focus, reduced motion/
+   transparency, fallbacks). Non-negotiable.
+8. **Components from the library** (as glass). Every component: responsive, accessible,
+   reusable, production-ready, animation-ready.
+9. **Performance:** limit large blurred surfaces per viewport; one fixed `.page-bg`; system/
+   Inter fonts; lazy-load images; animate transform/opacity/background-position (not
+   `backdrop-filter`); minimal JS; target high Lighthouse (90+).
+10. **SEO on every page** (below). **Real content, not lorem** (mark guesses `[PLACEHOLDER]`).
+11. **Self-verify** against anti-patterns + every companion checklist before done.
+
+## SEO requirements (every page)
+Unique `<title>` + meta description (150–160); **Open Graph** + **Twitter card**
+(`summary_large_image`) + OG image; **canonical** (clean URL); **JSON-LD** (`Organization`
++ `WebSite` site-wide; `Product`, `FAQPage`, `BreadcrumbList`, `Article` where relevant);
+**`sitemap.xml`** + **`robots.txt`**.
+
+## Performance requirements
+Fast first paint, minimal vanilla JS, one fixed backdrop, few blurred surfaces, optimized/
+centralized CSS, lazy media, cached assets (via `vercel.json`), no blocking libraries.
+
+## Boilerplate `<head>` + shell
+```html
+<!doctype html><html lang="en"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="dark light">
+<title><!-- Page · Brand --></title>
+<meta name="description" content="<!-- 150–160 chars -->">
+<link rel="canonical" href="https://brand.com/path">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<!-- Page · Brand -->">
+<meta property="og:description" content="<!-- … -->">
+<meta property="og:url" content="https://brand.com/path">
+<meta property="og:image" content="https://brand.com/assets/og.png">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="stylesheet" href="/css/tokens.css">
+<link rel="stylesheet" href="/css/styles.css">
+<script type="application/ld+json"><!-- Organization / WebSite JSON-LD --></script>
+</head>
+<body>
+  <div class="page-bg" aria-hidden="true"></div>   <!-- the one living background -->
+  <a class="skip-link" href="#main">Skip to content</a>
+  <header><!-- .glass--nav (links extensionless: /platform, /pricing) --></header>
+  <main id="main"><!-- glass hero + 10–12 transparent sections, no dividers --></main>
+  <footer><!-- Footer --></footer>
+  <script src="/js/main.js" defer></script>
+</body></html>
+```
+
+## Required base CSS (no section borders; one backdrop)
+```css
+html, body { background: var(--bg-base); color: var(--text-secondary); }
+.page-bg { position: fixed; inset: 0; z-index:-1; background: var(--bg-mesh); }
+.section { background: transparent; padding-block: var(--section-y); border: 0; } /* no dividers */
+.section + .section { border-top: 0; }
+/* Separation = whitespace (--section-y) + the living backdrop + glass-panel elevation.
+   Never add <hr>/divider elements between sections. Glass utility + fallback live in tokens.css. */
+```
+
+## tokens.json shape (excerpt)
+```json
+{
+  "color": { "bgBase":"#07070d", "mesh":["#6d28d9","#2563eb","#0891b2","#db2777"],
+             "glass": {"bg":"rgba(255,255,255,0.08)","strong":"rgba(255,255,255,0.14)","solid":"#14141d","blur":"18px"},
+             "text": {"primary":"#f4f5fb","secondary":"#c7cbd9","muted":"#9aa0b4"},
+             "accent": {"base":"#8b5cf6","2":"#22d3ee"} },
+  "space": { "4":"16px","6":"24px","8":"32px","16":"64px" },
+  "radius": { "lg":"18px","xl":"22px","2xl":"28px","pill":"999px" },
+  "type": { "display":"clamp(2.5rem,1.4rem + 5.2vw,5rem)", "body":"1rem" }
+}
+```
+
+## Definition of done
+**15+ pages (≈20), each with ≥10 sections (≈12), one living background per page, a few
+tasteful accessible glass panels, no borders/dividers between sections.** Pure HTML/CSS/
+vanilla JS (no frameworks/libraries); every glass panel passes AA + ships a solid fallback
+(`@supports`/`prefers-reduced-transparency`); clean extensionless URLs with `vercel.json`
+(refresh + deep links work); glass desktop nav + mobile + breadcrumb; per-page SEO +
+sitemap; tokens centralized; fully responsive; reduced motion/transparency honored; good
+performance (few blurs); zero anti-patterns; could sit next to Apple/visionOS/Stripe glass
+without looking gimmicky.

package/skills/linkedin-copywriting/README.md

@@ -1,8 +1,9 @@
 # linkedin-copywriting
 
-Generate complete, ready-to-paste copy for a **LinkedIn Company Page** — written
-like a senior unicorn-startup marketer: humanized, attention-grabbing, and
-conversion-focused, with **every field kept under its character limit**.
+Generate complete, ready-to-paste copy for a **LinkedIn Company Page** (plus an
+optional launch/founder post) — written like a senior unicorn-startup marketer:
+humanized, attention-grabbing, and conversion-focused, with **every field kept
+under its character limit**.
 
 ## Install
 
@@ -32,8 +33,9 @@ It gathers your company details, then writes
 ## Output
 
 `linkedin copywriting/linkedin-page-copy.txt` — company name, tagline, About /
-Overview, specialties, industry, size, HQ, founded, and an optional intro post,
-each with a live `(count/limit)`.
+Overview, specialties, hashtags, custom CTA, suggested Featured pin, industry,
+size, HQ + other locations, founded, plus an optional launch post and founder
+announcement post, each with a live `(count/limit)`.
 
 ## Character limits (kept under, ~10% headroom)
 
@@ -42,8 +44,13 @@ each with a live `(count/limit)`.
 | Company name | 100 |
 | Tagline | 120 |
 | About / Overview | 2000 (first ~150 chars = preview hook) |
-| Specialty (each) | 30 |
+| Specialty (each) | 60 |
 | Specialties (total) | 20 items |
-| Intro/launch post | 3000 |
+| Hashtags | 3 |
+| Launch / founder post | 3000 |
 
-See `SKILL.md` for the full voice/quality standard and output template.
+CTA picks from LinkedIn presets: Visit website, Contact us, Learn more, Register,
+Sign up, Apply now.
+
+See `SKILL.md` for the full field guidance, humanization toolkit, post-writing
+tips, and output template.

package/skills/linkedin-copywriting/SKILL.md

@@ -1,37 +1,44 @@
 ---
 name: linkedin-copywriting
 description: >-
-  Generate complete, ready-to-paste copywriting for a LinkedIn Company Page,
-  written like a senior unicorn-startup marketer — humanized, attention-grabbing,
-  and conversion-focused. Use when the user asks to "write our LinkedIn page",
-  "create LinkedIn company copy", "fill out the About section", or prepare LinkedIn
-  page content. Produces a single .txt file under a `linkedin copywriting/` folder
-  in the project root, with every field kept STRICTLY under its character limit.
+  Generate complete, ready-to-paste copywriting for a LinkedIn Company Page
+  (tagline, About, specialties, hashtags, locations, CTA, Featured) PLUS an
+  optional founder/launch post — written like a senior unicorn-startup marketer:
+  humanized, attention-grabbing, and conversion-focused. Use when the user asks to
+  "write our LinkedIn page", "create LinkedIn company copy", "fill out the About
+  section", "write a launch post", or prepare LinkedIn page content. Produces a
+  single .txt file under a `linkedin copywriting/` folder in the project root, with
+  every field kept STRICTLY under its character limit.
 ---
 
 # LinkedIn Company Page Copywriting
 
-Produce field-by-field copy for a LinkedIn **Company Page**, save it to a plain-text
-file, and guarantee every field stays **below** LinkedIn's character limits.
+Produce field-by-field copy for a LinkedIn **Company Page**, save it to a
+plain-text file, and guarantee every field stays **below** LinkedIn's character
+limits. Optionally drafts the pinned launch/intro post and a founder announcement.
 
 ## When to use
 
 The user wants copy for their LinkedIn company/organization page (tagline, About
-section, specialties, etc.). If company details are missing, ask focused
-questions first (see "Inputs needed").
+section, specialties, hashtags, CTA, Featured) or a post to launch it. If company
+details are missing, ask focused questions first (see "Inputs needed").
 
 ## Inputs needed
 
 Before writing, gather (ask the user, or infer from the repo/website if available):
 
-- Company name and what it does in one line
+- Company name and what it does in one line, for whom
 - Industry, target audience, and core offerings
-- Mission / values and key differentiators
-- Top keywords customers/recruiters would search (for tagline + specialties + SEO)
-- Website, headquarters location, company size, founded year
+- Mission / values and key differentiators (the real wedge, not slogans)
+- Top keywords customers/recruiters/partners would search (for tagline,
+  specialties, hashtags, and About SEO)
+- Proof points: customers, users, revenue, growth, funding, awards, press
+- The one action you want a visitor to take (follow, visit site, contact, apply)
+- Website, headquarters location (and any other offices), company size, founded year
+- Any pinned/launch content you want to feature
 
 If the user says "just draft it", use clearly-marked placeholders (e.g.
-`[FOUNDED: 2023]`) instead of blocking.
+`[FOUNDED: 2023]`, `[USERS: X]`) instead of blocking, and flag every guess.
 
 ## Output location
 
@@ -48,24 +55,48 @@ field and trim if needed.
 | Field                        | Limit (chars) | Target (stay under) | Notes |
 |------------------------------|---------------|---------------------|-------|
 | Company name                 | 100           | ≤ 90                | Official name |
-| Tagline                      | 120           | ≤ 110               | Appears under the name; keyword-rich |
-| About / Overview             | 2000          | ≤ 1800              | Front-load value in first ~150 chars (preview) |
-| Specialty (each item)        | 30            | ≤ 28                | Up to 20 items total |
-| Specialties (total count)    | 20 items      | ≤ 20                | Keyword phrases |
-| Custom button / CTA text     | (preset)      | —                   | Choose from LinkedIn presets |
-| Featured post / update text  | 3000          | ≤ 2700              | If drafting a launch/intro post |
-
-If LinkedIn shows a different live limit than above, obey the live limit and keep
-the same "stay under" headroom rule.
+| Tagline                      | 120           | ≤ 110               | Under the name; benefit + keyword-rich |
+| About / Overview             | 2000          | ≤ 1800              | First ~150 chars = "see more" preview hook |
+| Specialty (each item)        | 60            | ≤ 55                | Keyword phrase; up to 20 items |
+| Specialties (total count)    | 20 items      | ≤ 20                | Services, tech, markets, audiences |
+| Hashtags (community)         | up to 3       | 3                   | Broad, relevant, followable topics |
+| Custom button / CTA          | preset list   | —                   | Pick one (see options below) |
+| Featured items               | 3–5 shown     | —                   | Pin best post/link/doc |
+| Launch / intro post          | 3000          | ≤ 2700              | Feed post; first ~140 chars = preview |
+| Founder announcement post    | 3000          | ≤ 2700              | Personal-profile voice, optional |
+
+LinkedIn sometimes shows different live limits (and specialty caps have shifted
+between 30 and 60 over time). **Obey whatever the live field shows**, and keep the
+same "stay under" headroom rule. Custom button options to choose from: *Visit
+website, Contact us, Learn more, Register, Sign up, Apply now.*
+
+## Per-field micro-guidance (with before → after)
+
+- **Tagline** — lead with the benefit + a searchable term, not a mood.
+  - ❌ "Reimagining the future of finance." → ✅ "Expense management software that
+    closes the books 5 days faster."
+- **About, first line** — this is the preview before "see more." Make it a
+  standalone hook that names who you help and the outcome.
+  - ❌ "Founded in 2021, we are a company that provides..." → ✅ "12,000 founders
+    use Riverside to raise their next round in weeks, not months."
+- **About body** — problem → what you do → proof → one clear next step. Use short
+  paragraphs and line breaks; LinkedIn renders them.
+- **Specialties** — short keyword phrases a searcher would type: services,
+  technologies, markets, audiences (e.g. "B2B SaaS onboarding", "HIPAA-compliant
+  messaging"). No sentences.
+- **Hashtags** — pick 3 broad, active topics your audience already follows, not
+  niche brand tags no one searches.
+- **CTA** — match the button to the page's single goal (early traction → *Sign up*;
+  enterprise → *Contact us*; hiring push → *Apply now*).
 
 ## Copy rules (LinkedIn style)
 
 - **Front-load the About section**: the first ~150 characters show as a preview
   before "see more", so lead with the strongest value statement and keywords.
 - Write for both **humans and search** — include the terms recruiters, customers,
-  and partners would search, naturally (no stuffing).
+  and partners would search, naturally (no stuffing). Keywords serve the sentence.
 - Tagline should be benefit- or keyword-led, not a slogan with no information.
-- Specialties = short keyword phrases (services, technologies, markets), each ≤ 28 chars.
+- Specialties = short keyword phrases (services, technologies, markets, audiences).
 - Tone: professional, confident, specific. Avoid empty hype.
 - End the About section with a clear next step (visit site, follow, contact).
 
@@ -77,41 +108,55 @@ Linear, Ramp, Airbnb). The page should feel sharp, confident, and unmistakably
 human — like a person customers and recruiters *want* to follow. Non-negotiable:
 
 **1. Humanized — sounds like a real person, never "AI-generated".**
-- Vary sentence length. Mix short, punchy lines with one longer, rhythmic one.
+- Vary sentence length on purpose. A short, punchy line next to a longer rhythmic
+  one reads human. Two medium sentences in a row read like a machine.
 - Plain, concrete language a smart 12-year-old could follow. Cut jargon.
 - Write with a point of view and a pulse — confident, not corporate-bland.
+- Use the words a founder would actually say in a meeting; contractions welcome.
 - Read it aloud in your head; if a sentence sounds robotic, rewrite it.
 
 **2. Banned "AI tells" — never use these.**
 - Filler: "leverage", "utilize", "seamlessly", "robust", "cutting-edge",
   "state-of-the-art", "empower", "unlock", "elevate", "revolutionize",
   "game-changer", "in today's fast-paced world", "we are committed to",
-  "passionate about", "at the intersection of", "solutions provider".
+  "passionate about", "at the intersection of", "designed to", "aims to",
+  "solutions provider", "one-stop shop".
 - Hype with no proof: "best", "#1", "world-class", "industry-leading".
-- Em-dash overuse, robotic three-item lists, and "not only… but also"
-  scaffolding. Break the pattern; write like a human, not a template.
-
-**3. Attracting & focused — earn the next 5 seconds of attention.**
-- The first ~150 chars of About are the hook shown before "see more" — make them
-  a magnetic, standalone value statement, not a throat-clearing intro.
-- One core idea per section. Specific > vague every time: real numbers, named
-  customers, concrete outcomes. "Helps 12,000 founders raise faster" beats
-  "provides solutions for startups".
+- Em-dash overuse, robotic three-item lists ("fast, simple, and powerful"), and
+  "not only… but also" scaffolding. Break the pattern; write like a human.
+- Confidence-draining hedges: "very", "really", "quite", "things", "various".
+
+**3. The humanization toolkit (use these on purpose).**
+- **Burstiness:** deliberately alternate long and short sentences. Land a section
+  on a short line.
+- **Specificity beats adjectives:** "12,000 founders" not "many founders," "5 days
+  faster" not "more efficient," "$14B market" not "a huge market."
+- **Name real things:** customers, cities, tools, dollar amounts, dates.
+- **One human detail:** the exact frustration that started the company, a customer
+  quote, a founder origin moment. One genuine detail beats a polished paragraph.
+- **Active voice, present tense, strong verbs:** "We cut close time to 3 days,"
+  not "Close time can be reduced."
+
+**4. Attracting & focused — earn the next 5 seconds of attention.**
+- The first ~150 chars of About are the hook shown before "see more" — make them a
+  magnetic, standalone value statement, not a throat-clearing intro.
+- One core idea per section. Specific > vague every time.
 - Lead with the reader's problem and the outcome, then how you deliver it.
-- Active voice, present tense, strong verbs. Subject does the thing.
 
-**4. LinkedIn lens (humans + search).**
-- Weave the terms customers/recruiters/partners actually search — naturally,
-  never stuffed. Keywords serve the sentence, not the other way around.
+**5. LinkedIn lens (humans + search).**
+- Weave the terms customers/recruiters/partners actually search — naturally, never
+  stuffed. Keywords serve the sentence, not the other way around.
 - Tagline = benefit- or category-led with a real hook, not a hollow slogan.
 - Close About with one clear next step (follow, visit site, get in touch).
 
-**5. Final humanization pass (always run before saving).**
+**6. Final humanization pass (always run before saving).**
 - Remove every banned word above; replace with plain, specific language.
 - Delete adjectives that aren't earned by a fact.
 - Tighten: if a word can be cut without losing meaning, cut it.
 - Ensure no two consecutive sentences share the same shape or opener.
-- Confirm it reads like one confident human voice end to end.
+- Confirm at least one concrete, human detail appears in the About section.
+- Read it aloud once. If a line sounds like a brochure, rewrite it. It should read
+  like one confident human voice end to end.
 
 ## Required .txt output template
 
@@ -132,10 +177,20 @@ Generated: <YYYY-MM-DD>
 <value (first ~150 chars are the preview — make them count)>
 
 [SPECIALTIES]            (count: xx/20)
-1. <item> (xx/30)
-2. <item> (xx/30)
+1. <item> (xx/60)
+2. <item> (xx/60)
 ...
 
+[HASHTAGS]               (count: x/3)
+#<tag> #<tag> #<tag>
+
+[CUSTOM BUTTON / CTA]
+<one of: Visit website | Contact us | Learn more | Register | Sign up | Apply now>
+URL: <url>
+
+[FEATURED — SUGGESTED PIN]
+<what to pin and why (post, link, doc, or video)>
+
 [WEBSITE]
 <url>
 
@@ -148,20 +203,43 @@ Generated: <YYYY-MM-DD>
 [HEADQUARTERS]
 <city, country>
 
+[OTHER LOCATIONS]
+<city, country; ...>
+
 [FOUNDED]
 <year>
 
-[OPTIONAL — LAUNCH/INTRO POST]  (xx/3000)
-<value>
+[OPTIONAL — LAUNCH / INTRO POST]  (xx/3000)
+<value (first ~140 chars are the feed preview — make them count)>
+
+[OPTIONAL — FOUNDER ANNOUNCEMENT POST]  (xx/3000)
+<value (personal-profile voice, first-person)>
 ```
 
+## Post-writing guidance (launch & founder posts)
+
+When drafting the optional posts:
+- **First ~140 characters carry the post** — that's all that shows in the feed
+  before "see more." Open with a hook, a number, or a sharp statement; never bury
+  the lede under "We're excited to announce."
+- **One line per thought, generous line breaks** — LinkedIn rewards scannable
+  posts.
+- **Founder post = first person, plain, a little vulnerable.** Tell the why-now
+  story and the problem you lived. End with a clear ask (follow the page, try it,
+  share with someone who needs it).
+- **Company post = confident "we" voice** with the headline proof and the next step.
+- Keep banned "AI tells" out of posts too — feed copy is where they show most.
+
 ## Verification checklist (run before finishing)
 
 1. The `linkedin copywriting/` folder exists in the project root and contains
    `linkedin-page-copy.txt`.
 2. Every length-limited field shows a `(count/limit)` and `count < limit` with headroom.
-3. Specialties: ≤ 20 items, each ≤ 28 chars.
+3. Specialties: ≤ 20 items, each ≤ 55 chars; hashtags ≤ 3.
 4. About section's first ~150 chars work as a standalone preview hook.
-5. Confirm counts programmatically (e.g. `awk`/`wc -m` per field) — do not trust eyeballing.
-6. Humanization pass done: zero banned "AI tells", varied sentence shapes, reads
-   like one confident human marketer wrote it, and every claim is specific.
+5. CTA chosen from LinkedIn's preset list and matches the page's single goal.
+6. Confirm counts programmatically (e.g. `awk`/`wc -m` per field) — do not trust eyeballing.
+7. Every metric is real or clearly marked `[PLACEHOLDER]` — no invented numbers.
+8. Humanization pass done: zero banned "AI tells", varied sentence shapes, at least
+   one concrete human detail in About, and it reads aloud like one confident human
+   marketer wrote it.

package/skills/motion-storytelling-design-system/README.md

@@ -0,0 +1,100 @@
+# motion-storytelling-design-system
+
+A world-class, **motion storytelling design system** for building **scroll-driven narrative
+websites** — where the page tells a story as you scroll: scenes **pin** while their content
+animates, sequences **scrub** to scroll progress, elements **reveal** in choreographed order,
+and gentle parallax adds depth. The craft of Apple product pages and award-winning
+scrollytelling, built **performantly and accessibly in pure vanilla**. Distilled from Apple,
+Stripe, Linear, Igloo Inc, Active Theory, Cuberto, Awwwards winners, and modern AI sites
+(OpenAI, Anthropic, Perplexity, Cursor, Runway).
+
+It also ships a **production website-generation framework**: a multipage site (15+ pages, 10+
+scenes/page, **no borders/dividers between sections**) in **pure HTML/CSS/vanilla JS** — the
+motion engine is `IntersectionObserver` + rAF scroll + CSS scroll-linked animations, with **no
+GSAP/Framer/Lenis/React/Vue/Tailwind/any library** — with **clean Vercel-ready URLs** (no
+`.html`), navigation, and full SEO.
+
+> The full design intelligence is **baked into the companion files** (live research optional,
+> to save tokens). Outputs a generated site/system into a `website/` folder. Sibling skills:
+> `ai-dark-futuristic-design-system`, `apple-premium-minimal-design-system`,
+> `product-demo-first-design-system`, `bento-grid-design-system`, `glassmorphism-design-system`,
+> `editorial-luxury-design-system`.
+
+## Install
+
+```bash
+npx spirewise install -s motion-storytelling-design-system          # pick agents + scope
+npx spirewise install -s motion-storytelling-design-system -a claude,cursor -sc workspace
+```
+
+## Remove
+
+```bash
+npx spirewise remove -s motion-storytelling-design-system           # pick agents + scope
+npx spirewise remove -s motion-storytelling-design-system -a claude,cursor -sc both
+```
+
+(No Node? `./install.sh -s motion-storytelling-design-system` and `./install.sh remove -s motion-storytelling-design-system`.)
+
+## Use
+
+After installing, ask your agent:
+
+> "Build a scroll-driven, motion storytelling website for our product"
+> "Pinned scenes + scrub sequences, like Apple/Stripe — but accessible"
+
+It reads the companion files, locks the tokens, storyboards the scroll (which scenes pin/
+scrub/reveal), builds the scenes + the vanilla motion engine, honors reduced motion, and
+emits **pure HTML + CSS + vanilla JS + tokens + `vercel.json` + `sitemap.xml`** into a
+`website/` folder.
+
+## What's inside
+
+| File | What it gives you |
+|---|---|
+| `SKILL.md` | Orchestrator: storytelling philosophy, mandates, workflow, output, checklist |
+| `design-principles.md` | "Scroll is the narrator" philosophy, motion hierarchy, do/don'ts |
+| `color-system.md` | Cinematic palette + scene-transition tokens (default dark) as CSS vars |
+| `typography-system.md` | Fonts, fluid type scale, **kinetic-type** roles |
+| `spacing-system.md` | 4/8-pt scale, container widths, **scroll-track** + scene rhythm |
+| `layout-system.md` | Grid + canonical scene layouts (pinned, scrub, reveal, horizontal) |
+| `component-library.md` | 17 components + Scroll Scene / Pinned Sequence / Reveal Timeline |
+| `motion-system.md` | The **engine**: IO, sticky-scene progress, scrub, parallax, reduced motion |
+| `accessibility-system.md` | Reduced motion (critical), no scroll-jack, focus, vestibular safety |
+| `website-generation-rules.md` | Pure-vanilla build: pages, clean URLs + `vercel.json`, nav, SEO |
+| `example-page-structures.md` | Scroll-narrative page blueprints per site type |
+
+## The look
+
+A cinematic dark canvas with deep gradients that **shift between scenes**, bold kinetic display
+type, one vivid accent that **traces the story**, layered parallax depth, and product/SVG
+sequences that assemble on scroll. Smooth, premium, purposeful — never jittery or gimmicky.
+Default cinematic dark; light theme included.
+
+## Components (17 + storytelling toolkit)
+
+Navbar (+ Scroll Progress) · Kinetic Hero · Feature Scenes · Bento · Testimonials · Logos ·
+Pricing · FAQ · CTA Finale · Footer · Dashboard Preview · Agent Workflow · Code Preview ·
+Terminal Preview · Trust (count-up) · Security · Enterprise — **plus** Scroll Scene · Pinned
+Sequence · Reveal Timeline · Horizontal Scene · Scroll Progress.
+
+## Rules it enforces
+
+- **Scroll storytelling** — each page has a narrative arc; pinned/scrub/reveal scenes with
+  designed choreography; big beats alternate with calm passages; one strong motion per scene.
+- **Accessible motion (critical)** — fully honors `prefers-reduced-motion` (final-state,
+  unpinned, no scrub/parallax) + a "Reduce motion" toggle; **never hijacks native scroll**;
+  all content readable with motion off; vestibular-safe; contrast holds mid-animation.
+- **Multipage scale (mandatory)** — **15+ pages (≈20)**, **≥10 scenes/page (≈12)**, and **no
+  borders/dividers between sections** (separation by whitespace + animated scene transitions + depth).
+- **Pure vanilla stack** — HTML5 + CSS3 + vanilla JS only; the motion engine is IO + rAF + CSS
+  scroll-linked animations; **no GSAP/Framer/Lenis/AOS/React/Vue/Tailwind/any library**; no build.
+- **Clean Vercel-ready URLs** — extensionless routes (`/pricing`), `vercel.json` (`cleanUrls`),
+  `sitemap.xml`, `robots.txt`; refresh + deep links work.
+- **Full navigation + SEO** — desktop nav/dropdowns + scroll progress, mobile overlay,
+  breadcrumbs; per-page title/description, Open Graph, Twitter card, canonical, JSON-LD.
+- **Performance** — compositor-only (`transform`/`opacity`), rAF-throttled passive scroll, IO
+  reveals, `content-visibility` offscreen, scenes **unpin on mobile**; 60fps target. **Zero
+  anti-patterns** — no scroll-jacking, content trapped behind motion, jank, or libraries.
+
+See `SKILL.md` for the full workflow and the companion files for every token and spec.