skills.rest
acquia
acquiaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

canvas-workbench

Start and verify the local Canvas Workbench development server for component and page previews.

16|6|Updated Feb 19, 2025
Search Tags:#mocks#verify#start#local-dev#component-preview#drupal-canvas#canvas-workbench
One-click install
npx skills add https://github.com/acquia/nebula --skill canvas-workbench-acquia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-workbench
Source: https://github.com/acquia/nebula/tree/main/.agents/skills/canvas-workbench
Command: npx skills add https://github.com/acquia/nebula --skill canvas-workbench-acquia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a reliable way to start, reuse, and verify a local Canvas Workbench dev server so developers can preview components and pages without guessing commands or configuration details.

Core Features & Use Cases

  • Package runner detection and launch: Detects the project's package manager and uses the matching runner to start @drupal-canvas/workbench.
  • Installation gate: Offers to install @drupal-canvas/workbench as a dev dependency if it is missing and uses the matching install command.
  • Configuration and verification workflow: Checks canvas.config.json defaults, updates configuration when needed, reuses an existing server, and guides iterative preview, mocks.json authoring, and page verification.
  • Use Case: When a developer needs to validate a UI change, this Skill starts or reuses Workbench, opens the component or page preview, and helps confirm visual and mock-based behavior.

Quick Start

Start the Canvas Workbench using the repository's package runner and open the preview for the component at src/components/my-card to verify the Default and mocks.json states.

Frequently Asked Questions about canvas-workbench

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I start the local Canvas Workbench development server for component previews?▼

The Skill detects your project's package manager and uses the matching package-runner command to start the local Canvas Workbench development server. It verifies canvas.config.json and reuses an existing server if one is already running.

Do I need to manually install @drupal-canvas/workbench before previewing pages?▼

No, you do not need to manually install @drupal-canvas/workbench. If the package is absent, the Skill offers to install it as a dev dependency automatically using your project's matching package manager and install command.

How does mocks.json authoring work when validating UI changes in Workbench?▼

Mocks.json authoring defines specific data states for component previews. The Skill guides iterative preview workflows by opening component routes and validating the visual and mock-based behavior defined in your mocks.json file.

Can I reuse an existing Canvas Workbench server instead of starting a new one?▼

Yes, you can reuse an existing Canvas Workbench server. The Skill detects an already running local development server, respects the current canvas.config.json defaults, and connects to it to preview components without launching a duplicate process.

What package managers are supported when launching the Canvas Workbench dev server?▼

The Skill supports any repository package manager by detecting the project's configuration and preferring the matching package-runner command. This ensures the local Canvas Workbench server starts using the correct tool without manual configuration.

Related Skills

Explore More Software Engineering Skills→
drupal-canvasdrupal-canvas
3

canvas-workbench

Detect the project package manager and run Canvas Workbench for component verification.

Official
Intermediate
a-tabijia-tabiji

preview

Serve a local LP preview with a Python HTTP server on port 8000.

Community
Intermediate
acquiaacquia
16

canvas-component-definition

Validate Canvas React components against the canonical component contract.

Official
Intermediate
cameronraysmithcameronraysmith
14

process-compose-init

Configure process-compose.yaml and Nix flake modules for local service orchestration.

Community
Advanced