dembrandt-skills

# dembrandt-skills このリポジトリは、Claude Code、Cursor、Codex、GitHub Copilot などの AI エージェントが使用するために設計された、シニアレベルの UX およびデザインシステムの知識をエンコードした「スキル」のセットを提供します。スキルは Open Agent Skills 形式で記述されており、プロンプトがそれを必要とするときに自動的に読み込まれます。 ## クイックスタート すべてのスキルをインストールするには: ```bash npx skills add dembrandt/dembrandt-skills --all ``` スキルはオンデマンドで読み込まれるため、すべてをインストールしてもパフォーマンスコストはありません。すべてのプロジェクトにインストールするには `--global` を使用してください。 ## 使用方法 自然言語で質問すると、一致するスキルが読み込まれます。たとえば、「この画面をレビューして」と尋ねると `dembrandt` スキルがトリガーされ、完全な UX レビューパイプラインが実行されます。 ## スキルの概要 リポジトリには、いくつかのカテゴリに整理されたスキルが含まれています: - **ブランドとビジュアルアイデンティティ**: シェイプ言語、アイコンスタイル、タイポグラフィのトーン、カラーモード、ブランドカラーからカラーパレットを導出する方法を扱います。 - **デザイントークンとスケール**: モジュラータイプスケール、エレベーションと奥行き、サーフェス分離、ボタンの状態、コンポーネントファミリーの一貫性、サイジング単位を含みます。 - **レイアウトと構造**: レイアウトパラダイム、ゲシュタルト原則、視覚的強調、情報アーキテクチャ、レスポンシブデザイン、UI 密度、スティッキー要素、スクロール領域を扱います。 - **コンポーネントとインタラクション**: 実世界のメタファー、フォームデザイン、タブナビゲーション、モーダルパターン、データ表示、繰り返しコンポーネントの整列、エキスパートツール UI、連携するデータビュー、アプリシェル、グローバルツールバーコントロール、通知、ステータスカラーを含みます。 - **UX 原則**: Nielsen のユーザビリティヒューリスティクス、WCAG アクセシビリティ、ユーザーフロー、真正な製品表現、マイクロインタラクション、ローディング状態、モーションデザインを扱います。 - **技術的基盤**: セマンティック HTML、SEO、パフォーマンス、Web Vitals を含みます。 - **パイプラインとオーケストレーション**: ライブウェブサイトからデザイントークンを抽出するスキル、ウェブサイトをクローンするスキル、ブランドガイドラインから UI を生成するスキル、完全な 6 段階の UX オーケストレーターを含みます。 ## エンジン リポジトリは [Dembrandt](https://github.com/dembrandt/dembrandt) エンジンを参照しており、これはライブウェブサイトをデザイントークンに変換し、CI でそれらを強制します。2 つのスキル(`extract-design` と `generate-ui-from-brand`)はこのエンジンを必要とし、エージェントの MCP 設定に追加できます。 ## コントリビューション スキルへの変更にはプルリクエストが必要です。プルリクエストを開く前に `npm test` を実行してください。CI はフロントマター、クロスリンク、マニフェストを検証します。 ## ライセンス MIT