design-taste-frontend
デザインガードレールでプレミアムインターフェースを構築
AIコーディングアシスタントはデフォルトで汎用的で予測可能なインターフェースを生成します。このスキルは厳格なデザインルール、コンポーネントアーキテクチャ、パフォーマンス基準を適用し、プロフェッショナル品質のフロントエンドコードを生成します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「design-taste-frontend」を使用しています。 非対称レイアウトとプレミアムタイポグラフィを備えたヒーローセクションを作成
期待される結果:
Geistフォントのtext-6xl見出し、max-w-[65ch]のtext-gray-600パラグラフ、active scale-[0.98]フィードバックを備えたコールトゥアクションボタンを使用し、min-h-[100dvh]の左揃えヒーローセクション。右半分にはフェードグラデーションを備えたサブtleな背景画像を配置。
「design-taste-frontend」を使用しています。 5つのアニメーションカードを備えたbento-gridを構築
期待される結果:
5つのカードを備えたレスポンシブグリッド: layoutIdスワップを備えた自動ソートタスクリスト、タイプライターサイクリングを備えた検索バー、呼吸インジケーターを備えたライブステータスパネル、無限データカルーセル、スタッガーハイライトを備えたフォーカスモードドキュメントビュー。すべてのカードはFramer Motionのspring physicsを使用し、パフォーマンスのためにメモ化されています。
セキュリティ監査
安全All 161 static analysis findings were evaluated and determined to be false positives. The external_commands pattern (125 locations) is markdown inline code formatting, not shell execution. The blocker weak-crypto findings (16 locations) are misidentified hex color values in CSS. The system-reconnaissance findings (20 locations) are legitimate AI coding instructions for dependency verification. The single network finding is a placeholder image URL for UI mockups. The skill is a markdown instruction document for AI coding assistants with no executable code, no network calls, and no security risks.
品質スコア
作れるもの
プロフェッショナルなSaaSダッシュボード開発
フロントエンド開発者がこのスキルをClaude Codeと組み合わせて使用し、bento-gridレイアウト、適切なローディング状態、スムーズなレイアウトトランジションを備えた洗練されたSaaSダッシュボードを、手動のデザイン判断なしで生成します。
チーム間でのデザインシステムの一貫性
デザインエンジニアがこのスキルをチームと共有し、AI生成のすべてのコンポーネントが同じタイポグラフィスケール、カラーキャリブレーション、レスポンシブブレークポイントルールに従うようにします。
ハイクオリティなマーケティングランディングページ
ソロファウンダーがこのスキルをCodexと組み合わせて使用し、非対称ヒーローセクション、キネティックタイポグラフィ、スクロール駆動のアニメーションを制作し、汎用的なAI美学を回避します。
これらのプロンプトを試す
左寄せの見出し、説得力のあるパラグラフ、コールトゥアクションボタンを備えたSaaS製品のヒーローセクションを作成してください。このスキルのデザインベースラインを使用してください。
非対称の2列ジグザグレイアウトを使用してフィーチャーセクションを生成してください。テキストコンテンツと画像プレースホルダーを交互に配置してください。中央寄せバイアスの回避とflex-mathよりgrid優先のルールに従ってください。
永続的なマイクロインタラクションを備えた5カードのbento-gridを構築してください。各カードにはFramer Motionのspring physicsを使用した無限ループアニメーションが必要です。リストアイテムにはレイアウトトランジションとスタッガーオーケストレーションを含めてください。
内部ボーダーの屈折と色付きシャドウを備えたグラスモーフィズムパネルを作成してください。グレインフィルターは固定の疑似要素にのみ適用してください。すべてのアニメーションはハードウェアアクセラレーションのためtransformとopacityのみを使用するようにしてください。
ベストプラクティス
- 第三者ライブラリのインストールコマンドを提案する前に、必ずpackage.jsonを確認してください。
- モバイルでのレイアウトジャンプを防ぐため、全高セクションにはh-screenの代わりにmin-h-[100dvh]を使用してください。
- インタラクティブなコンポーネントはuse clientを先頭に配置したleafコンポーネントとして分離してください。サーバーコンポーネントは静的に保ってください。
- アニメーションはtransformとopacityプロパティのみを使用してください。top、left、width、heightをアニメーションさせないでください。
回避
- 紫色のグラデーションを備えた中央寄せヒーローセクションの使用。これは最も一般的なAIデザインの陳腐化です。
- CSS Gridの代わりにflexboxの計算を使用した複雑なパーセントベースレイアウトの構築。
- 永続的なアニメーションを親コンポーネント内に配置すること。これにより不要な再レンダリングが発生し、パフォーマンスが崩壊します。