AgentSkillsCN

validate-windows-forms-style

验证现有 Astro 组件是否符合 Windows Forms 风格的设计系统（字体、渐变、交互状态等），并生成报告。

SKILL.md
--- frontmatter
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. •

    出力フォーマット例

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

### 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（該当なし）」として扱う
  • •デザインパターンの一貫性を最優先に評価する