@blockbite/agent-context 0.1.0

package/examples/README.md

@@ -0,0 +1,23 @@
+# BlockBite Template Examples
+
+These examples are bundled with the agent plugin so agents can quickly learn the
+expected BlockBite dynamic-template package shape before creating a new section.
+
+Use `dynamic-template-reference/` as the canonical reference:
+
+- `template.liquid` shows the runtime data pattern:
+  `bb_seed`, `bb_source`, and `live | ternary`. It also includes short Liquid
+  comments that explain what agents should copy.
+- `fields.yaml` defines top-level fields and repeated `subcollections`.
+- `seeds.json` mirrors the schema with preview/sample data.
+- `style.css` keeps template-owned styles scoped with semantic class names and
+  a root class.
+- `module.ts` keeps optional interaction code local to the template, instead of
+  using global scripts.
+- `manifest.json` wires the package files together.
+- `recipe.json` gives the human-facing name and description.
+
+When a user asks for an island, header, hero, nav, footer, or reusable section,
+create a package under `templates/<slug>/` using this shape. Do not hand-write
+`islands/<slug>/island-pattern.html`; that compiled-blocks output is generated
+by the BlockBite editor/compiler.

package/examples/dynamic-template-reference/fields.yaml

@@ -0,0 +1,61 @@
+version: 1
+
+# Top-level fields are available as props.fields.<handle> in template.liquid.
+fields:
+  - handle: "eyebrow"
+    type: string
+    label: "Eyebrow"
+    required: false
+  - handle: "heading"
+    type: string
+    label: "Heading"
+    required: true
+  - handle: "intro"
+    type: string
+    label: "Intro"
+    required: false
+  - handle: "primary_cta_label"
+    type: string
+    label: "Primary CTA Label"
+    required: false
+  - handle: "primary_cta_url"
+    type: string
+    label: "Primary CTA URL"
+    required: false
+  - handle: "secondary_cta_label"
+    type: string
+    label: "Secondary CTA Label"
+    required: false
+  - handle: "secondary_cta_url"
+    type: string
+    label: "Secondary CTA URL"
+    required: false
+
+# Repeated rows are grouped under props.subcollections.<handle>.
+subcollections:
+  highlights:
+    label: "Highlights"
+    fields:
+      - handle: "icon"
+        type: string
+        label: "Icon"
+        required: false
+      - handle: "title"
+        type: string
+        label: "Title"
+        required: true
+      - handle: "text"
+        type: string
+        label: "Text"
+        required: false
+  stats:
+    label: "Stats"
+    fields:
+      - handle: "value"
+        type: string
+        label: "Value"
+        required: true
+      - handle: "label"
+        type: string
+        label: "Label"
+        required: true

package/examples/dynamic-template-reference/manifest.json

@@ -0,0 +1,8 @@
+{
+  "template": "template.liquid",
+  "recipe": "recipe.json",
+  "fields": "fields.yaml",
+  "seeds": "seeds.json",
+  "scriptModule": "module.ts",
+  "style": "style.css"
+}

package/examples/dynamic-template-reference/module.ts

@@ -0,0 +1,12 @@
+// Optional template behavior belongs beside the template, not in global scripts.
+document.addEventListener('DOMContentLoaded', () => {
+  const cards = document.querySelectorAll<HTMLElement>('[data-reference-card]');
+  if (!cards.length) return;
+
+  cards.forEach((card) => {
+    card.addEventListener('click', () => {
+      cards.forEach((item) => item.classList.remove('is-active'));
+      card.classList.add('is-active');
+    });
+  });
+});

package/examples/dynamic-template-reference/recipe.json

@@ -0,0 +1,5 @@
+{
+  "version": 1,
+  "name": "Dynamic Template Reference",
+  "description": "A generic BlockBite dynamic-template section that demonstrates fields, subcollections, scoped CSS, local TypeScript behavior, and seed-backed previews."
+}

package/examples/dynamic-template-reference/seeds.json

@@ -0,0 +1,44 @@
+{
+  "fields": {
+    "eyebrow": "Reference section",
+    "heading": "Build reusable BlockBite sections",
+    "intro": "Use this package shape when creating headers, heroes, feature rows, cards, FAQs, or any reusable dynamic-template section.",
+    "primary_cta_label": "Start from this pattern",
+    "primary_cta_url": "#",
+    "secondary_cta_label": "Review the docs",
+    "secondary_cta_url": "#"
+  },
+  "subcollections": {
+    "highlights": [
+      {
+        "icon": "01",
+        "title": "Resolve preview data first",
+        "text": "Load seeds.json with bb_seed, resolve live data with bb_source, then render through one props object."
+      },
+      {
+        "icon": "02",
+        "title": "Model repeated content",
+        "text": "Use subcollections for cards, steps, stats, navigation items, FAQ rows, and similar repeating content."
+      },
+      {
+        "icon": "03",
+        "title": "Keep styles scoped",
+        "text": "Use semantic class names in style.css and keep optional interactivity in module.ts beside the template."
+      }
+    ],
+    "stats": [
+      {
+        "value": "7",
+        "label": "Package files"
+      },
+      {
+        "value": "2",
+        "label": "Data scopes"
+      },
+      {
+        "value": "1",
+        "label": "Preview link"
+      }
+    ]
+  }
+}

