Menu
独創的で本格的なフロントエンドインターフェースを高いデザイン品質で作成します。ユーザーがWebコンポーネント、ページ、アーティファクト、ポスター、またはアプリケーション（ウェブサイト、ランディングページ、ダッシュボード、Reactコンポーネント、HTML/CSSレイアウト、またはWeb UIのスタイリング/美化など）の構築を求めるときにこのスキルを使用します。一般的なAI美学を避け、創造的で洗練されたコードとUIデザインを生成します。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
DeFi legos and protocol composability on Ethereum and L2s. Major protocols per chain — Aerodrome on Base, GMX/Pendle on Arbitrum, Velodrome on Optimism — plus mainnet primitives (Uniswap, Aave, Compound, Curve). How they work, how to build on them, and how to combine them. Use when building DeFi integrations, choosing protocols on a specific L2, designing yield strategies, or composing existing protocols into something new.
The complete build-to-production pipeline for Ethereum dApps. Fork mode setup, IPFS deployment, Vercel config, ENS subdomain setup, and the full production checklist. Built around Scaffold-ETH 2 but applicable to any Ethereum frontend project. Use when deploying any dApp to production.
Frontend UX rules for Ethereum dApps that prevent the most common AI agent UI bugs. Mandatory patterns for onchain buttons, token approval flows, address display, USD values, RPC configuration, and pre-publish metadata. Built around Scaffold-ETH 2 but the patterns apply to any Ethereum frontend. Use when building any dApp frontend.
Design, implement, and test retail-FX-style trading features (leverage/margin positions, stop-loss/take-profit/OCO conditional orders, candlestick charting with technical indicators, swap points/carry) on top of Sera Protocol's spot CLOB DEX. Sera's deployed contracts (v1 Router/OrderBook/PriceBook and v2 Sera/Vault/SOR) are spot-only — no margin, no leverage, no conditional orders, no native charting — so use this skill whenever the user wants to add any of that. Trigger on: leverage, margin trading, margin call, loss-cut/ロスカット, 証拠金, レバレッジ, スワップポイント/swap point, pip/pips, spread cost, stop-loss, take-profit, OCO order, trailing stop, 逆指値/指値/成行注文, candlestick/ローソク足 chart, trend line/トレンドライン, moving average, PnL calculation for FX positions, liquidation engine, funding rate for synthetic FX, or building any 'FXアプリ'/'FXプロダクト'/forex trading product feature. Also use when reviewing whether FX terminology, margin math, or order-trigger logic in code is correct, or when designing test/backtesting strategies for FX p
Manages custom Agent resources on Gemini Enterprise Agent Platform. Use when the user wants to programmatically create, configure, list, update, or delete stateful, server-managed Agent resources (including mounting files, skills, and tools) before executing conversations.
Fetches raw IAM recommendations and associated security insights from Google Cloud for a specified target scope (Organization, Folder, or Project). Use when you need to retrieve security recommendations before analyzing or applying them. Don't use for applying/acting on recommendations (use the recommendation applier skill) or for general allow policy querying (use the allow policy viewer skill).
| name | frontend-design |
| description | 独創的で本格的なフロントエンドインターフェースを高いデザイン品質で作成します。ユーザーがWebコンポーネント、ページ、アーティファクト、ポスター、またはアプリケーション（ウェブサイト、ランディングページ、ダッシュボード、Reactコンポーネント、HTML/CSSレイアウト、またはWeb UIのスタイリング/美化など）の構築を求めるときにこのスキルを使用します。一般的なAI美学を避け、創造的で洗練されたコードとUIデザインを生成します。 |
| license | 完全な利用規約はLICENSE.txtを参照 |
このスキルは、一般的な「AI生成っぽい」美学を避けた、独創的で本格的なフロントエンドインターフェースの作成を支援します。優れた美的細部と創造的な選択に格別の注意を払いながら、実際に動作するコードを実装します。
ユーザーはフロントエンド要件を提供します：構築するコンポーネント、ページ、アプリケーション、またはインターフェース。目的、対象者、または技術的制約に関するコンテキストを含めることもあります。
コーディングの前に、コンテキストを理解し、大胆な美的方向性を決定します：
重要: 明確なコンセプト方向を選択し、精度を持って実行します。大胆なマキシマリズムと洗練されたミニマリズムはどちらも機能します - 鍵は強度ではなく、意図性です。
次に、以下のような動作するコード（HTML/CSS/JS、React、Vueなど）を実装します：
以下に焦点を当てます：
一般的なAI生成美学を使用しないでください：使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、陳腐な配色（特に白背景の紫のグラデーション）、予測可能なレイアウトとコンポーネントパターン、コンテキスト固有の個性を欠いた型にはまったデザイン。
創造的に解釈し、コンテキストに対して真に設計されたと感じられる予想外の選択をします。同じデザインであってはなりません。明るいテーマと暗いテーマ、異なるフォント、異なる美学の間で変化させます。世代を超えて共通の選択（例えばSpace Groteskなど）に収束しないでください。
重要: 実装の複雑さを美的ビジョンに合わせます。マキシマリストデザインには、広範なアニメーションとエフェクトを伴う精巧なコードが必要です。ミニマリストまたは洗練されたデザインには、抑制、精度、スペーシング、タイポグラフィ、微妙なディテールへの注意深い配慮が必要です。エレガンスはビジョンをうまく実行することから生まれます。
覚えておいてください：Codexは並外れた創造的な仕事をする能力があります。遠慮せず、枠にとらわれずに考え、独特なビジョンに完全にコミットしたときに真に創造できるものを示してください。
