nebula-component-validation

Validate Drupal Canvas component code and apply ESLint and Prettier fixes.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures that newly created or modified components and any page changes produce consistent, lint-free, and properly formatted output before work is considered complete, preventing regressions and style inconsistencies.

Core Features & Use Cases

  • Static Validation: Runs the repository's auto-fix tooling to apply Prettier and ESLint fixes.
  • Workbench Coverage Check: Encourages confirmation that components and pages are represented in Workbench examples and pages so visual output can be reviewed.
  • Use Case: After adding a new component or updating a page, run validation to auto-fix formatting and surface remaining lint errors before merging.

Quick Start

Run the project's code fixer with your package manager, for example npm run code:fix to apply formatting and ESLint auto-fixes.

Frequently Asked Questions about nebula-component-validation

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

FAQPage Schema
How do I auto-fix ESLint and Prettier formatting errors before releasing components?▼

To auto-fix formatting and lint errors, run the repository's code:fix script via your package manager, such as npm run code:fix, which applies deterministic ESLint and Prettier fixes to your components.

When should I run component validation during Drupal Canvas Code Components development?▼

Run component validation whenever you create or modify components, or when page work changes the rendered output, ensuring that newly created or modified components produce consistent, lint-free output before merging.

Do I need a pre-configured ESLint and Prettier setup to run code validation?▼

Yes, executing the code:fix script requires a configured ESLint and Prettier setup within your repository to perform the deterministic static formatting and lint auto-fixes on your component code.

What is the best way to prevent style inconsistencies and regressions in component code?▼

The best way to prevent style inconsistencies is to run static validation after adding or updating components, applying the repository's auto-fix tooling to enforce consistent, properly formatted output before work is considered complete.

Does component validation check if components are represented in Workbench examples?▼

Yes, the validation process includes a Workbench coverage check that encourages confirmation that your components and pages are represented in Workbench examples so visual output can be properly reviewed.