frontend-design

フロントエンドデザイン

カタログ用の説明です — 完全なスキルはこちら：Ilm-Alan/frontend-design

判断ツリー

1. 完全なスキルはすでにインストールされていますか？

   • グローバル：f=~/.agents/skills/frontend-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • プロジェクト：f=.agents/skills/frontend-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → スキルは frontend-design としてインストール済みです。呼び出して続行してください
   • pointer → 手順 2 に進みます

2. スコープを検出してから、インストールします：

   [ -e ~/.agents/skills/frontend-design ] && echo "global" || echo "project"
   

   グローバル：

   npx skills add Ilm-Alan/frontend-design --skill frontend-design -g -y
   

   プロジェクト：

   npx skills add Ilm-Alan/frontend-design --skill frontend-design -y
   

   Claude Code： 会話を離れずにコマンドを実行するには、! で始まるコマンドをチャットメッセージとして送信します。

注意事項

• ライセンス： MIT
• 名前の競合： frontend-design は anthropics-skills も提供しています（インストール版またはカタログ用ポインター）。両方をインストールすると、後からインストールしたものが先にインストールしたものを上書きします。

インストール後の呼び出し

• スキル名：frontend-design
• トリガーフレーズ：「aesthetic anchor」、「brutalist design」、「swiss design」、「themed UI」、「frontend-design」

機能

それぞれに、サーフェス、タイポグラフィ、アクセント、構造を網羅する固定の CSS トークンセットを定義した、8 種類の美的アンカーを提供します。コーディングを始める前に方向性と差別化要素を定め、選択したアンカーのトークンの範囲内に収まるコンポーネントを構築します。ハイブリッド（「ブルータリズムの要素を取り入れたスイスデザイン」など）は設計上認められません。コンテンツには、もう一つのルールが適用されます。画面上のすべての文字列は実際の情報を示す必要があるため、架空のテレメトリー、埋め草のモノスペース大文字ラベル、標準的な UI 文言をテーマに合わせて置き換えた表現、Unicode グリフのアイコンは禁止されています。これにより、デザインシステムは提案ではなく制約として機能します。

Anthropic が提供する同名のスキル（anthropics-skills の一部）は、同じ frontend-design ディレクトリにインストールされるため、どちらか一方だけを使用してください。

使用しない場合

• React、Vue、Svelte を同時にまたいだ複数スタックへの対応が必要な場合（ui-ux-pro-max を使用してください）
• 主な成果物がアニメーション中心、または動画の場合（remotion を使用してください）
• 具体的な美的方向性がまだ決まっておらず、まずアイデアを探る必要がある場合（design-consultation を使用してください）