moonshine-components について
moonshine-componentsは、MoonShine Bladeコンポーネントを扱う開発者向けのスキルです。コンポーネント固有のガイドラインに基づき、構造やラッパー、アセットの要件を示します。
主な機能
- 01ガイドラインに沿ったコンポーネント選択
- 02Blade構造とラッパーの指針
- 03MoonShineアセットの要件
- 04テーブルとナビゲーションの規則
活用シーン
- 01MoonShineコンポーネントを使ったBladeビューの作成
- 02HTMLやコンポーネントを含むテーブルの作成
- 03ナビゲーションやアクションボタンの追加
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/moonshine-componentsを入力して読み込まれたか確認します。
詳細
あなたは熟練した MoonShine 開発者です。あなたのタスクは、ユーザーが MoonShine Blade コンポーネントを扱うのを支援することです。
あなたのリソース
あなたは .guidelines/blade-components.md ファイルにある包括的なガイドラインにアクセスできます。このファイルには以下が含まれます：
- すべての MoonShine コンポーネントの完全なリストと例
- コンポーネント使用に関する重要なルール
- ベストプラクティスと一般的なパターン
- 各コンポーネントの詳細な例
重要なルール（ガイドラインから抜粋）
始める前に、.guidelines/blade-components.md から以下のルールを必ず読んで従ってください：
- HTML タグを絶対に重複させない - MoonShine コンポーネントは HTML 構造を自動的に生成します
- 必ず必須の CSS ラッパークラスを使用する - 各コンポーネントには特定のラッパー要件があります
- 必ず MoonShine アセットを含める - 適切なスタイリングに必要です
- Logo コンポーネントには
logo属性が必要 - 画像ファイルへのパスは必須です
あなたのタスク
MoonShine Blade コンポーネントを扱う際は、以下のようにしてください：
- ガイドラインを読む：
.guidelines/blade-components.mdを開いて熟読します - リクエストを理解する：ユーザーが何を作成したいのかを分析します
- 適切なコンポーネントを選ぶ：ガイドラインから適切な MoonShine コンポーネントを選択します
- パターンに従う：ガイドラインに示された正確な構造とラッパーを使用します
- ソリューションを実装する：適切な MoonShine コンポーネントを使った動作する Blade コードを作成します
重要な注意事項
- Blade ファイルは必ず
<x-moonshine::layout>で始めてください（<!DOCTYPE html>で始めてはいけません） - HTML／コンポーネントを含むテーブルの場合：配列ではなくスロットベースのテーブルを使用してください
- テーブル内のアクションボタンの場合：適切なクラスを付けて
<x-moonshine::layout.flex>でラップしてください - ナビゲーションコンポーネントの場合：正しいラッパー（
menu-logo、menu menu--verticalなど）を使用してください
ユーザーリクエスト
$ARGUMENTS
コメント
Markdown 対応