package/examples/dynamic-template-reference/style.css

@@ -0,0 +1,156 @@
+/* Keep template-owned styles scoped to the section root. */
+.bb-reference-section {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 64px 24px;
+  color: #111827;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.bb-reference-section__header {
+  max-width: 760px;
+  margin: 0 auto 40px;
+  text-align: center;
+}
+
+.bb-reference-section__eyebrow {
+  margin: 0 0 12px;
+  color: #2563eb;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.bb-reference-section__title {
+  margin: 0;
+  font-size: clamp(2.25rem, 6vw, 4.75rem);
+  line-height: 0.95;
+  letter-spacing: -0.06em;
+}
+
+.bb-reference-section__intro {
+  margin: 20px auto 0;
+  max-width: 640px;
+  color: #4b5563;
+  font-size: 1.08rem;
+  line-height: 1.65;
+}
+
+.bb-reference-section__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 14px;
+  margin-top: 28px;
+}
+
+.bb-reference-section__button,
+.bb-reference-section__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  border-radius: 999px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.bb-reference-section__button {
+  padding: 0 22px;
+  background: #111827;
+  color: #ffffff;
+}
+
+.bb-reference-section__link {
+  padding: 0 12px;
+  color: #2563eb;
+}
+
+.bb-reference-section__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.bb-reference-section__card {
+  min-height: 220px;
+  padding: 24px;
+  border: 1px solid #e5e7eb;
+  border-radius: 24px;
+  background: #ffffff;
+  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
+  transition:
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+}
+
+.bb-reference-section__card.is-active,
+.bb-reference-section__card:hover {
+  border-color: #93c5fd;
+  box-shadow: 0 22px 60px rgba(37, 99, 235, 0.16);
+  transform: translateY(-3px);
+}
+
+.bb-reference-section__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  background: #eff6ff;
+  color: #2563eb;
+  font-weight: 800;
+}
+
+.bb-reference-section__card-title {
+  margin: 24px 0 10px;
+  font-size: 1.2rem;
+}
+
+.bb-reference-section__card-text {
+  margin: 0;
+  color: #4b5563;
+  line-height: 1.6;
+}
+
+.bb-reference-section__stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  margin: 28px 0 0;
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  border-radius: 22px;
+  background: #e5e7eb;
+}
+
+.bb-reference-section__stat {
+  padding: 22px;
+  background: #f9fafb;
+  text-align: center;
+}
+
+.bb-reference-section__stat-value {
+  font-size: 2rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.bb-reference-section__stat-label {
+  margin: 8px 0 0;
+  color: #6b7280;
+}
+
+@media (max-width: 760px) {
+  .bb-reference-section {
+    padding: 44px 18px;
+  }
+
+  .bb-reference-section__grid,
+  .bb-reference-section__stats {
+    grid-template-columns: 1fr;
+  }
+}

package/examples/dynamic-template-reference/template.liquid

@@ -0,0 +1,59 @@
+{% comment %}
+  Reference pattern for agents:
+  - Load seed data for previews with bb_seed.
+  - Resolve live item data with bb_source.
+  - Use the same props object for preview and live rendering.
+{% endcomment %}
+{% assign seed_data = "seeds.json" | bb_seed %}
+{% assign data = item | bb_source %}
+{% assign props = live | ternary: data, seed_data %}
+
+<section class="bb-reference-section" data-reference-section>
+  <div class="bb-reference-section__header">
+    {% if props.fields.eyebrow %}
+      <p class="bb-reference-section__eyebrow">{{ props.fields.eyebrow }}</p>
+    {% endif %}
+
+    <h2 class="bb-reference-section__title">{{ props.fields.heading }}</h2>
+    <p class="bb-reference-section__intro">{{ props.fields.intro }}</p>
+
+    <div class="bb-reference-section__actions">
+      {% if props.fields.primary_cta_label %}
+        <a class="bb-reference-section__button" href="{{ props.fields.primary_cta_url }}">
+          {{ props.fields.primary_cta_label }}
+        </a>
+      {% endif %}
+
+      {% if props.fields.secondary_cta_label %}
+        <a class="bb-reference-section__link" href="{{ props.fields.secondary_cta_url }}">
+          {{ props.fields.secondary_cta_label }}
+        </a>
+      {% endif %}
+    </div>
+  </div>
+
+  {% comment %}
+    Repeated content belongs in subcollections. Keep seeds.json in the same
+    shape so template previews work without live WordPress content.
+  {% endcomment %}
+  <div class="bb-reference-section__grid">
+    {% for highlight in props.subcollections.highlights %}
+      <article class="bb-reference-section__card" data-reference-card>
+        <span class="bb-reference-section__icon">{{ highlight.icon }}</span>
+        <h3 class="bb-reference-section__card-title">{{ highlight.title }}</h3>
+        <p class="bb-reference-section__card-text">{{ highlight.text }}</p>
+      </article>
+    {% endfor %}
+  </div>
+
+  <dl class="bb-reference-section__stats">
+    {% for stat in props.subcollections.stats %}
+      <div class="bb-reference-section__stat">
+        <dt class="bb-reference-section__stat-value">{{ stat.value }}</dt>
+        <dd class="bb-reference-section__stat-label">{{ stat.label }}</dd>
+      </div>
+    {% endfor %}
+  </dl>
+</section>
+
+<script type="module" src="{{ "module.ts" | bb_asset_url }}"></script>

package/index.json

@@ -0,0 +1,239 @@
+{
+  "version": "0.1.0",
+  "recommendedStart": "Read this file first, then read the relevant SKILL.md files. Generated copies install skill paths next to this index.",
+  "skills": {
+    "connect": {
+      "path": "skills/connect/SKILL.md",
+      "tools": [
+        "blockbite-connection-status",
+        "blockbite-projects-list",
+        "blockbite-project-select"
+      ]
+    },
+    "projects-list": {
+      "path": "skills/projects-list/SKILL.md",
+      "tools": ["blockbite-projects-list"]
+    },
+    "project-select": {
+      "path": "skills/project-select/SKILL.md",
+      "tools": [
+        "blockbite-projects-list",
+        "blockbite-project-select",
+        "blockbite-connection-status"
+      ]
+    },
+    "connection-status": {
+      "path": "skills/connection-status/SKILL.md",
+      "tools": ["blockbite-connection-status"]
+    },
+    "islands-list": {
+      "path": "skills/islands-list/SKILL.md",
+      "tools": ["blockbite-islands-list"]
+    },
+    "template-new": {
+      "path": "skills/template-new/SKILL.md",
+      "tools": [
+        "blockbite-workspace-status",
+        "blockbite-template-scaffold",
+        "blockbite-template-create-draft",
+        "blockbite-workspace-write",
+        "blockbite-template-analyze",
+        "blockbite-template-render-preview",
+        "blockbite-validate-workspace",
+        "blockbite-build-status",
+        "blockbite-build-run"
+      ]
+    },
+    "template-refine": {
+      "path": "skills/template-refine/SKILL.md",
+      "tools": [
+        "blockbite-template-update-draft",
+        "blockbite-template-analyze",
+        "blockbite-workspace-read",
+        "blockbite-workspace-patch",
+        "blockbite-template-render-preview",
+        "blockbite-validate-workspace",
+        "blockbite-build-status",
+        "blockbite-build-run"
+      ]
+    },
+    "template-figma": {
+      "path": "skills/template-figma/SKILL.md",
+      "tools": [
+        "blockbite-agent-onboarding",
+        "blockbite-workspace-status",
+        "blockbite-template-scaffold",
+        "blockbite-template-create-draft",
+        "blockbite-workspace-write",
+        "blockbite-workspace-patch",
+        "blockbite-template-render-preview",
+        "blockbite-asset-import",
+        "blockbite-validate-workspace",
+        "blockbite-build-status",
+        "blockbite-build-run"
+      ]
+    },
+    "template-preview": {
+      "path": "skills/template-preview/SKILL.md",
+      "tools": [
+        "blockbite-workspace-read",
+        "blockbite-workspace-write",
+        "blockbite-workspace-patch",
+        "blockbite-template-render-preview",
+        "blockbite-validate-workspace",
+        "blockbite-build-status",
+        "blockbite-build-run"
+      ]
+    },
+    "block-style": {
+      "path": "skills/block-style/SKILL.md",
+      "tools": [
+        "blockbite-workspace-read",
+        "blockbite-workspace-write",
+        "blockbite-workspace-patch",
+        "blockbite-build-status",
+        "blockbite-build-run"
+      ]
+    },
+    "design-tokens": {
+      "path": "skills/design-tokens/SKILL.md",
+      "tools": [
+        "blockbite-design-token-write",
+        "blockbite-build-status",
+        "blockbite-build-run"
+      ]
+    },
+    "document-blueprint": {
+      "path": "skills/document-blueprint/SKILL.md",
+      "tools": [
+        "blockbite-workspace-read",
+        "blockbite-workspace-write",
+        "blockbite-workspace-patch",
+        "blockbite-template-render-preview",
+        "blockbite-validate-workspace"
+      ]
+    },
+    "figma-design-to-code": {
+      "path": "skills/figma-design-to-code/SKILL.md",
+      "tools": [
+        "blockbite-agent-onboarding",
+        "blockbite-workspace-status",
+        "blockbite-template-scaffold",
+        "blockbite-template-create-draft",
+        "blockbite-workspace-read",
+        "blockbite-workspace-write",
+        "blockbite-workspace-patch",
+        "blockbite-template-render-preview",
+        "blockbite-asset-import",
+        "blockbite-validate-workspace",
+        "blockbite-build-status",
+        "blockbite-build-run"
+      ]
+    },
+    "site-motion-pass": {
+      "path": "skills/site-motion-pass/SKILL.md",
+      "tools": [
+        "blockbite-workspace-read",
+        "blockbite-workspace-write",
+        "blockbite-workspace-patch",
+        "blockbite-template-render-preview",
+        "blockbite-build-status",
+        "blockbite-build-run"
+      ]
+    },
+    "site-reviewer": {
+      "path": "skills/site-reviewer/SKILL.md",
+      "tools": [
+        "blockbite-template-analyze",
+        "blockbite-template-render-preview",
+        "blockbite-validate-workspace",
+        "blockbite-sync-plan-create",
+        "blockbite-sync-plan-diff"
+      ]
+    },
+    "analyze-template": {
+      "path": "skills/analyze-template/SKILL.md",
+      "tools": ["blockbite-template-analyze"]
+    },
+    "render-preview": {
+      "path": "skills/render-preview/SKILL.md",
+      "tools": ["blockbite-template-render-preview"]
+    },
+    "frame-draft-link": {
+      "path": "skills/frame-draft-link/SKILL.md",
+      "tools": ["blockbite-workspace-write"]
+    },
+    "figma-site-builder": {
+      "path": "skills/figma-site-builder/SKILL.md",
+      "tools": [
+        "blockbite-agent-onboarding",
+        "blockbite-workspace-status",
+        "blockbite-build-status",
+        "blockbite-workspace-list",
+        "blockbite-workspace-read",
+        "blockbite-workspace-search",
+        "blockbite-template-scaffold",
+        "blockbite-template-create-draft",
+        "blockbite-workspace-write",
+        "blockbite-workspace-patch",
+        "blockbite-template-render-preview",
+        "blockbite-validate-workspace",
+        "blockbite-sandbox-status",
+        "blockbite-build-run",
+        "blockbite-asset-import",
+        "blockbite-design-token-write"
+      ]
+    },
+    "create-template-draft": {
+      "path": "skills/create-template-draft/SKILL.md",
+      "tools": [
+        "blockbite-agent-onboarding",
+        "blockbite-workspace-status",
+        "blockbite-sandbox-status",
+        "blockbite-template-scaffold",
+        "blockbite-template-create-draft",
+        "blockbite-workspace-write",
+        "blockbite-workspace-patch",
+        "blockbite-template-render-preview",
+        "blockbite-validate-workspace",
+        "blockbite-build-status",
+        "blockbite-build-run",
+        "blockbite-asset-import"
+      ]
+    },
+    "update-template-draft": {
+      "path": "skills/update-template-draft/SKILL.md",
+      "tools": [
+        "blockbite-agent-onboarding",
+        "blockbite-template-update-draft",
+        "blockbite-template-analyze",
+        "blockbite-workspace-read",
+        "blockbite-workspace-write",
+        "blockbite-workspace-patch",
+        "blockbite-template-render-preview",
+        "blockbite-validate-workspace",
+        "blockbite-sandbox-status",
+        "blockbite-build-status",
+        "blockbite-build-run",
+        "blockbite-asset-import"
+      ]
+    },
+    "sandbox-status": {
+      "path": "skills/sandbox-status/SKILL.md",
+      "tools": ["blockbite-sandbox-status"]
+    },
+    "sync-plan": {
+      "path": "skills/sync-plan/SKILL.md",
+      "tools": ["blockbite-sync-plan-create", "blockbite-sync-plan-diff"]
+    }
+  },
+  "references": {
+    "block-dsl": "references/block-dsl.md",
+    "tailwind-utilities": "references/tailwind-utilities.md",
+    "islands": "references/islands.md"
+  },
+  "examples": {
+    "dynamic-template-reference": "examples/dynamic-template-reference"
+  },
+  "mcpTools": "mcp-tools.json"
+}