---

name: validate-windows-forms-style description: 既存のAstroコンポーネントがWindows Forms風のデザインシステム（フォント、グラデーション、インタラクション状態など）に準拠しているかを検証し、レポートを生成します。 allowed-tools: "Read, Glob, Grep"

Windows Formsスタイルガイド検証

このスキルは、既存のコンポーネントがWindows Forms風のデザインシステムに準拠しているかを検証します。

実行手順

1. 検証対象の特定

   • src/components/ui/内の全.astroファイルをリストアップ
   • ユーザーに「全コンポーネントを検証しますか？特定のコンポーネントのみ検証しますか？」と質問
   • 特定のコンポーネントの場合はコンポーネント名を確認

2. 各コンポーネントのチェック項目

   必須スタイル要素

   • フォントファミリー: 'Segoe UI'が含まれているか
   • グラデーション背景: linear-gradientが使用されているか
   • ボーダー: borderプロパティが定義されているか

   インタラクション状態

   • ホバー状態: :hover疑似クラスが実装されているか
   • アクティブ状態: :active疑似クラスが実装されているか
   • 無効化状態: :disabled疑似クラスが実装されているか（該当する場合）
   • フォーカス状態: :focus疑似クラスが実装されているか（該当する場合）

   TypeScript型定義

   • Propsインターフェース: TypeScriptインターフェースで定義されているか
   • JSDocコメント: Props各プロパティにJSDocコメントがあるか
   • デフォルト値: 分割代入でデフォルト値が設定されているか

   スロット

   • <slot>の使用: 子要素を受け取れるか（該当する場合）

3. レポート生成

   • チェック結果をマークダウンテーブル形式で出力
   • 各コンポーネントごとに合格/不合格項目を明記
   • 改善提案を具体的に記述

4. 出力フォーマット例

Copy## スタイルガイド検証レポート

### Button.astro ✅
- ✅ Segoe UIフォント使用
- ✅ グラデーション背景あり
- ✅ ホバー・アクティブ・無効化状態実装済み
- ✅ Props型定義完備

### CustomComponent.astro ⚠️
- ✅ Segoe UIフォント使用
- ❌ グラデーション背景なし → 推奨: `background: linear-gradient(to bottom, #f0f0f0 0%, #e5e5e5 100%);`
- ⚠️ ホバー状態のみ実装 → アクティブ状態も追加推奨
- ✅ Props型定義完備

### 全体サマリー
- 検証コンポーネント数: 15
- 完全準拠: 12 (80%)
- 一部改善必要: 3 (20%)

1. 改善の提案
   • 不合格項目がある場合、具体的な修正コードを提案
   • Button.astroなど、準拠しているコンポーネントを参考として提示

注意事項

• コンポーネントの種類によっては一部項目が該当しない場合がある（例：Labelにはアクティブ状態が不要）
• その場合は「N/A（該当なし）」として扱う
• デザインパターンの一貫性を最優先に評価する