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

nebula-component-creation

Copy example React components into src/components with dependencies and preview coverage.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a repeatable workflow for creating, copying, and integrating React components into a Drupal Canvas codebase so developers avoid inconsistent implementations, missing dependencies, and incomplete preview coverage.

Core Features & Use Cases

  • Example-driven component creation: Start from a matching example in examples/components and copy it into src/components to preserve conventions and metadata.
  • Recursive dependency resolution: Analyze imports to discover nested @/components dependencies and copy only the missing components without overwriting existing ones.
  • Structure and preview enforcement: Ensure each component folder contains both index.jsx and component.yml and maintain or author mocks.json to preserve Workbench preview coverage; run validation before marking work complete.
  • Use Cases: Adding a new UI element from an example, migrating examples into production components, or assembling complex components composed of nested examples.

Quick Start

Copy a similar example from examples/components into src/components, update the copied index.jsx and component.yml, ensure mocks.json provides preview states if needed, and run component validation.

Frequently Asked Questions about nebula-component-creation

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

FAQPage Schema
How do I create React components from example folders for Drupal Canvas?▼

To create React components, copy a matching example folder from examples/components into src/components, update the index.jsx and component.yml files, and run validation for Drupal Canvas Workbench preview.

How does recursive dependency resolution work when copying React components?▼

Recursive dependency resolution analyzes import statements to discover nested @/components dependencies, copying missing components without overwriting existing ones, ensuring all required files are present.

What files does a React component folder need for Drupal Canvas Workbench preview?▼

Each component folder requires an index.jsx and component.yml for Drupal Canvas Workbench preview, plus mocks.json to provide preview states and maintain coverage.

Can I use this workflow to migrate example React components into production?▼

Yes, the workflow supports migrating example React components into production by copying folders from examples/components to src/components and adapting index.jsx and component.yml for production use.

Why are my React components not showing up in the Drupal Canvas Workbench preview?▼

Components fail Workbench preview when missing index.jsx, component.yml, or adequate mocks.json preview states; run component validation to identify and fix structure or coverage gaps.

Does copying example components overwrite existing React components in src?▼

No, the workflow copies only missing components without overwriting existing ones, preserving current React components while recursively discovering and adding nested @/components dependencies.

Related Skills

Explore More Software Engineering Skills→
AJV009AJV009
1

component-authoring

Author React components for Drupal Canvas with component.yml and design tokens.

Community
Advanced
acquiaacquia
16

canvas-workbench

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

Official
Intermediate
acquiaacquia
16

canvas-component-definition

Validate Canvas React components against the canonical component contract.

Official
Intermediate
AJV009AJV009
1

canvas-scaffolding

Scaffold new React components with index.jsx, component.yml, and Storybook stories.

Community
Advanced