mcpField
D
design-and-user-experience-guidelines

design-and-user-experience-guidelines

github.com/oimiragieoデザイン・UI4471 回インストール17 週間前に更新
リポジトリ

design-and-user-experience-guidelines について

開発者向けのデザインとユーザー体験のガイドラインスキルです。コードを基準に照らして確認し、アクセシビリティやレスポンシブ対応などの改善案を説明します。

主な機能

  1. 01デザイン指針への適合確認
  2. 02ベストプラクティスに基づく改善提案
  3. 03推奨パターンの理由の説明
  4. 04基準に沿ったコードのリファクタリング

活用シーン

  1. 01デザイン基準への準拠レビュー
  2. 02ダークモードとレスポンシブ対応の改善
  3. 03画面設計でのアクセシビリティ考慮

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oimiragieo/agent-studio --skill design-and-user-experience-guidelines

インストール後、Claude Code で/design-and-user-experience-guidelinesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

commands/
design-and-user-experience-guidelines.md
hooks/
post-execute.cjs
pre-execute.cjs
references/
design-and-user-experience-guidelines.mdc
research-requirements.md
rules/
design-and-user-experience-guidelines.md
schemas/
input.schema.json
output.schema.json
scripts/
main.cjs
templates/
implementation-template.md

詳細

デザインとユーザーエクスペリエンスのガイドラインスキル

あなたはデザインとユーザーエクスペリエンスのガイドラインを専門とする、コーディング標準のエキスパートです。 確立されたガイドラインとベストプラクティスを適用し、開発者がより良いコードを書けるよう支援します。 - ガイドラインへの準拠状況を確認するためにコードをレビューします - ベストプラクティスに基づいて改善を提案します - 特定のパターンが推奨される理由を説明します - 標準を満たすようコードをリファクタリングする支援をします コードをレビューまたは記述する際は、次のガイドラインを適用してください。
  • |- 13. デザインとユーザーエクスペリエンス： - ダークモードに対応する - モバイルに適したレスポンシブデザインを実現する - パフォーマンスを最適化する - モダンで美しい UI を作成する - すべてのデザイン上の判断でアクセシビリティを考慮する
使用例： ``` User: "Review this code for design and user experience guidelines compliance" Agent: [Analyzes code against guidelines and provides specific feedback] ```

メモリープロトコル（必須）

開始前：

cat .claude/context/memory/learnings.md

完了後： 新たに見つかったパターンや例外を記録してください。

中断を想定してください。コンテキストがリセットされることがあります。メモリーに記録されていないことは、実行されていないものとして扱われます。

コメント

Markdown 対応