@blockbite/agent-context 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/examples/README.md +23 -0
  2. package/examples/dynamic-template-reference/fields.yaml +61 -0
  3. package/examples/dynamic-template-reference/manifest.json +8 -0
  4. package/examples/dynamic-template-reference/module.ts +12 -0
  5. package/examples/dynamic-template-reference/recipe.json +5 -0
  6. package/examples/dynamic-template-reference/seeds.json +44 -0
  7. package/examples/dynamic-template-reference/style.css +156 -0
  8. package/examples/dynamic-template-reference/template.liquid +59 -0
  9. package/index.json +239 -0
  10. package/mcp-tools.json +222 -0
  11. package/package.json +24 -0
  12. package/references/block-dsl.md +257 -0
  13. package/references/islands.md +111 -0
  14. package/references/tailwind-utilities.md +108 -0
  15. package/skills/analyze-template/SKILL.md +20 -0
  16. package/skills/block-style/SKILL.md +101 -0
  17. package/skills/connect/SKILL.md +25 -0
  18. package/skills/connection-status/SKILL.md +38 -0
  19. package/skills/create-template-draft/SKILL.md +55 -0
  20. package/skills/design-tokens/SKILL.md +54 -0
  21. package/skills/document-blueprint/SKILL.md +166 -0
  22. package/skills/figma-design-to-code/SKILL.md +126 -0
  23. package/skills/figma-site-builder/SKILL.md +209 -0
  24. package/skills/frame-draft-link/SKILL.md +77 -0
  25. package/skills/islands-list/SKILL.md +24 -0
  26. package/skills/project-select/SKILL.md +19 -0
  27. package/skills/projects-list/SKILL.md +17 -0
  28. package/skills/render-preview/SKILL.md +20 -0
  29. package/skills/sandbox-status/SKILL.md +18 -0
  30. package/skills/site-motion-pass/SKILL.md +88 -0
  31. package/skills/site-reviewer/SKILL.md +107 -0
  32. package/skills/sync-plan/SKILL.md +20 -0
  33. package/skills/template-figma/SKILL.md +123 -0
  34. package/skills/template-new/SKILL.md +221 -0
  35. package/skills/template-preview/SKILL.md +115 -0
  36. package/skills/template-refine/SKILL.md +135 -0
  37. package/skills/update-template-draft/SKILL.md +36 -0
