nebula-component-validation

Name: nebula-component-validation
Availability: InStock
Author: Acquia

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

16|6|Updated Feb 19, 2025

Search Tags:#linting #npm #validation #components #eslint #prettier #workbench

Ready to run

npx skills add https://github.com/acquia/nebula --skill nebula-component-validation

💬 Prompt for ChatGPT / Claude Chat▼

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.