balintbrews/canvas-component-definition
.agents/skills/canvas-component-definition/SKILL.md
Start here for any React component task to enforce the canonical Canvas component contract. Use for create, modify, refactor, review, migrate, or validate work. Establishes the canonical Canvas component contract, assuming repository components are Canvas targets, and guides either (1) transforming existing components to meet Canvas requirements or (2) creating new Canvas-ready components.
$ install --global
skillsauthnpx skillsauth add balintbrews/canvas-starter canvas-component-definitionInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 7:01 PM9.1s3 files scanned
SKILL.md
- name:
- canvas-component-definition
Canonical definition
A Canvas component is a package of:
- A React implementation (
index.jsx) - Canvas metadata/schema (
component.yml) - Naming and structure compatibility (
machineName, folder path, Workbench mock path) - Canvas-compatible props/slots modeling
- Workbench mock coverage for authored preview states
The first four parts are required for the component to be usable in Drupal
Canvas. Workbench mocks are the supported way to author named preview states
beyond Workbench's built-in Default tab.
Minimum contract (MUST)
Every Canvas component MUST satisfy all checks below:
- Component folder exists at
<components-root>/<machine-name>/(use the repository's configured components root, which may be defined in.env) - React implementation exists at
<components-root>/<machine-name>/index.jsx - Metadata exists at
<components-root>/<machine-name>/component.yml component.ymlincludes required top-level keys (name,machineName,status,required,props,slots)- Folder name exactly matches
machineNameincomponent.yml(kebab-case) - Props/slots follow Canvas rules (for example, avoid unsupported array-of-object prop shapes; use slots for repeatable complex content)
If any item is missing, the component is incomplete for Canvas usage.
For local authoring and review, add a matching Workbench mock file beside the component source and metadata:
- Use
mocks.jsonbesideindex.jsxandcomponent.yml - Author at least one named mock whenever the component needs a preview beyond
the auto-generated
Defaulttab, which renders the component using the first example value for each prop fromcomponent.yml
Naming guidance
Use references/naming.md for naming rules and examples.
Workbench mocks
Use references/workbench-mocks.md for mock naming, placement, format
selection, and validation.
Skill coordination
Evaluate using companion skills in this order.
canvas-component-metadata- Use when creating/changing
component.yml, props/slots, enums, or fixing prop validation errors.
- Use when creating/changing
canvas-component-composability- Use when designing prop/slot structure, decomposing large components, deciding props vs slots, or modeling repeatable list/grid content.
canvas-styling-conventions- Use for all styling work: new components, style props, Tailwind token usage, CVA variants, class changes, and prop changes that affect styles.
canvas-component-utils- Use when rendering formatted HTML text or media via
FormattedTextandImage.
- Use when rendering formatted HTML text or media via
canvas-data-fetching- Use when fetching/rendering Drupal content with JSON:API, SWR, includes, and filter patterns.
canvas-component-push- Use after implementation is complete and validated, when pushing changes and recovering from push failures.
Related Skills
balintbrews/canvas-workbench
development
VerifiedTrustedCommunity
Use when work must be verified in local Canvas Workbench, or when the user asks to run, open, or check a component in Workbench. Verifies that Canvas Workbench is available through the project's package runner, starts the local Workbench dev server, and keeps Workbench verification as part of the implementation workflow.
13SKILL.mdUpdated Apr 16, 2026
balintbrews/canvas-styling-conventions
tools
VerifiedTrustedCommunity
Style Canvas components with Tailwind CSS 4 theme tokens and approved utility patterns. Use when (1) Creating a new component, (2) Adding colors or styling to components, (3) Working with Tailwind theme tokens, (4) Adding or updating design tokens in global.css, (5) Creating color/style props, (6) Any change where component props are added/removed/renamed/retyped and can affect rendered styles. Covers @theme variables, CVA variants, and cn() utility.
13SKILL.mdUpdated Apr 16, 2026
balintbrews/canvas-data-fetching
tools
VerifiedTrustedCommunity
Fetch and render Drupal content in Canvas components with JSON:API and SWR patterns. Use when building content lists, integrating with SWR, or querying related entities. Covers JsonApiClient, DrupalJsonApiParams, relationship handling, and filter patterns.
13SKILL.mdUpdated Apr 16, 2026
balintbrews/canvas-component-utils
tools
VerifiedTrustedCommunity
Use utility components to render formatted text and media correctly. Use when (1) Rendering HTML text content from props, (2) Displaying images, (3) Working with formatted text or media. Covers FormattedText and Image utilities.
13SKILL.mdUpdated Apr 16, 2026