majiayu000 Windows Formsスタイルガイド検証
このスキルは、既存のコンポーネントがWindows Forms風のデザインシステムに準拠しているかを検証します。
実行手順
検証対象の特定
src/components/ui/内の全.astroファイルをリストアップ- ユーザーに「全コンポーネントを検証しますか？特定のコンポーネントのみ検証しますか？」と質問
- 特定のコンポーネントの場合はコンポーネント名を確認
各コンポーネントのチェック項目
必須スタイル要素
- フォントファミリー:
'Segoe UI'が含まれているか - グラデーション背景:
linear-gradientが使用されているか - ボーダー:
borderプロパティが定義されているか
インタラクション状態
- ホバー状態:
:hover疑似クラスが実装されているか - アクティブ状態:
:active疑似クラスが実装されているか - 無効化状態:
:disabled疑似クラスが実装されているか（該当する場合） - フォーカス状態:
:focus疑似クラスが実装されているか（該当する場合）
TypeScript型定義
- Propsインターフェース: TypeScriptインターフェースで定義されているか
- JSDocコメント: Props各プロパティにJSDocコメントがあるか
- デフォルト値: 分割代入でデフォルト値が設定されているか
スロット
-
<slot>の使用: 子要素を受け取れるか（該当する場合）
- フォントファミリー:
レポート生成
- チェック結果をマークダウンテーブル形式で出力
- 各コンポーネントごとに合格/不合格項目を明記
- 改善提案を具体的に記述
出力フォーマット例
## スタイルガイド検証レポート
### Button.astro ✅
- ✅ Segoe UIフォント使用
- ✅ グラデーション背景あり
- ✅ ホバー・アクティブ・無効化状態実装済み
- ✅ Props型定義完備
### CustomComponent.astro ⚠️
- ✅ Segoe UIフォント使用
- ❌ グラデーション背景なし → 推奨: `background: linear-gradient(to bottom, #f0f0f0 0%, #e5e5e5 100%);`
- ⚠️ ホバー状態のみ実装 → アクティブ状態も追加推奨
- ✅ Props型定義完備
### 全体サマリー
- 検証コンポーネント数: 15
- 完全準拠: 12 (80%)
- 一部改善必要: 3 (20%)
- 改善の提案
- 不合格項目がある場合、具体的な修正コードを提案
- Button.astroなど、準拠しているコンポーネントを参考として提示
注意事項
- コンポーネントの種類によっては一部項目が該当しない場合がある（例：Labelにはアクティブ状態が不要）
- その場合は「N/A（該当なし）」として扱う
- デザインパターンの一貫性を最優先に評価する