Webstudio Cloud

WORKING SLICE
Build a focused visual editor for semantic sections and responsive styles, then export an accessible static site. Offer a source preview and avoid claiming compatibility with all Webstudio project formats.

Build this scoped Webstudio Cloud-inspired workflow with a documented data model and visible failure states.

Architecture
- Eleventy, Markdown content and typed JSON section manifests for a static website.
- A local Node editor/build command with Sharp image processing; generated files publish to a user-owned host.

Prerequisites and limits
Node, a selected output folder, licensed content/assets and a user-owned deployment target. DNS, email delivery and any server-side forms require separate configuration.
Outside this release: CMS collaboration and client handoff; managed hosting, forms, and analytics

Data model and correctness
page trees, semantic components, design tokens, responsive breakpoints and asset references
Invariant: Visual edits preserve meaningful document order; generated forms need a separately configured backend and secrets never enter the bundle.
Build into a new output directory from a saved content revision. Preview at narrow and wide widths and deploy the complete artifact atomically; retain the previous release.

Security and privacy
Escape content, sanitize Markdown, constrain asset paths and never embed API secrets in the static output. Private content requires a real authenticated server rather than a hidden URL.

Recovery and export
Export source Markdown/JSON and original assets alongside the generated site. A clean build from that archive must not depend on an editor database.

Implementation order
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Build a focused visual editor for semantic sections and responsive styles, then export an accessible static site. Offer a source preview and avoid claiming compatibility with all Webstudio project formats. Record prerequisites, select representative user-owned fixtures and document the unsupported features: CMS collaboration and client handoff; managed hosting, forms, and analytics
2. Phase 2 — Durable model. Model page trees, semantic components, design tokens, responsive breakpoints and asset references Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: Visual edits preserve meaningful document order; generated forms need a separately configured backend and secrets never enter the bundle.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Build into a new output directory from a saved content revision. Preview at narrow and wide widths and deploy the complete artifact atomically; retain the previous release.
4. Phase 4 — Permissions and integration failure. Escape content, sanitize Markdown, constrain asset paths and never embed API secrets in the static output. Private content requires a real authenticated server rather than a hidden URL. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export source Markdown/JSON and original assets alongside the generated site. A clean build from that archive must not depend on an editor database. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Reorder a section and preserve sensible keyboard reading order; a clean static export loads all assets without the editor server. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

Acceptance
Reorder a section and preserve sensible keyboard reading order; a clean static export loads all assets without the editor server.
Use real source data or clearly labeled fixtures. Explain unsupported input and provider failures; do not fabricate analytics, delivery receipts, accuracy claims or security guarantees.

