mcpField
F
frontend-prime

frontend-prime

github.com/esramulkpinarデザイン・UI32173 回インストール37 週間前に更新
リポジトリ

frontend-prime について

frontend-primeは、Webインターフェースを構築するエージェント向けのフロントエンドデザインスキルです。ビジュアルの方向性に加え、アクセシビリティ、レスポンシブ対応、パフォーマンス、SEO、安全性の確認を扱います。

主な機能

  1. 01実装前にビジュアルの方向性を決定
  2. 02AI生成風の一般的なデザインを回避
  3. 03意味のあるCSSカラー変数を使用
  4. 04SEOとページメタデータを確認
  5. 05モーション、モバイル、アクセシビリティ、性能を網羅

活用シーン

  1. 01ページ実装前にビジュアルスタイルを計画
  2. 02フロントエンドのアクセシビリティとレスポンシブ対応を確認
  3. 03Next.jsページのメタデータとSEOを確認
  4. 04フォーム、エラー処理、安全性を点検

インストール

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

$npx skills add https://github.com/esramulkpinar/prime-frontend-skills --skill frontend-prime

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

詳細

究極のフロントエンドスキル

すべての出力は意図的に作り込まれていると感じられるものでなければなりません — 決して汎用的であってはならず、決して「AI スロップ」であってはなりません。

1. コードを書く前に設計する

コードを書く前に、次のことを決めます:

  1. 美的方向性(1 つだけ選び、製品のオーディエンスに合わせます): 徹底的ミニマル · マキシマリスト・エディトリアル · レトロフューチャー · オーガニック/ナチュラル · ラグジュアリー/洗練 · 遊び心 · ブルータリスト · アールデコ · ダーク/ムーディー · ローファイ/ジン · ハンドクラフト · スイス/インターナショナル · ネオグラスモーフィズム · インダストリアル · ソフト/パステル

  2. 忘れられない要素を 1 つ: スクロールアニメーション、大胆なタイポグラフィの見せ場、マイクロインタラクション — 記憶に残る何か。

  3. **そして徹底的にやり切ります。**中途半端なデザイン = 汎用的な出力です。

2. AI スロップ・ブラックリスト

これらは出力が AI 生成であることを即座に示す印です。決してしないこと:

  • 白いカード上の紫/青のグラデーション
  • すべての要素に同一の rounded-xl
  • 視覚的な緊張感のない、完璧に中央揃えされた対称的なレイアウト
  • すべてに text-gray-600
  • 同一の高さの完璧な 3 カラムグリッドに並んだカード
  • 虹色、または均等に分配された配色
  • ストックイラストのプレースホルダーを使った汎用的なヒーロー

代わりに、常にすること:

  • 個性的な Google Fonts を読み込む(Instrument Serif、DM Sans、Clash Display、Bricolage Grotesque、Syne、Fraunces、Cabinet Grotesk、Satoshi、Young Serif、Outfit)
  • 作業の 80% を担う 1 つの支配的な色 + 1 つの鋭いアクセント
  • 非対称レイアウト、グリッドを破る要素、劇的なスケールのジャンプ
  • グラデーションメッシュ、ノイズテクスチャ、グラスモーフィズム、または奥行きのレイヤーによる雰囲気
  • デザイン要素としてのゆとりあるネガティブスペース
  • 大きな見出しのネガティブな letter-spacing、見出しへの text-wrap: balance
  • 本文テキストに max-width: 65ch、line-height: 1.5〜1.7

3. カラー & テーマ — 正しく行う

色は意味のある名前を持つ CSS カスタムプロパティとして定義します。コンポーネント内に hex をハードコードしないでください。

[data-theme="light"] {
  --bg-primary: #fafafa; --bg-secondary: #ffffff;
  --text-primary: #18181b; --text-secondary: #52525b;
  --accent: #2563eb; --border: #e4e4e7;
}
[data-theme="dark"] {
  --bg-primary: #09090b; --bg-secondary: #18181b;
  --text-primary: #fafafa; --text-secondary: #a1a1aa;
  --accent: #3b82f6; --border: #27272a;
}

ダークモードのルール: 高い elevation = 明るいサーフェス、アクセントを約 15% 減彩、階層には影ではなくボーダーを使用、ライト/ダーク/システムの切り替えを提供、localStorage に永続化しペイント前に適用します。

4. SEO — Claude はこれを忘れます

すべてのページに必要なもの:

<title>Page Title — Brand</title>
<meta name="description" content="150-160 chars">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title/description/image/url" ...>
<meta name="twitter:card" content="summary_large_image">

さらに: JSON-LD 構造化データ、sitemap.ts + robots.ts、1 ページに 1 つの h1、見出しレベルのスキップなし、説明的な alt テキスト、クリーンな小文字ハイフン区切りの URL、i18n 用の hreflang。

Next.js では: metadataBase、openGraph、twitter、alternates.canonical を備えた metadata エクスポートを使用します。

5. 簡単なリマインダー

  • モーション: 入場をスタガーさせる、すべてのインタラクティブ要素にホバー状態、0.2s ease のマイクロインタラクション、常に prefers-reduced-motion を尊重する
  • モバイル: モバイルファースト、流動的なタイポグラフィ/スペーシングに clamp()、vh ではなく dvh、44×44px のタッチターゲット
  • A11y: セマンティック HTML、アクションには <button> / リンクには <a>、アイコンボタンに aria-label、4.5:1 のコントラスト、完全なキーボードナビゲーション
  • パフォーマンス: font-display: swap、寸法を指定した画像の遅延読み込み、content-visibility: auto、LCP<2.5s
  • フォーム: 常に表示されるラベル、blur 時の検証、役立つエラーメッセージ、正しい input type + autocomplete
  • エラー: セクションごとのエラーバウンダリ、カスタム 404/500、フィードバック用のトースト(成功は自動で閉じ、エラーは残す)
  • セキュリティ: CSP ヘッダー、サニタイズされていない dangerouslySetInnerHTML は決して使わない、href 内の URL を検証、認証には httpOnly クッキー、サーバー側検証

コメント

Markdown 対応