skills.rest
drupal-canvas
drupal-canvasOFFICIAL
Explore all skills by this author →
GitHub

canvas-component-definition

Validate Canvas component folders for required index.jsx and component.yml files.

3|1|Updated Feb 11, 2026
Search Tags:#react#validation#component#canvas#yaml-frontmatter#workbench
One-click install
npx skills add https://github.com/drupal-canvas/skills --skill canvas-component-definition-drupal-canvas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-component-definition
Source: https://github.com/drupal-canvas/skills/tree/main/skills/canvas-component-definition
Command: npx skills add https://github.com/drupal-canvas/skills --skill canvas-component-definition-drupal-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Canvas-based component development often suffers from inconsistencies in contract enforcement, missing metadata, and diverging conventions across teams. This Skill provides a standard, self-contained unit that ensures every component follows the Canvas component contract and exposes a clear, discoverable entry point for tooling and reviews.

Core Features & Use Cases

  • Validates the presence of a root component folder and required files: index.jsx and component.yml.
  • Enforces canonical naming, machineName alignment, and required top-level keys in component.yml.
  • Detects and references optional resources in references/ (and scripts/ or assets/ when present) to support previews, mocks, and documentation.

Quick Start

Create or update the Skill Unit by adding a SKILL.md with the required frontmatter and ensure there is a references/ directory with supporting guidelines, then run your validation workflow.

Frequently Asked Questions about canvas-component-definition

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

FAQPage Schema
How do I validate a Canvas component contract for a React project?▼

Validating a Canvas component contract requires a root folder with index.jsx and component.yml, enforcing canonical naming, machineName alignment, and required top-level keys to ensure consistency across teams.

What is a SKILL.md file and how does it enable component discovery?▼

A SKILL.md file uses YAML frontmatter containing a name and description to define a Skill Unit, loading the Markdown body as operational instructions into the activation context for execution and discovery.

How do I structure references and assets for deterministic React component tasks?▼

Structure optional resources in references/, scripts/, and assets/ directories to support deterministic tasks, documentation, and assets as directed by SKILL.md operational instructions.

Does Canvas component validation work without YAML frontmatter?▼

Canvas component validation requires YAML frontmatter containing a name and a description in SKILL.md to identify and validate Skill Units, so it will not work without it.

Why does component.yml validation fail when machineName and folder name don't match?▼

Component.yml validation fails because the Canvas component contract enforces canonical naming and machineName alignment to prevent diverging conventions and metadata inconsistencies across teams.

Related Skills

Explore More Software Engineering Skills→
AJV009AJV009
1

canvas-component-definition

Validate React component packages against the Canvas component contract.

Community
Advanced
mia-cxmia-cx

skill-create

Create SKILL.md frontmatter, Markdown instructions, and optional resources for Claude Skills.

Official
Advanced
letta-ailetta-ai
134

skill-creator

Guide creation and updates of Claude skills with SKILL.md structure.

Official
Intermediate
LamseyahEliasLamseyahElias

hermes-agent-skill-authoring

Define in-repo Hermes-Agent skills with SKILL.md and YAML frontmatter.

Community
Intermediate