@getvitops/create 0.9.0-alpha.0 → 0.9.0-alpha.2

package/templates/emdash/package.json

@@ -5,12 +5,12 @@
   "type": "module",
   "scripts": {
     "dev": "astro dev",
-    "build": "astro build && vitops emdash check-prerender",
+    "build": "vitops emdash build",
     "preview": "astro preview",
     "pull-content": "node scripts/pull-content.mjs",
     "prepare-local-db": "vitops emdash prepare-db",
-    "deploy": "vitops email check && node scripts/pull-content.mjs && vitops emdash prepare-db && astro build && vitops emdash check-prerender && emdash migrate --wrangler-config wrangler.jsonc && wrangler deploy",
-    "deploy:dev": "vitops email check && node scripts/pull-content.mjs && vitops emdash prepare-db && astro build && vitops emdash check-prerender && node scripts/build-dev-wrangler.mjs && emdash migrate --wrangler-config dist/server/wrangler.dev.json && wrangler deploy --config dist/server/wrangler.dev.json",
+    "deploy": "vitops email check && node scripts/pull-content.mjs && vitops emdash prepare-db && vitops emdash build && emdash migrate --wrangler-config wrangler.jsonc && wrangler deploy",
+    "deploy:dev": "vitops email check && node scripts/pull-content.mjs && vitops emdash prepare-db && vitops emdash build && node scripts/build-dev-wrangler.mjs && emdash migrate --wrangler-config dist/server/wrangler.dev.json && wrangler deploy --config dist/server/wrangler.dev.json",
     "init:github": "vitops setup repo",
     "init:hosting": "vitops setup hosting",
     "setup": "vitops setup all",
@@ -18,7 +18,7 @@
     "build:css": "vitops generate -i site.json -f tailwind -o src/styles",
     "lint:design": "vitops lint -i site.json -f tailwind --strict",
     "sop": "vitops generate -i site.json -f css -o .vitops/sop",
-    "prepare": "vp config"
+    "prepare": "vp config && skills experimental_sync -y -a claude-code --no-frozen-lockfile"
   },
   "dependencies": {
     "@astrojs/cloudflare": "^14.0.0",
@@ -27,6 +27,7 @@
     "@getvitops/astro": "latest",
     "@getvitops/core": "latest",
     "@getvitops/emdash": "latest",
+    "@getvitops/skills": "latest",
     "@tailwindcss/vite": "^4.3.3",
     "astro": "^7.4.4",
     "emdash": "latest",
@@ -39,6 +40,7 @@
     "@cloudflare/workers-types": "^4.20260305.1",
     "@getvitops/cli": "latest",
     "@iconify-json/fa7-solid": "^1.2.5",
+    "skills": "^1.7.6",
     "typescript": "^6.0.3",
     "vite": "latest",
     "vite-plus": "latest",

package/templates/emdash/public/_headers

@@ -1,7 +1,7 @@
 # Cloudflare static-assets response headers. They apply to files served from the
 # static asset store — the prerendered pages — and NOT to responses the Worker
 # renders itself (the EmDash admin at /_emdash/*, its API, anything left
-# on-demand). See AGENTS.md "Content Security Policy".
+# on-demand). See .agents/skills/csp.
 #
 # REPORT-ONLY on purpose: violations are logged to the browser console and
 # nothing is blocked, so this cannot break a page. Read the console on the

package/templates/emdash/scripts/pull-content.mjs

@@ -6,7 +6,7 @@
 // `astro build`. The Cloudflare adapter prerenders inside a local workerd with a
 // LOCAL D1 (`.wrangler/state`), never the deployed database — so on a CI runner
 // the build would see an empty, auto-seeded database and bake "No home page yet"
-// into every page. Production is the truth for content (see AGENTS.md), so this
+// into every page. Production is the truth for content (see .agents/skills/content-and-deploys), so this
 // copies production's D1 into the local one first.
 //
 //   wrangler d1 export <db> --remote   →   .vitops/content.sql

package/templates/emdash/seed/seed.json

@@ -15,6 +15,7 @@
       "slug": "pages",
       "label": "Pages",
       "labelSingular": "Page",
+      "urlPattern": "/{slug}",
       "supports": ["drafts", "revisions", "seo"],
       "fields": [
         {
@@ -81,6 +82,48 @@
       ]
     }
   ],
