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.