菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
| name | nebula-scrape-url |
| description | 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. |
This applies to web page URLs only. Do not use this for:
Run the scraper to capture screenshots and HTML:
node scripts/scrape-page.js <url>
Review the output in scraped/<timestamp>/:
screenshot-desktop.png - Desktop layout referencescreenshot-tablet.png - Tablet layout referencescreenshot-mobile.png - Mobile layout referencepage.html - Full HTML for structure referenceUse the screenshots to understand the visual design (layout, spacing, colors, typography).
Use the HTML to understand the content structure and hierarchy.
Build the components using the nebula-component-creation skill.
User prompt: "Build me this page: https://example.com/pricing"
node scripts/scrape-page.js https://example.com/pricing