🎨 デザインコミュニティ

canvas-component-definition

Reactコンポーネント開発において、既存コンポーネントをCanvasの要件に適合させたり、新規コンポーネントをCanvas対応にしたりする際に、標準的な契約に沿って開発を進めるためのガイドを提供するSkill。

📜 元の英語説明(参考)

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.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o canvas-component-definition.zip https://jpskill.com/download/9231.zip && unzip -o canvas-component-definition.zip && rm canvas-component-definition.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9231.zip -OutFile "$d\canvas-component-definition.zip"; Expand-Archive "$d\canvas-component-definition.zip" -DestinationPath $d -Force; ri "$d\canvas-component-definition.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して canvas-component-definition.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → canvas-component-definition フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

標準的な定義

Canvasコンポーネントは、以下のパッケージです。

React実装 (index.jsx)
Canvasメタデータ/スキーマ (component.yml)
命名と構造の互換性 (machineName、フォルダパス、ストーリーパス)
Canvas互換のprops/slotsモデリング

これら4つの要素すべてが、Drupal Canvasでコンポーネントを使用可能にするために必要です。

最小限の契約 (MUST)

すべてのCanvasコンポーネントは、以下のすべてのチェックを満たす必要があります。

コンポーネントフォルダが <components-root>/<machine-name>/ に存在する (リポジトリで設定されたコンポーネントルートを使用します。これは .env で定義されている場合があります)。
React実装が <components-root>/<machine-name>/index.jsx に存在する
メタデータが <components-root>/<machine-name>/component.yml に存在する
component.yml に必要なトップレベルのキー (name、machineName、status、required、props、slots) が含まれている
フォルダ名が component.yml の machineName と完全に一致する (kebab-case)
一致するストーリーが <stories-root>/<machine-name>.stories.jsx に存在する (リポジトリで設定されたストーリールートを使用します)。
Props/slotsがCanvasのルールに従っている (たとえば、サポートされていないオブジェクトの配列のpropの形状を避け、繰り返される複雑なコンテンツにはslotsを使用します)。

いずれかの項目が欠落している場合、コンポーネントはCanvasで使用するには不完全です。

命名に関するガイダンス

命名規則と例については、references/naming.md を参照してください。

スキルの連携

この順序でコンパニオンスキルを使用することを評価してください。

canvas-component-metadata
- component.yml、props/slots、enumsを作成/変更する場合、またはpropの検証エラーを修正する場合に使用します。
canvas-component-composability
- prop/slotの構造を設計する場合、大規模なコンポーネントを分解する場合、propsとslotsのどちらにするかを決定する場合、または繰り返されるリスト/グリッドコンテンツをモデル化する場合に使用します。
canvas-styling-conventions
- すべてのスタイリング作業 (新しいコンポーネント、スタイルprops、Tailwindトークンの使用、CVAバリアント、クラスの変更、およびスタイルに影響を与えるpropの変更) に使用します。
canvas-component-utils
- FormattedText および Image を介してフォーマットされたHTMLテキストまたはメディアをレンダリングする場合に使用します。
canvas-data-fetching
- JSON:API、SWR、includes、およびフィルターパターンを使用してDrupalコンテンツをフェッチ/レンダリングする場合に使用します。
canvas-component-upload
- 実装が完了して検証された後、アップロード時およびアップロードの失敗から回復する場合に使用します。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

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, story path)
Canvas-compatible props/slots modeling

All four parts are required for the component to be usable in Drupal Canvas.

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.yml includes required top-level keys (name, machineName, status, required, props, slots)
Folder name exactly matches machineName in component.yml (kebab-case)
A matching story exists at <stories-root>/<machine-name>.stories.jsx (use the repository's configured stories root)
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.

Naming guidance

Use references/naming.md for naming rules and examples.

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.
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 FormattedText and Image.
canvas-data-fetching
- Use when fetching/rendering Drupal content with JSON:API, SWR, includes, and filter patterns.
canvas-component-upload
- Use after implementation is complete and validated, when uploading and recovering from upload failures.