migrate-drupal-canvas

Validates migration artifact completeness and quality between phases. Checks content MDs have body text (not just headings), screenshots exist and are >1KB, component mappings cover all sections, design tokens have colors/fonts/spacing. Returns PASS/FAIL with specific gaps. Use between phases of site migration.

Audits existing Canvas components against all pages' section requirements. Reads component.yml and index.jsx for every component, compares capabilities against section inventories, identifies structural gaps, checks global.css design tokens, and produces the component mapping with gap list. Use for Phase 2 of site migration.

Builds Canvas React components with Storybook structural verification against source site screenshots. Creates component code, component.yml, and stories at the correct atomic level. Performs structural sanity checks only — visual fidelity (colors, spacing, fonts) is validated by storybook-qa in Phase 3.5. Use for Phase 3 of site migration.

Targeted fix agent for Phase 3.5. Takes ONE QA issue, reads the issue artifact and source/built screenshots, applies a fix to the component code following CVA/Tailwind conventions, verifies in Storybook, and runs validation. Use for fixing individual issues during the Storybook QA Loop.

Composes Drupal CMS page JSON from verbatim content markdown files. Reads content files and component.yml schemas, generates component JSON with exact text. NEVER generates or rephrases text — transcription only. Use for Phase 7 of site migration.

Deep responsive CSS analysis of a source website. Extracts computed styles at multiple viewport widths (320, 768, 1024, 1280, 1440px) to capture breakpoints, max-widths, spacing, and responsive behavior. Use for Phase 0-1 of site migration.

Downloads media assets from the source site and uploads them to Drupal CMS. Tracks all assets in media-map.md with source URL, local path, media UUID, and target_id. Use for Phase 5 of site migration.

Creates and configures Drupal menus (main, footer, social-media) via browser automation in the Drupal CMS admin UI. Handles all menu item creation, reordering, and verification with robust save-verification and autocomplete handling. Use for Phase 6 menu configuration during site migration.

Focused single-target verification agent. Verifies ONE component or ONE section at a time. Multiple instances can run in parallel. Use for targeted verification in Phase 4 (component upload) and Phase 7 (page content).

Sets up a Drupal CMS project with Canvas for component development and site migration. Runs all setup steps autonomously — DDEV, Drupal config, OAuth client, Canvas scaffolding, CSS layer fix, Storybook validation. Returns a structured setup report. Use before any migration or component development work.

Crawls a source website using Playwright, extracts ALL text content verbatim into structured markdown files, takes per-section screenshots at desktop and mobile widths, and builds the migration artifact files (plan.md, section-reference.md, content files). Use for Phase 0-1 of site migration.

Configures Drupal CMS site identity (name, logo, favicon) and page path aliases. Uses drush for site name/slogan/front page and browser automation for Mercury theme settings and URL alias management. Use for Phase 6 site identity and page paths during site migration.

Reads the migration state journal (state.jsonl) and produces a concise situational summary for the orchestrator. Spawned after compaction or on demand.

Strict visual QA agent for Phase 3.5. Compares Storybook renders against source site screenshots section-by-section at desktop and mobile viewports. Creates issue artifacts for critical/high discrepancies. Use for QA scanning during the Storybook QA Loop.

Runs the full component upload pipeline — preflight validation, upload all, then verify each component in the Canvas Code Editor. Handles SSR test failures and per-component rollback. Use for Phase 4 of site migration.

Comprehensive final review agent for Phase 8. Full section-by-section structural and text comparison across ALL pages with link validation, cross-page navigation, mobile nav toggle, and content fidelity checks. Loads source in Playwright, target in Chrome (visible to user). Design fidelity (colors, spacing, fonts) is handled by Phase 3.5 storybook-qa — this agent focuses on post-deployment concerns.

Search and fetch Canvas and Drupal CMS documentation pages. Takes a query describing what you need to know (e.g., "code components", "page regions", "known issues", "data fetching") and returns the full content of matching documentation pages. Invoke with /canvas-docs-explorer <query>. Use this whenever you need to understand how Canvas or Drupal CMS works, verify platform behavior, check for limitations, or find configuration options.

How to write, modify, and style React components for Drupal Canvas and Drupal CMS. Covers the technology stack (React 19, Tailwind CSS 4, CVA variants, cn utility), component.yml prop and slot definitions, enum naming, image and video prop types, formatted text fields, color scheme variants, theme tokens from global.css, required folder structure (index.jsx + component.yml), and matching source site visual styles including extracting design tokens, dark backgrounds, gradient text, glass/blur effects, and updating global.css theme. Use when building, editing, or fixing any component in canvas/src/components/.

Managing content in Drupal CMS via JSON:API. Covers listing, fetching, creating, updating, and deleting pages and content entities using cd canvas && npm run content commands. Includes page component structure (uuid, component_id, inputs, parent_uuid, slot), image uploading and media target_id handling, formatted HTML text fields, UUID generation, input format reference mapping component.yml prop types to JSON formats, menu item listing (menu_items--main, menu_items--footer, menu_items--social-media are read-only via API — must use admin UI for create/update/delete), page path alias management, and common pitfalls like wrong media IDs, link props as objects instead of strings, plain strings for HTML fields, target_id as integer instead of string, langcode errors, and JSON:API read-only mode. Use when composing pages, adding components to pages, uploading images, or interacting with the Drupal CMS content API.

Step-by-step guide for scaffolding a new React component from scratch. Covers copying an existing component as a base, creating the required index.jsx and component.yml files, naming conventions (snake_case machineName, no project prefixes), creating the matching Storybook story file, reusing existing components via imports, composability patterns, and internal component setup (status false). Use when a needed component does not yet exist in canvas/src/components/ and must be created.

Setting up a Drupal CMS project with Canvas for component development and site migration. Covers DDEV, Drupal CMS, JSON:API write mode, jsonapi_menu_items, Canvas OAuth client, permissions, page regions, menus, Canvas project scaffolding, .env, CSS layer fix, and Storybook validation. Every step is idempotent. Optimized for execution by the project-setup agent — designed to run end-to-end without user interaction.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Full site migration to Drupal CMS using specialized sub-agents. Discovers all pages, extracts verbatim content and responsive CSS, builds missing components with Storybook visual verification, uploads to Drupal CMS, configures site identity and menus, creates all page content from verbatim text files, and validates every page visually against the source with side-by-side comparison. Invoke with /migrate-site <source-url>. Handles complete multi-page site migration including branding, navigation, media assets, layout matching, and structured post-migration review.

Use when starting a new Drupal CMS site migration project — bootstraps the project directory with required directory structures, reference files, templates, and validates prerequisites

Creating and modifying Storybook 10 stories using atomic design hierarchy. Covers atom stories (canvas/src/stories/atoms/), molecule stories (canvas/src/stories/molecules/), organism stories (canvas/src/stories/organisms/), template stories (canvas/src/stories/templates/), page stories (canvas/src/stories/pages/), and test stories (canvas/src/stories/tests/). Includes naming conventions (kebab-case .stories.tsx), autodocs setup, controls matching component.yml props and slots, placeholder images via placehold.co, real asset handling with index.ts exports, PageLayout usage for fullscreen page stories, and rules against direct HTML markup in story arguments. Use when creating, updating, or fixing any Storybook story file.

3 hooks across 3 events

Browser automation for source site crawling, Storybook testing, CSS extraction, and visual QA