nebula

Use for any task touching site chrome — header, footer, sidebar, or global navigation that repeats across pages — and for any region-spec work (create, modify, review, validate region JSON, or the project-level layout component). Also load when a task creates or edits multiple pages that share chrome, or asks for a "site" or "navigation between pages"; shared chrome belongs in regions, never inlined into page JSON.

Create and modify content templates that map Drupal content entities to Canvas component layouts. Use when asked to (1) Create a new content template, (2) Modify an existing content template, (3) Add or change entity field mappings in a template, (4) Compose components in a content template via slots. Content templates live in the configured `contentTemplatesDir` (default `content-templates/`) and define how Drupal entity types, bundles, and view modes render as Canvas component trees.

Push validated Canvas component changes to Drupal Canvas and recover from common push failures. Use only when the user explicitly requests a push/publish/sync action. Handles dependency-related push failures that require retry.

Acquia Source only. Create and edit Drupal menus in the CMS via Source MCP. Do not use for non-Source sites; production nav should still be authored in Drupal, not only in component code.

Design Canvas-ready React components with slots and decomposition-first patterns. Use when (1) Designing a component's prop/slot structure, (2) A component is growing too large, (3) Deciding between props vs slots, (4) Refactoring monolithic components, (5) Modeling repeatable list/grid content, (6) Reusing, composing, or wrapping existing workspace components. Ensures Canvas compatibility.

Start here for any React component task to enforce the canonical Canvas component contract. Use for create, modify, refactor, review, migrate, or validate work. Establishes the canonical Canvas component contract, assuming repository components are Canvas targets, and guides either (1) transforming existing components to meet Canvas requirements or (2) creating new Canvas-ready components.

Fetch and render Drupal content in Canvas components with JSON:API and SWR patterns. Use when building content lists, integrating with SWR, querying related entities, or constructing/changing any JSON:API request — every generated request must be executed and verified to return the expected results before rendering logic is written against it. Covers JsonApiClient, DrupalJsonApiParams, relationship handling, filter patterns, and request verification.

Plans structure for a component library with props/slots and right-sized component granularity. Run before building or adding Canvas components (new `src/components/` folders, component.yml, React), or for plan-only / breakdown-only work, whenever UI must map to a coherent tree. Mandatory for every new Figma frame or greenfield screen—repository drafts do not replace phases A–G.

Plans and builds Drupal Canvas navigation UI (main nav, footer links, sidebar nav, mobile drawers, breadcrumbs) using design decomposition for structure and props/slots, then JSON:API menu or page-context patterns from canvas-data-fetching. Use when the user asks for navigation, header or footer links, menus, menu_items, mobile nav, or breadcrumb trails. Run after canvas-design-decomposition for layout and API sketches; follow canvas-data-fetching for SWR, JsonApiClient, sortMenu, and menu fallbacks.

Scaffolds Canvas UI for individual Drupal node pages (single-entity detail views) via components, component.yml, and one example pages/ spec—not list or index views. Does not wire those detail pages through remote APIs, Source MCP, or per-node page creation. Use for article/product/event detail templates, one-node screens, and “skip API/MCP page assembly for each node”; do not use this skill for blog grids, search results, or other list UIs.

Define valid component.yml metadata for Canvas components, including props, slots, and enums. Use when (1) Creating a new component, (2) Adding or modifying props, (3) Troubleshooting "not a valid choice" or prop type errors, (4) Mapping enums to CVA variants.

Use utility components to render formatted text and media correctly. Use when (1) Rendering HTML text content from props, (2) Displaying images, (3) Working with formatted text or media. Covers FormattedText and Image utilities.

Start here for any Canvas page-spec task. Use for create, modify, refactor, review, migrate, or validate work on page JSON files that sync with Canvas and render in Workbench. Establishes the canonical Canvas page-spec contract, including placement, structure, format constraints, and validation.

Use when work must be verified in local Canvas Workbench, or when the user asks to run, open, check, or author component mocks or page previews in Workbench. Verifies that Canvas Workbench is available through the project's package runner, starts the local Workbench dev server, and keeps Workbench verification as part of the implementation workflow.

Validate components after creating or modifying components, and after page work that changes rendered output, before considering work complete. Runs `npm run code:fix` for static validation.

Focused visual QA for changed Canvas components and pages in local Canvas Workbench. Use only when the user explicitly asks for visual verification, visual QA, or Workbench rendering review of a changed component or page.

Nebula-specific overlay for Canvas Workbench pages. Use when you need the repository-local rule that `examples/pages/` is reference-only and active Workbench pages belong in `pages/`.

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.

Style Canvas components with Tailwind CSS 4 theme tokens and approved utility patterns. Use when (1) Creating a new component, (2) Adding colors or styling to components, (3) Working with Tailwind theme tokens, (4) Adding or updating design tokens in global.css, (5) Creating color/style props, (6) Any change where component props are added/removed/renamed/retyped and can affect rendered styles. Covers @theme variables, CVA variants, and cn() utility.

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.

Create React components by copying and modifying examples from `examples/components/`. Use when asked to (1) Create, add, or build a new component, (2) Copy an example component to `src/components/`, (3) Add a component with dependencies. Handles dependency resolution and ensures each component has `index.jsx` and `component.yml`.

Project folder structure and package manager detection for Nebula. Reference when navigating the codebase, running commands, or determining which package manager to use (npm/yarn/pnpm/bun).

Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.

Capture web page screenshots and HTML for design reference. Use when the user provides a URL and asks to build, recreate, or implement a design. Runs `scripts/scrape-page.js` to capture desktop/tablet/mobile screenshots and HTML. Not for Figma, GitHub, or documentation URLs.