デザインシステムの設定

このプロジェクトのコンポーネントとパッケージから`<your-design-system-name>`デザインシステムスキルを作成してください。

以下に示すファイル構造を使用します。ルートに`SKILL.md`、ガイドとコンポーネントドキュメントのための`references/`ディレクトリ、機能に必要なすべての依存関係を含む`packages/`ディレクトリ。

プロジェクト内のすべてのコンポーネントを確認し、`references/components/`以下のそれぞれのファイルに、プロパティ、バリアント、使用例を含めてドキュメント化してください。

`SKILL.md`をガイドとコンポーネント参照ファイルへのリンクを含むインデックスとしてフォーマットし、以下の例に従って「一般的なガイダンス」セクションと「コンポーネント」セクションを含めてください。

ファイル構造：

.agents/skills/your-design-system/
├── SKILL.md
├── references/
│   ├── guides/
│   │   ├── setup.md
│   │   ├── guardrails.md
│   │   ├── layout-and-spacing.md
│   │   └── ...
│   └── components/
│       ├── component-index.md
│       ├── button.md
│       ├── checkbox.md
│       └── ...
└── packages/
    └── (Tarファイルまたはコードコンポーネント)

`SKILL.md`ファイルはガイドとコンポーネント参照の別のMarkdownファイルへのリンクを含むインデックスとして機能します。各リンクされたファイルは1つのトピックを詳細にカバーします。生成された`SKILL.md`の例を以下に示します：

```markdown
---
name: your-design-system
description: UIを構築または変更する際に使用します。デザインシステムのコンポーネントAPIリファレンス、レイアウトガイダンス、ビジュアルスタイルルールを提供します。
---

# Your Design System

## 一般的なガイダンス

- [セットアップ](references/guides/setup.md) — インストール、プロジェクト設定、プロバイダーのセットアップ
- [ガードレール](references/guides/guardrails.md) — 破ってはいけないハードルール（禁止パターン、必須トークン、アクセシビリティの最小要件）
- [レイアウトとスペーシング](references/guides/layout-and-spacing.md) — グリッドシステム、スペーシングスケール、レスポンシブブレークポイント、ページテンプレート
- ...

## コンポーネント

- [コンポーネントインデックス](references/components/component-index.md) — ステータスとカテゴリを含む利用可能なコンポーネントの全リスト

個々のコンポーネント参照（プロパティ、バリアント、例）：

- [ボタン](references/components/button.md)
- [チェックボックス](references/components/checkbox.md)
- ...
```

ガイドファイルはそれぞれ1つのトピックをカバーします。セットアップとインストールの手順、ベストプラクティスとルール、トークン値の参照テーブル、正しい使用法を示す短いコード例。

コンポーネントファイルはそれぞれ1つのコンポーネントをドキュメント化します。コンポーネント名、簡単な説明、プロパティテーブル、使用例、ガイドラインまたは制約を含みます。これらのファイルが完全であるほど、Agentの出力が向上します。

# デザインシステム

`.agents/skills/your-design-system/`のデザインシステムスキルを読み込んで従ってください。
UIを構築または変更する際は常にデザインシステムを適用してください。