ai-engineer-teams: Skill for Kiro

汎用的な「AIスロップ」美学を避け、独自性のある本番品質のフロントエンドインターフェースを作成するためのスキル。美的ディテールとクリエイティブな選択に細心の注意を払い、実際に動作するコードを実装する。

ユーザーはフロントエンド要件を提供する: コンポーネント、ページ、アプリケーション、またはインターフェース。目的、対象者、技術的制約に関するコンテキストを含む場合がある。

デザイン思考

コーディング前に、コンテキストを理解し大胆な美的方向性にコミットする:

• 目的: このインターフェースはどんな問題を解決するか？誰が使うか？
• トーン: 極端なものを選ぶ: ブルータルミニマル、マキシマリストカオス、レトロフューチャリスティック、オーガニック/ナチュラル、ラグジュアリー/洗練、プレイフル/トイライク、エディトリアル/マガジン、ブルータリスト/ロー、アールデコ/ジオメトリック、ソフト/パステル、インダストリアル/ユーティリタリアン等。インスピレーションとして使いつつ、美的方向性に忠実なデザインを。
• 制約: 技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化: 何がこれを忘れられないものにするか？誰かが覚えている1つのことは？

重要: 明確なコンセプト方向を選び、精密に実行する。大胆なマキシマリズムも洗練されたミニマリズムも有効 — 鍵は意図性であり、強度ではない。

実装するコード（HTML/CSS/JS, React, Vue等）は:

• 本番品質で機能的
• 視覚的に印象的で記憶に残る
• 明確な美的視点で一貫性がある
• あらゆるディテールが丁寧に磨かれている

フロントエンド美学ガイドライン

注力ポイント:

• タイポグラフィ: 美しく、ユニークで、興味深いフォントを選ぶ。ArialやInterのような汎用フォントを避け、フロントエンドの美学を高める独自の選択を。予想外で個性的なフォント選択。特徴的なディスプレイフォントと洗練されたボディフォントを組み合わせる。
• カラー＆テーマ: 一貫した美学にコミット。一貫性のためにCSS変数を使用。シャープなアクセントを持つドミナントカラーは、控えめで均等に分散されたパレットより効果的。
• モーション: エフェクトとマイクロインタラクションにアニメーションを使用。HTMLにはCSSのみのソリューションを優先。Reactでは利用可能な場合Motionライブラリを使用。高インパクトな瞬間に注力: スタガードリビール（animation-delay）を伴う1つの良く構成されたページロードは、散在するマイクロインタラクションより喜びを生む。驚きのあるスクロールトリガーとホバー状態を使用。
• 空間構成: 予想外のレイアウト。非対称。オーバーラップ。対角線フロー。グリッドを破る要素。寛大なネガティブスペース、または制御された密度。
• 背景＆ビジュアルディテール: ソリッドカラーをデフォルトにせず、雰囲気と奥行きを作る。全体の美学に合うコンテキスト効果とテクスチャを追加。グラデーションメッシュ、ノイズテクスチャ、ジオメトリックパターン、レイヤード透明度、ドラマチックシャドウ、装飾ボーダー、カスタムカーソル、グレインオーバーレイなどのクリエイティブな形式を適用。

使い古されたフォントファミリー（Inter, Roboto, Arial, システムフォント）、陳腐なカラースキーム（特に白背景の紫グラデーション）、予測可能なレイアウトとコンポーネントパターン、コンテキスト固有の個性を欠くクッキーカッターデザインなどの汎用AI生成美学は絶対に使わない。

クリエイティブに解釈し、コンテキストに合った本物のデザインに感じられる予想外の選択をする。同じデザインは2つとない。ライト/ダークテーマ、異なるフォント、異なる美学を変化させる。世代を超えて共通の選択（例: Space Grotesk）に収束しない。

重要: 実装の複雑さを美的ビジョンに合わせる。マキシマリストデザインには精巧なコードと豊富なアニメーション・エフェクトが必要。ミニマリストや洗練されたデザインには抑制、精密さ、スペーシング・タイポグラフィ・微妙なディテールへの注意が必要。エレガンスはビジョンを良く実行することから生まれる。