migrate-drupal-canvas-source

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 Acquia Source 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 Acquia Source 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 Acquia Source 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).

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 Acquia Source site identity (name, logo, favicon) and page path aliases via browser automation. Handles the site-settings admin page, file uploads, front page verification, 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 comparison across ALL pages with responsive testing, link validation, and cross-page consistency checks. Loads source in Playwright, target in Chrome (visible to user). Reports visual and text differences with specifics.

Search and fetch Acquia Source documentation pages. Takes a query describing what you need to know about Acquia Source (e.g., "menu management", "component props and slots", "known issues", "site settings configuration") and returns the full content of matching documentation pages from docs.acquia.com. Invoke with /acquia-source-docs-explorer <query>. Use this whenever you need to understand how Acquia Source works, verify platform behavior, check for limitations, or find the correct admin paths and configuration options.

Connecting a Canvas component project to Acquia Source, configuring OAuth API clients, uploading components, troubleshooting authentication errors (401, client auth failed, no components found), and managing .env configuration

How to write, modify, and style React components for Drupal Canvas and Acquia Source. 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 src/components/.

Managing content in Acquia Source via JSON:API. Covers listing, fetching, creating, updating, and deleting pages and content entities using 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 Acquia Source 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 src/components/ and must be created.

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 Acquia Source using specialized sub-agents. Discovers all pages, extracts verbatim content and responsive CSS, builds missing components with Storybook visual verification, uploads to Source, 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 Acquia Source 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 (src/stories/atoms/), molecule stories (src/stories/molecules/), organism stories (src/stories/organisms/), template stories (src/stories/templates/), page stories (src/stories/pages/), and test stories (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