Optional agent guidance
Optional external skill: [frontend-design](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md) — Create intentional web layouts, typography, component styling and responsive frontend interfaces. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [seo-audit](https://github.com/coreyhaines31/marketingskills/blob/main/skills/seo-audit/SKILL.md) — Investigate crawlability, indexing, page metadata, internal linking and on-page content issues. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Project rule — data model: page trees, semantic components, design tokens, responsive breakpoints and asset references
Project rule — preserve this invariant: Visual edits preserve meaningful document order; generated forms need a separately configured backend and secrets never enter the bundle.
Project rule — acceptance evidence: Reorder a section and preserve sensible keyboard reading order; a clean static export loads all assets without the editor server.

# AGENTS.md — Build guide for Webstudio Cloud

## Project scope
Build a focused visual editor for semantic sections and responsive styles, then export an accessible static site. Offer a source preview and avoid claiming compatibility with all Webstudio project formats.

Catalogue verdict: kinda. The visible visual website builder loop is buildable, but a credible replacement needs more than the first screen. Webstudio Cloud earns its keep through editor, CMS, hosting, polish, so expect a weekend or multi-day build and a narrower personal scope.
Use the implementation prompt below to define the deliverable. Complete each phase's acceptance checks before extending the scope.

## Working agreement
- Inspect the repository and its existing instructions before choosing paths, dependencies or commands. Keep one coherent stack and explain changes to the proposed architecture.
- Plan a vertical slice that accepts a real input and produces the useful output described below. Persist only the state the prompt calls for; respect memory-only and upstream-managed workflows. Use fixtures only when they are clearly labelled.
- After scaffolding, document the actual install, development, check and build commands in README and keep them synchronized with the package or project manifest. Do not report commands as successful unless they ran.
- Work in small steps. At handoff, list implemented flows, checks actually performed, remaining blockers, and any credentials or provider setup the owner must supply.
- Do not publish, spend money, contact customers, delete source data or run irreversible migrations without the project owner's authorization.

## Prerequisites
- Node, a selected output folder, licensed content/assets and a user-owned deployment target. DNS, email delivery and any server-side forms require separate configuration.
- Implementation components: Eleventy, Markdown content and typed JSON section manifests for a static website. A local Node editor/build command with Sharp image processing; generated files publish to a user-owned host.
- Scope boundary: CMS collaboration and client handoff; managed hosting, forms, and analytics

## Stack and architecture
- Eleventy, Markdown content and typed JSON section manifests for a static website.
- A local Node editor/build command with Sharp image processing; generated files publish to a user-owned host.
- Domain model: page trees, semantic components, design tokens, responsive breakpoints and asset references

## Security and data integrity
- Escape content, sanitize Markdown, constrain asset paths and never embed API secrets in the static output. Private content requires a real authenticated server rather than a hidden URL.
- Correctness boundary: Visual edits preserve meaningful document order; generated forms need a separately configured backend and secrets never enter the bundle.
- Build into a new output directory from a saved content revision. Preview at narrow and wide widths and deploy the complete artifact atomically; retain the previous release.
- Export source Markdown/JSON and original assets alongside the generated site. A clean build from that archive must not depend on an editor database.

## Agent implementation rules
- Project rule — data model: page trees, semantic components, design tokens, responsive breakpoints and asset references
- Project rule — preserve this invariant: Visual edits preserve meaningful document order; generated forms need a separately configured backend and secrets never enter the bundle.
- Project rule — acceptance evidence: Reorder a section and preserve sensible keyboard reading order; a clean static export loads all assets without the editor server.

## Optional agent skills and references
- Optional external skill: [frontend-design](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md) — Create intentional web layouts, typography, component styling and responsive frontend interfaces. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
- Optional external skill: [seo-audit](https://github.com/coreyhaines31/marketingskills/blob/main/skills/seo-audit/SKILL.md) — Investigate crawlability, indexing, page metadata, internal linking and on-page content issues. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
- Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.

Read the linked SKILL.md and its dependencies before adding a skill. Select only the skills matching this project's runtime and task; their documentation does not supply API access, credentials or approval to perform external actions. Pin the reviewed revision where the tool supports it. Follow the chosen agent's documented project-level installation mechanism.

## Distribution ideas
These are optional planning notes. Obtain the owner's approval before publishing or contacting anyone.
- Demonstrate the actual Webstudio Cloud-inspired workflow with owned or clearly labeled sample data: Build a focused visual editor for semantic sections and responsive styles, then export an accessible static site. Offer a source preview and avoid claiming compatibility with all Webstudio project formats.
- Publish a reproducible walkthrough with this observable result: Reorder a section and preserve sensible keyboard reading order; a clean static export loads all assets without the editor server.
- Explain who can operate this scoped tool, its setup and ongoing costs, and these remaining product gaps: CMS collaboration and client handoff; managed hosting, forms, and analytics Avoid guaranteed savings, performance scores or implied endorsement.

## Engineering roadmap
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Build a focused visual editor for semantic sections and responsive styles, then export an accessible static site. Offer a source preview and avoid claiming compatibility with all Webstudio project formats. Record prerequisites, select representative user-owned fixtures and document the unsupported features: CMS collaboration and client handoff; managed hosting, forms, and analytics
2. Phase 2 — Durable model. Model page trees, semantic components, design tokens, responsive breakpoints and asset references Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: Visual edits preserve meaningful document order; generated forms need a separately configured backend and secrets never enter the bundle.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Build into a new output directory from a saved content revision. Preview at narrow and wide widths and deploy the complete artifact atomically; retain the previous release.
4. Phase 4 — Permissions and integration failure. Escape content, sanitize Markdown, constrain asset paths and never embed API secrets in the static output. Private content requires a real authenticated server rather than a hidden URL. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export source Markdown/JSON and original assets alongside the generated site. A clean build from that archive must not depend on an editor database. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Reorder a section and preserve sensible keyboard reading order; a clean static export loads all assets without the editor server. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

## Paid-product capabilities outside this build
- CMS collaboration and client handoff
- managed hosting, forms, and analytics
- general-purpose visual editing
- large template and component libraries

## Implementation prompt
WORKING SLICE
Build a focused visual editor for semantic sections and responsive styles, then export an accessible static site. Offer a source preview and avoid claiming compatibility with all Webstudio project formats.

Build this scoped Webstudio Cloud-inspired workflow with a documented data model and visible failure states.

Architecture
- Eleventy, Markdown content and typed JSON section manifests for a static website.
- A local Node editor/build command with Sharp image processing; generated files publish to a user-owned host.

Prerequisites and limits
Node, a selected output folder, licensed content/assets and a user-owned deployment target. DNS, email delivery and any server-side forms require separate configuration.
Outside this release: CMS collaboration and client handoff; managed hosting, forms, and analytics

Data model and correctness
page trees, semantic components, design tokens, responsive breakpoints and asset references
Invariant: Visual edits preserve meaningful document order; generated forms need a separately configured backend and secrets never enter the bundle.
Build into a new output directory from a saved content revision. Preview at narrow and wide widths and deploy the complete artifact atomically; retain the previous release.

Security and privacy
Escape content, sanitize Markdown, constrain asset paths and never embed API secrets in the static output. Private content requires a real authenticated server rather than a hidden URL.

Recovery and export
Export source Markdown/JSON and original assets alongside the generated site. A clean build from that archive must not depend on an editor database.

Implementation order
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Build a focused visual editor for semantic sections and responsive styles, then export an accessible static site. Offer a source preview and avoid claiming compatibility with all Webstudio project formats. Record prerequisites, select representative user-owned fixtures and document the unsupported features: CMS collaboration and client handoff; managed hosting, forms, and analytics
2. Phase 2 — Durable model. Model page trees, semantic components, design tokens, responsive breakpoints and asset references Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: Visual edits preserve meaningful document order; generated forms need a separately configured backend and secrets never enter the bundle.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Build into a new output directory from a saved content revision. Preview at narrow and wide widths and deploy the complete artifact atomically; retain the previous release.
4. Phase 4 — Permissions and integration failure. Escape content, sanitize Markdown, constrain asset paths and never embed API secrets in the static output. Private content requires a real authenticated server rather than a hidden URL. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export source Markdown/JSON and original assets alongside the generated site. A clean build from that archive must not depend on an editor database. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Reorder a section and preserve sensible keyboard reading order; a clean static export loads all assets without the editor server. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

Acceptance
Reorder a section and preserve sensible keyboard reading order; a clean static export loads all assets without the editor server.
Use real source data or clearly labeled fixtures. Explain unsupported input and provider failures; do not fabricate analytics, delivery receipts, accuracy claims or security guarantees.

Optional agent guidance
Optional external skill: [frontend-design](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md) — Create intentional web layouts, typography, component styling and responsive frontend interfaces. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [seo-audit](https://github.com/coreyhaines31/marketingskills/blob/main/skills/seo-audit/SKILL.md) — Investigate crawlability, indexing, page metadata, internal linking and on-page content issues. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Project rule — data model: page trees, semantic components, design tokens, responsive breakpoints and asset references
Project rule — preserve this invariant: Visual edits preserve meaningful document order; generated forms need a separately configured backend and secrets never enter the bundle.
Project rule — acceptance evidence: Reorder a section and preserve sensible keyboard reading order; a clean static export loads all assets without the editor server.

## Completion evidence
Demonstrate the prompt's acceptance scenarios against the scoped workflow. Include setup from a clean checkout and failure recovery. Check persistence across restart and export/restore only for the state the prompt says to store; for memory-only tools, confirm that temporary content is discarded as specified. Record actual results and remaining limitations. A detailed plan alone does not establish a working replacement.