frontend-design-direction（フロントエンドのデザイン方向性）

このSkillでできること

✓UIの目的・対象ユーザー・トーンに基づくデザイン方向性の整理
✓色、タイポグラフィ、余白、レイアウト、モーションの改善
✓空、読み込み、エラー、成功、無効状態などのUI状態の追加
✓レスポンシブ対応、キーボード操作、視認性、タッチ操作への配慮

使い方

STEP 1

対象のUIが支援する主な作業と利用者を整理する

STEP 2

トーン、印象に残る視覚要素、ツールや画面サイズなどの制約を決める

STEP 3

既存の部品、色、タイポグラフィ、アイコン、ページ構成を活用する

STEP 4

現在の挙動や設計システムを尊重し、必要な部分から段階的に改善する

Skillのインストール

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/agenticluke/frontend-design-director-plus

手動でインストールする

README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。

mkdir -p ~/.claude/skills/frontend-design-direction && curl -fsSL https://raw.githubusercontent.com/YOUR_GITHUB_NAME/frontend-design-director-plus/main/skill/SKILL.md -o ~/.claude/skills/frontend-design-direction/SKILL.md

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

frontend-design-directionスキルを使って、この課題管理画面のUIを改善してください。既存の挙動とデザインシステムを維持し、使いやすさと一貫性を重視してください。

出力例を見る

目的と利用者に合う視覚方針を定め、既存のUI部品やデザイントークンを活用しながら、状態表示、レスポンシブ対応、キーボード操作性を改善する。

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信明確な記述なし

Shellコマンド実行明確な記述なし

ファイル読み取り明確な記述なし

ファイル書き込み明確な記述なし

ネットワークアクセス明確な記述なし

認証情報明確な記述なし

frontend-design-direction

このSkillでできること

使い方

Skillのインストール

AIにこのSkillを追加してもらう

このSkillを使うプロンプト例

安全性チェック

関連Skill

agy-prompting

game-jam-theme-generator

pah-link-aap