+  "widgetAreas": [
+    {
+      "name": "announcement",
+      "label": "Announcement bar",
+      "description": "Shown above the header on every page. Empty until you add a widget.",
+      "widgets": []
+    },
+    {
+      "name": "pre-footer",
+      "label": "Above the footer",
+      "description": "A call to action shown above the footer on every page (Widgets in the admin).",
+      "widgets": [
+        {
+          "type": "content",
+          "title": "Ready to talk?",
+          "content": [
+            {
+              "_type": "block",
+              "_key": "pf-text",
+              "style": "normal",
+              "markDefs": [],
+              "children": [
+                {
+                  "_type": "span",
+                  "_key": "pf-text-s",
+                  "text": "Tell us what you need and we will reply within one business day.",
+                  "marks": []
+                }
+              ]
+            },
+            {
+              "_type": "vitops_actionLink",
+              "_key": "pf-cta",
+              "label": "Contact us",
+              "href": "/contact",
+              "variant": "cta"
+            }
+          ]
+        }
+      ]
+    }
+  ],
   "content": {
     "pages": [
       {
@@ -119,10 +162,11 @@
               ]
             },
             {
-              "_type": "vitops.hero",
+              "_type": "vitops_hero",
               "_key": "demo-hero",
               "eyebrow": "Vitops blocks",
               "heading": "Build pages from design-system patterns",
+              "level": "2",
               "body": "Every block below renders a framework pattern, so it follows your tokens and works without JavaScript.",
               "primaryLabel": "Open the admin",
               "primaryHref": "/_emdash/admin",
@@ -131,7 +175,7 @@
               "layout": "centered"
             },
             {
-              "_type": "vitops.cards",
+              "_type": "vitops_cards",
               "_key": "demo-cards",
               "columns": "3",
               "cards": [
@@ -155,7 +199,7 @@
               ]
             },
             {
-              "_type": "vitops.accordion",
+              "_type": "vitops_accordion",
               "_key": "demo-accordion",
               "exclusive": true,
               "items": [
@@ -173,7 +217,7 @@
               ]
             },
             {
-              "_type": "vitops.marquee",
+              "_type": "vitops_marquee",
               "_key": "demo-marquee",
               "pauseOnHover": true,
               "reverse": false,
@@ -197,14 +241,14 @@
               ]
             },
             {
-              "_type": "vitops.banner",
+              "_type": "vitops_banner",
               "_key": "welcome-banner",
               "message": "This banner is a Vitops block — dismiss it, then edit this page in the EmDash admin.",
               "tone": "info",
               "dismissible": true
             },
             {
-              "_type": "vitops.details",
+              "_type": "vitops_details",
               "_key": "next-steps",
               "summary": "Next steps",
               "body": "Adjust site.json (under designSystem.themes.default) to your brand (colors, type, patterns), replace src/assets/logo.svg, then deploy with `pnpm deploy`.",
@@ -245,7 +289,7 @@
           "title": "Terms & Conditions",
           "content": [
             {
-              "_type": "vitops.banner",
+              "_type": "vitops_banner",
               "_key": "terms-placeholder",
               "message": "Placeholder text — replace with your own terms before launch. This is not legal advice.",
               "tone": "warning",
@@ -346,7 +390,7 @@
           "title": "Privacy Policy",
           "content": [
             {
-              "_type": "vitops.banner",
+              "_type": "vitops_banner",
               "_key": "privacy-placeholder",
               "message": "Placeholder text — replace with your own privacy policy before launch. This is not legal advice.",
               "tone": "warning",
@@ -461,7 +505,7 @@
           "title": "Contact",
           "content": [
             {
-              "_type": "vitops.banner",
+              "_type": "vitops_banner",
               "_key": "contact-placeholder",
               "message": "Placeholder text — replace with your contact details before launch.",
               "tone": "warning",
@@ -482,15 +526,35 @@
               ]
             },
             {
-              "_type": "vitops.form",
+              "_type": "vitops_form",
               "_key": "contact-form",
               "heading": "Send us a message",
               "level": "2",
               "fields": [
-                { "label": "Your name", "name": "name", "type": "text", "required": true },
-                { "label": "Email", "name": "email", "type": "email", "required": true },
-                { "label": "Phone", "name": "phone", "type": "tel", "required": false },
-                { "label": "Message", "name": "message", "type": "textarea", "required": true }
+                {
+                  "label": "Your name",
+                  "name": "name",
+                  "type": "text",
+                  "required": true
+                },
+                {
+                  "label": "Email",
+                  "name": "email",
+                  "type": "email",
+                  "required": true
+                },
+                {
+                  "label": "Phone",
+                  "name": "phone",
+                  "type": "tel",
+                  "required": false
+                },
+                {
+                  "label": "Message",
+                  "name": "message",
+                  "type": "textarea",
+                  "required": true
+                }
               ],
               "submitLabel": "Send message",
               "successMessage": "Thanks. Your message has been sent and we will reply soon."
@@ -506,7 +570,7 @@
           "title": "Cookie Notice",
           "content": [
             {
-              "_type": "vitops.banner",
+              "_type": "vitops_banner",
               "_key": "cookies-placeholder",
               "message": "Placeholder text — replace with your own cookie notice before launch. This is not legal advice. `vitops legal` can generate a draft from site.json.",
               "tone": "warning",

package/templates/emdash/site.json

@@ -23,8 +23,14 @@
             }
           },
           "roles": {
-            "neutral": { "hue": "ink", "kind": "surface" },
-            "surface": { "hue": "ink", "kind": "surface" },
+            "neutral": {
+              "hue": "ink",
+              "kind": "surface"
+            },
+            "surface": {
+              "hue": "ink",
+              "kind": "surface"
+            },
             "ui-primary": "brand",
             "brand-primary": "brand",
             "info": "sky",
@@ -221,6 +227,46 @@
               "size": "var(--text-m)",
               "weight": 400,
               "line-height": "1.55"
+            },
+            "title": {
+              "family": "display",
+              "size": "var(--text-2xl)",
+              "weight": 600,
+              "line-height": "1.15",
+              "tracking": "-0.025em",
+              "text-wrap": "balance"
+            },
+            "lead": {
+              "family": "sans",
+              "size": "var(--text-l)",
+              "weight": 400,
+              "line-height": "1.5",
+              "text-wrap": "pretty"
+            },
+            "caption": {
+              "family": "sans",
+              "size": "var(--text-s)",
+              "weight": 400,
+              "line-height": "1.3",
+              "text-wrap": "pretty",
+              "color": "var(--color-text-neutral-muted)"
+            },
+            "eyebrow": {
+              "family": "sans",
+              "size": "var(--text-s)",
+              "weight": 600,
+              "line-height": "1.3",
+              "tracking": "0.08em",
+              "text-transform": "uppercase",
+              "text-wrap": "balance"
+            },
+            "footnote": {
+              "family": "sans",
+              "size": "var(--text-xs)",
+              "weight": 400,
+              "line-height": "1.4",
+              "text-wrap": "pretty",
+              "color": "var(--color-text-neutral-muted)"
             }
           },
           "headings": {
@@ -263,6 +309,17 @@
   },
   "site": {
     "defaultLocale": "en",
+    "templates": {
+      "contact": {
+        "type": "form",
+        "fields": [
+          { "name": "name", "type": "text", "required": true },
+          { "name": "email", "type": "email", "required": true },
+          { "name": "tel", "type": "tel" },
+          { "name": "message", "type": "textarea", "required": true }
+        ]
+      }
+    },
     "locales": {
       "en": {
         "name": "English"

package/templates/emdash/src/layouts/Layout.astro

@@ -7,6 +7,7 @@ import SiteFooter from '@getvitops/astro/components/SiteFooter.astro';
 import SiteNav from '@getvitops/astro/components/SiteNav.astro';
 import { loadNavMenus } from '@getvitops/astro/components/sitenav.ts';
 import { EmDashHead } from 'emdash/ui';
+import { VitopsWidgetArea } from '@getvitops/emdash/astro';
 import config from '../../site.json' with { type: 'json' };
 // Design-system CSS, layout-scoped (vitops css.inject: false): only pages
 // rendered through this layout get it — keeps it out of /_emdash/admin, while
@@ -72,6 +73,8 @@ const orgName = config.organization?.name || siteTitle;
     <VitopsHead />
   </head>
   <body>
+    <!-- Widget areas (Widgets in the admin): the same content wherever they appear. -->
+    <VitopsWidgetArea name="announcement" class="centered" />
     <header class="navbar-sticky centered">
       <div class="navbar">
         <a class="brand flex items-center" href="/" aria-label={`${siteTitle} home`}>
@@ -89,6 +92,8 @@ const orgName = config.organization?.name || siteTitle;
       <slot />
     </main>
 
+    <VitopsWidgetArea name="pre-footer" class="centered" />
+
     <SiteFooter class="centered" sitemap={footerSitemap} legal={footerLegal} name={orgName} />
 
     <style>

package/templates/emdash/src/pages/[...slug].astro

@@ -8,7 +8,7 @@ import Layout from '../layouts/Layout.astro';
 // the content database — `scripts/pull-content.mjs` loads production's into the
 // local build database first (it is part of `deploy`/`deploy:dev`) — so an edit
 // in the admin goes live on the next rebuild, which a publish webhook triggers
-// (see AGENTS.md "Rendering and freshness").
+// (see .agents/skills/content-and-deploys).
 //
 // There is no `Astro.rewrite('/404')` here and no on-demand fallback: a URL that
 // isn't in the list below simply has no route, so Astro serves the prerendered

package/templates/emdash/src/pages/api/track.ts

@@ -1,8 +1,8 @@
 /**
- * The site's one on-demand endpoint: contact-form posts (the `vitops.form` block) and the
+ * The site's one on-demand endpoint: contact-form posts (the `vitops_form` block) and the
  * conversion beacons (`<Tracking />`, `tel:`/`mailto:` clicks) all arrive here.
  *
- * Every public page is prerendered (see AGENTS.md, "Rendering and freshness"); this route sets
+ * Every public page is prerendered (see .agents/skills/content-and-deploys); this route sets
  * `prerender = false` because it has to run on each request. It is the one exception, and the
  * Cloudflare adapter handles it in the Worker beside the EmDash admin.
  *

package/templates/emdash/src/pages/index.astro

@@ -5,8 +5,8 @@ import Layout from '../layouts/Layout.astro';
 
 // Prerendered, like every page in this template: written to static HTML at build
 // time from the `home` entry (seed/seed.json → pages/home). Edit it in the admin;
-// a publish triggers a rebuild that bakes the change in (AGENTS.md "Rendering and
-// freshness"). The Vitops blocks from @getvitops/emdash render automatically —
+// a publish triggers a rebuild that bakes the change in (.agents/skills/content-and-deploys,
+// "Rendering and freshness"). The Vitops blocks from @getvitops/emdash render automatically —
 // EmDash merges the plugin's block components into <PortableText>.
 //
 // Anything on a page that must be fresh per request (a stock count, a signed-in

package/templates/static/AGENTS.md

@@ -70,6 +70,13 @@ activates to `script-src` / `connect-src`, any embed to `frame-src`, and hash an
 inline script you add yourself. Hashes rather than nonces because a static page has no
 per-request response to carry one.
 
+## Skills
+
+`@getvitops/skills` ships agent skills that update with the package. `skills experimental_sync` (run
+by `prepare`, so by `vp install`) links them into `.agents/skills/` and `.claude/skills/`; they are
+gitignored. The set is written for EmDash sites, so `csp` is the one that applies here. A skill you
+write yourself with the same name is never replaced. `setup` is this site's own.
+
 ## Commands
 
 This is a **Vite+** project: use `vp` (and its `vpr` shorthand), not `pnpm`/`npm`/`npx`.

package/templates/static/_gitignore

@@ -25,3 +25,13 @@ public/vitops/
 
 # os / editor
 .DS_Store
+
+# agent skills linked from @getvitops/skills by `skills experimental_sync` (see skills-lock.json)
+.agents/skills/custom-blocks
+.agents/skills/content-and-deploys
+.agents/skills/contact-form
+.agents/skills/csp
+.claude/skills/custom-blocks
+.claude/skills/content-and-deploys
+.claude/skills/contact-form
+.claude/skills/csp

package/templates/static/package.json

@@ -16,15 +16,17 @@
     "build:css": "vitops generate -i site.json -f css -o src/styles",
     "lint:design": "vitops lint -i site.json -f css --strict",
     "sop": "vitops generate -i site.json -f css -o .vitops/sop",
-    "prepare": "vp config"
+    "prepare": "vp config && skills experimental_sync -y -a claude-code --no-frozen-lockfile"
   },
   "dependencies": {
     "@getvitops/astro": "latest",
+    "@getvitops/skills": "latest",
     "astro": "^7.4.4"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.12",
     "@getvitops/cli": "latest",
+    "skills": "^1.7.6",
     "typescript": "^6.0.3",
     "vite": "latest",
     "vite-plus": "latest",

package/templates/emdash/.agents/skills/custom-blocks/SKILL.md

@@ -1,104 +0,0 @@
----
-name: custom-blocks
-description: Decide whether a page section needs a new EmDash block type, and if so how to name, build, version and retire it. Use before creating, renaming or deleting any block type, any `src/components/blocks/*` renderer, or when asked to "add a block", "make an editable section" or "add a component the editors can place".
----
-
-# Custom blocks
-
-Pages are composed from **blocks** so non-technical editors can rearrange and edit
-them in the CMS. A new block type is the most expensive way to get a section onto a
-page: it adds a content-model entry, a renderer, a field schema and a migration
-burden, and **a block type cannot be renamed or deleted** once pages use it (see
-"Lifecycle"). So work down this list and stop at the first rung that fits.
-
-## 1. Decision rule
-
-1. **Compose what exists.** The `vitops.*` blocks from `@getvitops/emdash` (cards,
-   carousel, gallery, accordion, details, banner, hero, marquee, image-compare,
-   copy button, action link, …) resolve inside any block type's `portableText` field,
-   so "a section with a heading, intro and then a row of cards" is a section block
-   whose body holds `vitops.cards` — not a new "cards section" type. Check what is
-   installed first: `vp exec vitops docs components` lists every block the toolchain
-   ships and which tier provides it.
-2. **Extend an existing block** if one is close. An extra option (a `variant`
-   select, an optional slot) on a block that already exists is a version bump on that
-   block, not a new type. Prefer this when the new thing is a variation of the same
-   content shape.
-3. **Site-local block type** only when the content shape is specific to this site
-   (a bespoke dashboard mock, an A-versus-B argument with hard-coded figures). Keep
-   the renderer in `src/components/blocks/` and the type name prefixed for the site
-   (see "Naming"). Code-owned widgets expose only a caption field; the numbers live in
-   code, not in the CMS.
-4. **Upstream it** when a second site would plausibly want it. Don't build a
-   generic block here and quietly fork it: raise it against the toolchain
-   (`getvitops/design-system`) with the shape you used, so every site gets it. Until
-   it ships, keep the local version and mark it `local (watch)` in a comment, so it
-   is easy to retire when the real one lands.
-
-A form, a section container, a stats row, a logo grid, a CTA band and a steps list
-are all _generic_ — expect to find them upstream or to upstream them, not to keep
-them local.
-
-## 2. Naming: check the framework's vocabulary first
-
-Block types are permanent, so the name has to be right the first time. Before you
-name one:
-
-- Run `vp exec vitops docs components` and `vp exec vitops docs classes`. If the
-  framework already has a pattern by that name, **use its meaning**: `badge` is a
-  _static_ label; `tag` is a label that may be static or dynamic (editable,
-  dismissable). Never `chip` or `pill`. A block called `chips` that renders badges
-  cost one site a new type, a content migration and a permanently retired type.
-- Prefix site-local types with a short site code (`acme_section`), never `vitops.`
-  — that namespace belongs to the toolchain.
-- Name the thing, not its look: `section`, `steps`, `logos`; not `green-box`.
-
-## 3. Field and renderer conventions
-
-- **Colour: `tone` plus optional `color`.** `tone` takes a **role** name from
-  `site.json`'s `colors.roles` (preferred), falling back to a semantic name
-  (`info` `success` `warning` `danger`); `color` is the escape hatch for a palette
-  hue/step and should be rare — a site that sets it on every item is telling you a
-  role is missing. A select field can only list static options, so either list the
-  roles you actually use or take a validated string. Resolve it in one shared helper
-  (`src/components/blocks/tone.ts`) rather than per block.
-- **Class names cannot be built from field values.** Tailwind only emits classes it
-  can read in source, so `` `bg-${tone}` `` produces nothing. Resolve a tone to CSS
-  custom properties (or a lookup table of whole class names) instead.
-- **Links are `url` fields**, not `string`: EmDash's `url` type accepts site-relative
-  paths. (`string` is a mistake that needs a breaking version to undo.)
-- **Repeater sub-fields are scalar-only** (no `portableText`, no links inside text),
-  so a checklist is one newline-separated `text` field. Don't fight it; rich item
-  bodies need EmDash to lift that limit.
-- **Blocks don't nest.** A "section containing stats" is the section's own body
-  holding `vitops.*` blocks, or a flat sequence of sibling blocks; per-section
-  backdrops don't carry across siblings.
-- **Reach for framework classes** (`centered`, `region`, `rhythm`, `subgrid`,
-  `cluster`, `font-*`, `card`, `badge`, `tag`) in the renderer; run
-  `vpr lint:design` — hand-written layout CSS in a block is the signal that the
-  framework is missing a pattern worth upstreaming.
-- A card title is a heading: render a real `<h2>`–`<h4>` with a level prop, not a
-  styled `<p>`.
-
-## 4. Lifecycle
-
-- **Create** with the schema tools (the `schema_*` actions on the site's MCP server,
-  `/_emdash/api/mcp`) or the admin; commit the matching renderer and the
-  `emdash export-seed` output so a fresh environment gets the same model.
-- **A breaking change is a new version**, not an edit: add the version, migrate the
-  entries that use the old one, then activate it. Two things the tooling does not say:
-  `schema_activate_block_type_version`'s `expectedFingerprint` is the fingerprint of
-  the **currently active** version, not the one you are activating (a mismatch is a
-  `CONFLICT`), and `schema_update_block_type` **replaces the whole `fields` list**, so
-  send every field, not just the changed one.
-- **Migrating content:** `emdash content update` has no `--migrate-blocks` flag; the
-  REST route `PUT /_emdash/api/content/<collection>/<id>` with
-  `{ data, _rev, migrateBlocks: true }` does (it takes Portable Text arrays; the CLI
-  and MCP take Markdown). Updating a published entry stages a **draft** — a separate
-  `content publish` is needed before the live page changes, and (because pages are
-  prerendered) a rebuild after that.
-- **Retiring is not deleting.** A type that was renamed or superseded stays in the
-  database and the seed permanently; keep its renderer mapping old values so existing
-  content still renders, mark it retired, and stop offering it to editors.
-- **Typed fields:** `emdash types` does not type `blocks` fields (they come out as
-  `unknown[]`); hand-write a value type per renderer until EmDash generates it.