@@ -0,0 +1,107 @@
1
+ ---
2
+ name: site-reviewer
3
+ description: Review BlockBite site builds without mutating files, writing actionable markdown reports for Figma-to-site parity, document-blueprint order, reusable dynamic-template inventory, token drift, dynamic-content contracts, Alpine/ESM errors, responsive layout, and console/network failures.
4
+ ---
5
+
6
+ # Site Reviewer
7
+
8
+ Use this skill for review-only passes. Do not mutate files, run imports, register templates, sync dynamic content, or alter the database.
9
+
10
+ Write reports to:
11
+
12
+ ```text
13
+ <workspace>/dev/reviews/<site>/<page>-review.md
14
+ ```
15
+
16
+ ## Scope
17
+
18
+ Review against available Figma nodes, the site plan, island inventory, page blueprint map, template packages, seed files, previews, and browser/runtime checks.
19
+
20
+ If Figma access is unavailable, state that limitation and review only the local build artifacts and runtime behavior.
21
+
22
+ ## Read First
23
+
24
+ - `<workspace>/dev/plans/<site>/site-plan.md`
25
+ - `<workspace>/dev/plans/<site>/island-inventory.md`
26
+ - `<workspace>/dev/plans/<site>/page-blueprint-map.md`
27
+ - `<workspace>/dev/plans/<site>/token-map.md`
28
+ - `dev/skills/document-blueprint/SKILL.md`
29
+ - `dev/skills/template-preview/SKILL.md`
30
+ - relevant template package files
31
+ - relevant `document-blueprints/<page>/blueprint.json` and `sections/*.seed.json`
32
+
33
+ ## Checks
34
+
35
+ Check:
36
+
37
+ - blueprint section order against the locked page map
38
+ - missing or extra islands
39
+ - duplicate templates that should be reused
40
+ - page-specific duplicate slugs for overlapping designs
41
+ - generic fallback components where Figma expects specific structure, such as mixed-height carousel cards
42
+ - header/footer dynamic-template and theme-pattern registration plan
43
+ - token drift between Figma, `token-map.md`, and `dev/css/design-tokens.css`
44
+ - image/media ratio, crop, focal, and asset mismatches
45
+ - missing SVG asset fields for editable icons/decorative SVGs
46
+ - dynamic-content contracts: source type, field handles, repeater handles, seed shape, and Liquid paths
47
+ - blueprint seed files for reused templates
48
+ - Alpine failures, especially `x-collapse` when Alpine collapse is missing
49
+ - ESM/CDN registration and module loading failures
50
+ - desktop and mobile layout, overflow, text clipping, z-index, and interaction state
51
+ - console errors, network failures, and `window.BlockBiteDebug?.errors` when available
52
+
53
+ ## Browser Review
54
+
55
+ When reviewing block editor or frontend client-side behavior, inspect browser console, network failures, and relevant runtime logs before writing findings. Use those errors to identify the failing path.
56
+
57
+ Review at least:
58
+
59
+ - desktop viewport
60
+ - mobile viewport
61
+ - initial load
62
+ - interaction states for nav, FAQ, sliders, tabs, filters, marquees, and reveals when present
63
+
64
+ ## Report Format
65
+
66
+ Write markdown with:
67
+
68
+ ```markdown
69
+ # <Page> Review
70
+
71
+ ## Summary
72
+
73
+ - Reviewed: <preview/page URL or file-backed view>
74
+ - Figma: <file key/node ids or unavailable>
75
+ - Status: pass | needs changes | blocked
76
+
77
+ ## Findings
78
+
79
+ ### P1 - <short title>
80
+
81
+ - Island: <slug or n/a>
82
+ - Blueprint section: <key or n/a>
83
+ - File: <path or n/a>
84
+ - Evidence: <specific observed mismatch or error>
85
+ - Suggested fix: <actionable fix>
86
+
87
+ ## Open Questions
88
+
89
+ - <question>
90
+
91
+ ## Checks Run
92
+
93
+ - <command or browser check>
94
+ ```
95
+
96
+ Severity:
97
+
98
+ - `P0`: blocks page use, import safety, or runtime boot.
99
+ - `P1`: significant design/content/interaction mismatch.
100
+ - `P2`: polish, maintainability, or minor responsive issue.
101
+ - `P3`: optional improvement.
102
+
103
+ Findings must be actionable and grounded in a file path, island slug, blueprint section key, URL, screenshot observation, console error, or Figma node. If no issues are found, say so and list any review gaps.
104
+
105
+ ## Finish
106
+
107
+ Return only the report path, status, highest severity, and short summary of findings. Do not apply fixes in the reviewer pass.
@@ -0,0 +1,20 @@
1
+ ---
2
+ name: sync-plan
3
+ description: Create or diff a draft BlockBite sync plan that compares workspace template packages with the database records. Use when the user wants to know what would change before syncing. Never applies changes.
4
+ ---
5
+
6
+ # BlockBite sync plan
7
+
8
+ ## Steps
9
+
10
+ 1. Ensure a project is selected.
11
+ 2. To draft a plan, call `blockbite-sync-plan-create` with
12
+ `{ "slug": "<slug>" }` or `{ "view": "templates/<slug>/template.liquid" }`.
13
+ 3. To see explicit current-state comparisons, call `blockbite-sync-plan-diff`
14
+ with the same target.
15
+ 4. Summarize the proposed additions/updates and current state for the user.
16
+
17
+ ## Notes
18
+
19
+ - Both tools are read-only and never apply changes to posts, Site Editor
20
+ entities, or workspace files.
@@ -0,0 +1,123 @@
1
+ ---
2
+ name: template-figma
3
+ description: Build or refine a BlockBite Studio dynamic template from a Figma frame or node link using Figma MCP. Use when the user provides or wants to provide a Figma frame/node URL, wants a Figma design converted into a BlockBite template, or wants a generated Figma template cleaned up into a maintainable dynamic template package.
4
+ ---
5
+
6
+ # Template Figma
7
+
8
+ Use Figma MCP to turn a frame or node into a maintainable BlockBite Studio dynamic template.
9
+
10
+ Before mapping Figma layers to DSL tags, read `../references/block-dsl.md` when it exists.
11
+ For BlockBite-specific Tailwind utilities such as `area-[...]`, `grid-area-[...]`, and `children:*`, read `../references/tailwind-utilities.md` when it exists.
12
+ When mapping Figma colors or typography to token-backed Tailwind classes, run `wp bb design-tokens db-to-local` if needed and read `<workspace>/dev/css/design-tokens.css`.
13
+
14
+ ## Agent Contract
15
+
16
+ The agent is the interface; WP-CLI is only the executor. Do not rely on interactive CLI prompts. Resolve the Figma URL and target slug from the chat, ask only for missing required values, then run commands with full flags.
17
+
18
+ ## Build Mode Contract
19
+
20
+ Treat BlockBite's reported build mode as authoritative:
21
+
22
+ - auto-build: after template, style, script, or block-style edits, run `ddev wp bb autobuild`; if Node.js is unavailable, open the signed browser fallback URL.
23
+ - custom-build: do not use the signed browser runner; use the project-specific frontend build pipeline.
24
+ - Default to auto-build for template and site work unless `wp bb learn`, `wp bb init`, or `dev/template-start/latest.json` explicitly reports custom-build.
25
+ - Do not infer custom-build from development manifests in mounted plugins or neighboring projects.
26
+ - Do not start, repair, shim, or mutate external Vite/Webpack setup unless the user explicitly asks for plugin development or custom-build work.
27
+ - If autobuild stalls or fails, report the runner status and stop before changing build setup.
28
+
29
+ ## Inputs
30
+
31
+ Require:
32
+
33
+ - Figma frame or node URL
34
+ - target template slug
35
+ - intended source type: `block_instance`, `post_type`, `collection`, `single`, or `hook`
36
+ - desired dynamic fields and repeaters when known
37
+
38
+ If a handoff JSON exists, read it first and use its answers.
39
+
40
+ Choose the source type before mapping fields:
41
+
42
+ - Use `block_instance` for content owned by the inserted template block instance.
43
+ - Use `post_type` for CPT/single-post templates that read the current post's BlockBite source fields directly.
44
+ - Use `block_instance` plus `post_relation` only when the editor should manually select related posts for this template instance.
45
+
46
+ Do not use a relation field to simulate the current CPT item. Relation-backed patterns read nested data such as `props.fields.work.source.work.client`; `post_type` templates read direct fields such as `props.fields.client` or `section.fields.client`.
47
+
48
+ ## Figma Workflow
49
+
50
+ Load the Figma context through the available Figma MCP tooling. Inspect layout, typography, spacing, repeated groups, imagery, and interactive states.
51
+
52
+ Map design structure into:
53
+
54
+ - section-level `fields`
55
+ - repeated groups as `subcollections`
56
+ - local template assets only when needed
57
+ - shared workspace block styles for reusable button/card/control variants
58
+ - Tailwind classes compatible with BlockBite runtime
59
+
60
+ Avoid preserving noisy generated wrappers when a simpler structure matches the design.
61
+
62
+ ## Required Package
63
+
64
+ Write or refine `<workspace>/templates/<slug>/` with:
65
+
66
+ - `template.liquid`
67
+ - `recipe.json`
68
+ - `seeds.json`
69
+ - `fields.yaml`
70
+ - `manifest.json`
71
+ - `style.css`
72
+ - `module.ts`
73
+
74
+ Use the standard runtime prelude:
75
+
76
+ ```liquid
77
+ {% assign seed_data = 'seeds.json' | bb_seed %}
78
+ {% assign data = item | bb_source %}
79
+ {% assign props = live | ternary: data, seed_data %}
80
+ ```
81
+
82
+ After choosing fields, compare `fields.yaml`, `recipe.json`, `seeds.json`, and Liquid paths. Repeater handles must stay identical across all files; for example, `subcollections.information` must not become `subcollections.items` in Liquid.
83
+
84
+ Supported `fields.yaml` field types are: `string`, `text`, `textarea`, `richtext`, `media`, `image`, `file`, `link`, `svg`, `number`, `integer`, `float`, `boolean`, `bool`, `toggle`, `select`, `radio`, `date`, `datetime`, `color`, `email`, `telephone`, `url`, `password`, and `post_relation`.
85
+
86
+ Map Figma imagery intended for editor selection to `type: media`, not `type: string`. `type: image` and `type: file` are accepted aliases that normalize to `media`. Only use a URL/string field for an intentionally typed external URL. Media fields store object payloads, so render them via `bb_media` or `bb-image`/`core-image` media props instead of treating the value as a bare string.
87
+
88
+ Map Figma icons or decorative SVG assets to `type: svg`. Use `kind: icon` for icon assets and `kind: shape` for shape assets; `kind` defaults to `icon`. Do not invent `type: icon`.
89
+
90
+ ## Shared Styles Boundary
91
+
92
+ Do not put Figma island styling or global `html`, `body`, `button`, `input`,
93
+ typography, background, or reset rules in `<workspace>/app/styles-shared/*.css`.
94
+
95
+ `app/styles-shared/shared.css` is bundled into `app.bundle.css` and loaded in
96
+ block editor previews as well as the frontend. Use it only for intentionally
97
+ shared, scoped component or template-family classes. Put frontend-only global
98
+ page styles in `app/styles-app/app.css` or the theme stylesheet. Put island
99
+ styles in `<workspace>/templates/<slug>/style.css`.
100
+
101
+ ## CLI Flow
102
+
103
+ Register or update through WP-CLI:
104
+
105
+ ```bash
106
+ ddev wp bb dynamic-template create --slug=<slug>
107
+ ddev wp bb dynamic-content create --slug=<slug> --source-type=<block_instance|post_type|collection|single|hook> --fields=<template-or-source-folder>/fields.yaml
108
+ ddev wp bb source import-seeds --slug=<slug> --file=wp-content/blockbite/templates/<slug>/seeds.json
109
+ ```
110
+
111
+ For CPT-bound templates, use `--source-type=post_type` and the source schema for that CPT, for example `--fields=work/fields.yaml`. Use `block_instance` only for inserted, instance-owned template content.
112
+
113
+ If rows already exist, use `dynamic-template update` and `dynamic-content sync`.
114
+
115
+ If the registered slug and filesystem view differ, update the template path separately:
116
+
117
+ ```bash
118
+ ddev wp bb dynamic-template path --slug=<slug> --view=templates/v1/<slug>/template.liquid
119
+ ```
120
+
121
+ ## Finish
122
+
123
+ Verify the template renders with seed data, confirm dynamic fields are editable, and note any Figma details that could not be represented exactly in the runtime.
@@ -0,0 +1,221 @@
1
+ ---
2
+ name: template-new
3
+ description: Create a new BlockBite Studio dynamic template package from a short brief. Use when the user wants a new template/section such as FAQ, hero, cards, services, statistics, team, testimonial, CTA, or a custom section, including creating package files, dynamic fields, seed data, and registering/importing through WP-CLI.
4
+ ---
5
+
6
+ # Template New
7
+
8
+ Create a full BlockBite Studio dynamic template package in the active workspace.
9
+
10
+ Before authoring DSL tags, read `../references/block-dsl.md` when it exists.
11
+ For BlockBite-specific Tailwind utilities such as `area-[...]`, `grid-area-[...]`, and `children:*`, read `../references/tailwind-utilities.md` when it exists.
12
+ When token-backed Tailwind classes matter, run `wp bb design-tokens db-to-local` if needed and read `<workspace>/dev/css/design-tokens.css`.
13
+
14
+ ## Agent Contract
15
+
16
+ The agent is the interface; WP-CLI is only the executor. Do not rely on interactive CLI prompts. Resolve the slug/type from the chat, ask only for missing required values, then run commands with full flags.
17
+
18
+ ## Build Mode Contract
19
+
20
+ Treat BlockBite's reported build mode as authoritative:
21
+
22
+ - auto-build: after template, style, script, or block-style edits, run `ddev wp bb autobuild`; if Node.js is unavailable, open the signed browser fallback URL.
23
+ - custom-build: do not use the signed browser runner; use the project-specific frontend build pipeline.
24
+ - Default to auto-build for template and site work unless `wp bb learn`, `wp bb init`, or `dev/template-start/latest.json` explicitly reports custom-build.
25
+ - Do not infer custom-build from development manifests in mounted plugins or neighboring projects.
26
+ - Do not start, repair, shim, or mutate external Vite/Webpack setup unless the user explicitly asks for plugin development or custom-build work.
27
+ - If autobuild stalls or fails, report the runner status and stop before changing build setup.
28
+
29
+ ## Required Package
30
+
31
+ Write the package under `<workspace>/templates/<slug>/` with:
32
+
33
+ - `template.liquid`
34
+ - `recipe.json`
35
+ - `seeds.json`
36
+ - `fields.yaml`
37
+ - `manifest.json`
38
+ - `style.css`
39
+ - `module.ts`
40
+
41
+ Use the current local template style. If a similar template exists, read it first and mirror its runtime conventions.
42
+
43
+ ## Runtime Pattern
44
+
45
+ Choose the dynamic-content source type before writing files:
46
+
47
+ - Use `block_instance` when the content belongs to the inserted template block instance.
48
+ - Use `post_type` when the template renders inside a CPT/single post context and should read the current post's BlockBite source fields.
49
+ - Use `block_instance` with a `post_relation` field only when the editor must manually pick a related post or posts for that template instance.
50
+
51
+ Do not model a CPT-bound island as `block_instance` plus `post_relation` just because it renders on a CPT template. That nests data under the relation field and produces paths such as `props.fields.work.source.work.client`. A CPT-bound island should use `post_type` and read the current post source payload directly, such as `props.fields.client` or, when the local template variable is named `section`, `section.fields.client`.
52
+
53
+ Start `template.liquid` with:
54
+
55
+ ```liquid
56
+ {% assign seed_data = 'seeds.json' | bb_seed %}
57
+ {% assign data = item | bb_source %}
58
+ {% assign props = live | ternary: data, seed_data %}
59
+ ```
60
+
61
+ Read single fields from `props.fields.<handle>`.
62
+ Read repeaters from `props.subcollections.<handle>`.
63
+ If the template assigns `section = props`, keep the same direct payload model and read `section.fields.<handle>` and `section.subcollections.<handle>`.
64
+ Use `{{ value | bb_str | raw }}` for editable text output.
65
+
66
+ For `post_relation` fields with `metadata.include_source: true`, selected post source fields are nested under the relation item, for example `props.fields.work.source.work.client`. Use that shape only for relation-backed patterns, not for `post_type` templates.
67
+
68
+ ## Fill Layers
69
+
70
+ For hero backgrounds, overlays, and visual layers, use the child DSL API:
71
+
72
+ ```liquid
73
+ <bb-group tag="section" class="relative isolate min-h-[720px] overflow-hidden">
74
+ <bb-fills>
75
+ <bb-fill type="image" field="{{ props.fields.hero_artwork }}" class="opacity-70" />
76
+ <bb-fill type="gradient" class="bg-gradient-to-b from-black/20 to-black/70" />
77
+ </bb-fills>
78
+
79
+ ...
80
+ </bb-group>
81
+ ```
82
+
83
+ Do not put fills directly on `<bb-group>` props. Do not use absolutely
84
+ positioned `<core-image>` or `<bb-image>` nodes for images that are only
85
+ background/fill layers. Use `bb-fill type="image"` with a `media` field so the
86
+ editor inline preview and media picker can treat the image as editable fill
87
+ media. Keep foreground content above fills with normal stacking classes such as
88
+ `relative z-10`.
89
+
90
+ ## Field Contract
91
+
92
+ `fields.yaml` is schema-only:
93
+
94
+ ```yaml
95
+ version: 1
96
+
97
+ fields:
98
+ title:
99
+ type: string
100
+ label: Title
101
+ required: false
102
+
103
+ subcollections:
104
+ items:
105
+ label: Items
106
+ fields:
107
+ heading:
108
+ type: string
109
+ label: Heading
110
+ required: false
111
+ text:
112
+ type: richtext
113
+ label: Text
114
+ required: false
115
+ ```
116
+
117
+ Use top-level `fields` for section-level content. Use `subcollections` for repeated cards, FAQ rows, stats, people, logos, and slides.
118
+
119
+ Supported field types are: `string`, `text`, `textarea`, `richtext`, `media`, `image`, `file`, `link`, `svg`, `number`, `integer`, `float`, `boolean`, `bool`, `toggle`, `select`, `radio`, `date`, `datetime`, `color`, `email`, `telephone`, `url`, `password`, and `post_relation`.
120
+
121
+ Use `type: media` for WordPress media picker fields. `type: image` and `type: file` are accepted aliases, but they normalize to `media`. Do not model editable images as `image_url: type: string` unless the editor must manually type an external URL. Media field values are objects with `url`, `alt`, `sizes`, and attachment metadata; in Liquid, normalize them with `bb_media` or pass them to `bb-image`/`core-image` media props.
122
+
123
+ Use `type: svg` for the SVG asset picker. Add `kind: icon` for the icon picker or `kind: shape` for the shape picker; `kind` defaults to `icon`. Do not use `type: icon`.
124
+
125
+ Before authoring Liquid access paths, compare `fields.yaml`, `recipe.json`, and `seeds.json` handles. Repeater handles must match exactly. If the schema uses `subcollections.information`, do not loop over `subcollections.items`.
126
+
127
+ ## CLI Flow
128
+
129
+ When the type is known, inspect shipped source-pattern metadata before creating files:
130
+
131
+ ```bash
132
+ ddev wp bb template patterns --type=<type>
133
+ ```
134
+
135
+ If a suitable variant exists, scaffold from it:
136
+
137
+ ```bash
138
+ ddev wp bb template scaffold --slug=<slug> --type=<type> --variant=<variant>
139
+ ```
140
+
141
+ This copies a whitelabel source pattern, compiles DSL to block JSON/AST artifacts, writes the runtime `template.liquid`, and creates the package contract files.
142
+
143
+ If no pattern fits, start with the generic file scaffold:
144
+
145
+ ```bash
146
+ ddev wp bb template scaffold --slug=<slug> --type=<type>
147
+ ```
148
+
149
+ Then edit the generated files to match the user's request. Pattern variants are starting points, not final design decisions.
150
+
151
+ Before database registration, run:
152
+
153
+ ```bash
154
+ ddev wp bb doctor
155
+ ```
156
+
157
+ If doctor reports missing BlockBite tables or columns, stop and report the exact missing tables/columns to the user. Do not add, remove, alter, or migrate database tables automatically.
158
+
159
+ Treat SQL warnings plus a success message as failure until `wp bb doctor` passes and the target rows are verified.
160
+
161
+ After writing files and passing doctor, use the site CLI from the WordPress project root:
162
+
163
+ ```bash
164
+ ddev wp bb dynamic-template create --slug=<slug>
165
+ ddev wp bb dynamic-content create --slug=<slug> --source-type=<block_instance|post_type|collection|single|hook> --fields=<template-or-source-folder>/fields.yaml
166
+ ddev wp bb source import-seeds --slug=<slug> --file=<workspace>/templates/<slug>/seeds.json
167
+ ```
168
+
169
+ For regular inserted sections, use `--source-type=block_instance --fields=<slug>/fields.yaml`.
170
+ For a CPT-bound template or sidebar island, use `--source-type=post_type` and the CPT source schema, for example `--fields=work/fields.yaml` when the current `work` post is the source of truth.
171
+
172
+ Use the absolute workspace seed path. Do not assume `wp-content/blockbite/...`; Bedrock projects usually use `web/app/blockbite/...`.
173
+
174
+ If rows already exist, use `dynamic-template update` and `dynamic-content sync`. If existence is uncertain, prefer the command error over guessing: run create, and if it reports an existing slug, switch to update/sync.
175
+
176
+ `wp bb dynamic-template package --slug=<slug>` exists, but it only generates `recipe.json`, `fields.yaml`, and `seeds.json` after `template.liquid` already exists. It is not a full package scaffold.
177
+
178
+ When the template package lives in a nested folder or the registered slug does not match the filesystem view, register or repoint the full view path separately:
179
+
180
+ ```bash
181
+ ddev wp bb dynamic-template path --slug=<slug> --view=templates/v1/<slug>/template.liquid
182
+ ```
183
+
184
+ `dynamic-template path`, `dynamic-template create/update`, and `dynamic-content create/sync` are separate operations.
185
+
186
+ For complex islands, inspect one real live payload before finalizing Liquid paths. Verify whether data is direct (`fields.client`, `subcollections.information`) or relation-nested (`fields.work.source.work.client`) and remove any stale preassigned `work_*` variables that duplicate direct bindings.
187
+
188
+ ## Alpine And CDN
189
+
190
+ If the template needs interactivity, use Alpine attributes directly. For collapsible panels use:
191
+
192
+ ```html
193
+ x-show="..." x-collapse x-cloak
194
+ ```
195
+
196
+ Assume Alpine and configured CDN libraries are already loaded unless verification shows otherwise.
197
+
198
+ For frontend runtime errors, open the current frontend page with
199
+ `#blockbite-debug-panel`, inspect the Client JS chapter, and read
200
+ `window.BlockBiteDebug?.errors` in the browser console before guessing from
201
+ bundled stack traces.
202
+
203
+ ## Shared Styles Boundary
204
+
205
+ Do not put template-specific styling or global `html`, `body`, `button`,
206
+ `input`, typography, background, or reset rules in
207
+ `<workspace>/app/styles-shared/*.css`.
208
+
209
+ `app/styles-shared/shared.css` is bundled into `app.bundle.css` and loaded in
210
+ block editor previews as well as the frontend. Use it only for intentionally
211
+ shared, scoped component or template-family classes. Put frontend-only global
212
+ page styles in `app/styles-app/app.css` or the theme stylesheet. Put island
213
+ styles in `<workspace>/templates/<slug>/style.css`.
214
+
215
+ ## Shared Block Styles
216
+
217
+ If the template needs a reusable visual variant for a block, especially `bb/button`, check `<workspace>/blocks/<namespace>/<block>` before inlining long Tailwind classes. Prefer the `block-style` skill/workflow for shared styles, then use the style from the template.
218
+
219
+ ## Finish
220
+
221
+ Verify JSON files with `jq`, inspect generated files, run the relevant WP-CLI commands, and report template slug, template id, content id, and source import result.
@@ -0,0 +1,115 @@
1
+ ---
2
+ name: template-preview
3
+ description: Create a seed-backed aggregate BlockBite dynamic-template preview package that renders multiple workspace templates in one Liquid view without creating a WordPress page or relying on separate blockbite_preview URLs.
4
+ ---
5
+
6
+ # Template Preview
7
+
8
+ Create or update an aggregate preview package for reviewing several dynamic templates together.
9
+
10
+ Use this when the user wants a preview page with multiple created templates, a homepage-section stack, or a quick review surface that avoids assembling `bb/dynamic-template` blocks in WordPress content.
11
+
12
+ If the preview source is a document blueprint, use the `document-blueprint` skill and the `bb_document_blueprint` filter instead of manually listing child templates.
13
+ For BlockBite-specific Tailwind utilities such as `area-[...]`, `grid-area-[...]`, and `children:*`, read `../references/tailwind-utilities.md` when it exists.
14
+
15
+ ## Contract
16
+
17
+ - Do not create or update a WordPress page for the preview.
18
+ - Do not register the preview package as a dynamic-template row unless the user explicitly asks.
19
+ - Prefer an aggregate preview package over separate `blockbite_preview` links for multi-section review.
20
+ - Render each child template with seed data only.
21
+ - Validate referenced template packages before handing over the preview view.
22
+
23
+ ## Preview Package
24
+
25
+ Create the preview under:
26
+
27
+ ```text
28
+ <workspace>/templates/preview-<slug>/
29
+ ```
30
+
31
+ Required files:
32
+
33
+ - `template.liquid`
34
+ - `fields.yaml`
35
+ - `seeds.json`
36
+ - `recipe.json`
37
+ - `manifest.json`
38
+ - `style.css`
39
+ - `module.ts`
40
+
41
+ The metadata files can be minimal because preview content comes from referenced child templates:
42
+
43
+ ```yaml
44
+ version: 1
45
+
46
+ fields: {}
47
+ subcollections: {}
48
+ ```
49
+
50
+ ```json
51
+ {
52
+ "fields": {},
53
+ "subcollections": {}
54
+ }
55
+ ```
56
+
57
+ Use `template.liquid` as the aggregate view. Render child templates with the `bb_template_preview` filter so each child gets its own `seeds.json` context:
58
+
59
+ ```liquid
60
+ <main class="min-h-screen bg-white text-neutral-950" data-bb-preview="home">
61
+ {{ 'templates/nav/template.liquid' | bb_template_preview | raw }}
62
+ {{ 'templates/home-hero/template.liquid' | bb_template_preview | raw }}
63
+ {{ 'templates/services/template.liquid' | bb_template_preview | raw }}
64
+ {{ 'templates/footer/template.liquid' | bb_template_preview | raw }}
65
+ </main>
66
+ ```
67
+
68
+ Do not use plain `{% render 'child/template.liquid' %}` for standard dynamic-template packages. It inherits the parent preview context, so `seeds.json | bb_seed` can resolve the preview package seed instead of the child template seed.
69
+
70
+ For document blueprint previews, use the blueprint shortcut instead:
71
+
72
+ ```liquid
73
+ <main class="bb-document-blueprint-preview" data-bb-document-blueprint-preview="design-to-production">
74
+ {{ "design-to-production" | bb_document_blueprint | raw }}
75
+ </main>
76
+ ```
77
+
78
+ This renders sections from `document-blueprints/<slug>/blueprint.json` with their blueprint seed files and does not write to WordPress content or dynamic content sources.
79
+
80
+ ## Workflow
81
+
82
+ 1. Resolve the template slugs and intended order from the chat or existing homepage/island notes.
83
+ 2. Confirm each referenced view exists, usually `templates/<slug>/template.liquid`.
84
+ 3. Run or request the normal workspace validation:
85
+
86
+ ```bash
87
+ ddev wp bb validate
88
+ ```
89
+
90
+ 4. Create or update `templates/preview-<slug>/template.liquid` with one `bb_template_preview` call per child.
91
+ 5. Keep preview-specific CSS minimal. Prefer Tailwind classes in `template.liquid`; use `style.css` only for preview-only framing or temporary diagnostics.
92
+ 6. If scripts or styles changed in child templates, follow the reported build mode and run the relevant build before visual review.
93
+
94
+ ## Preview View
95
+
96
+ Use the file-backed view when a URL is needed:
97
+
98
+ ```text
99
+ /?blockbite_preview=1&template=true&view=templates/preview-<slug>/template.liquid
100
+ ```
101
+
102
+ If that route is unreliable in the current environment, still leave the aggregate package in place and report the view path:
103
+
104
+ ```text
105
+ templates/preview-<slug>/template.liquid
106
+ ```
107
+
108
+ ## Finish
109
+
110
+ Report:
111
+
112
+ - preview package path
113
+ - referenced template views in render order
114
+ - validation/build commands run
115
+ - any referenced templates that were missing or failed to render