Menu
高い設計品質を持つ、個性的でプロダクショングレードのフロントエンドインタフェースを作成します。ユーザーが web コンポーネント、ページ、またはアプリケーションの構築を要求し、視覚的な方向性がコード品質と同じくらい重要な場合に使用します。
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
キャプチャ、診断、抑制されたリカバリ、内省レポートを用いた、AI エージェント障害向けの体系的なセルフデバッグワークフローです。
リポジトリ認識の並列レビューパスを使用してスキル、コマンド、ルール、フック、その他を DAILY と LIBRARY のバケットに分類することで、特定のリポジトリ向けにエビデンスに基づく ECC インストールプランを構築します。フルバンドルをロードするのではなく、プロジェクトが実際に必要とするものに ECC をトリミングすべき場合に使用します。
対象リポジトリの既存の統合パターンに正確に合わせて新しい API コネクタやプロバイダを構築します。第二のアーキテクチャを発明することなく、もう一つの統合を追加する場合に使用します。
Write articles, guides, blog posts, tutorials, newsletter issues, and other long-form content in a distinctive voice derived from supplied examples or brand guidance. Use when the user wants polished written content longer than a paragraph, especially when voice consistency, structure, and credibility matter.
ECC 向けのエビデンスファーストな自動化インベントリと重複監査のワークフローです。何かを修正する前に、どのジョブ、フック、コネクタ、MCP サーバー、またはラッパーがライブ、壊れている、冗長、または欠落しているかをユーザーが知りたい場合に使用します。
CodeTour の `.tour` ファイルを作成します。実際のファイルと行のアンカーを持つペルソナ対象のステップバイステップウォークスルーです。オンボーディングツアー、アーキテクチャウォークスルー、PR ツアー、RCA ツアー、および構造化された「これがどのように動作するか説明して」というリクエストに使用します。
| name | frontend-design |
| description | 高い設計品質を持つ、個性的でプロダクショングレードのフロントエンドインタフェースを作成します。ユーザーが web コンポーネント、ページ、またはアプリケーションの構築を要求し、視覚的な方向性がコード品質と同じくらい重要な場合に使用します。 |
| origin | ECC |
タスクが単に「動作させる」ではなく「デザインされたように見せる」ことである場合に使用します。
このスキルは、汎用的な AI っぽい UI ではなく、明確な視点を必要とするプロダクトページ、ダッシュボード、アプリシェル、コンポーネント、または視覚システム向けです。
方向性を選んでコミットします。
安全で平均的な UI は、強く、首尾一貫した美学といくつかの大胆な選択を持つ UI よりも通常悪いものです。
コーディング前に以下を確定:
可能な方向性:
方向性をカジュアルに混ぜないでください。1 つを選んでクリーンに実行します。
以下を定義:
CSS 変数またはプロジェクトのトークンシステムを使用して、インタフェースが成長しても首尾一貫した状態を保ちます。
優先:
明らかに適切でない限り、対称的なカードグリッドへのデフォルトを避けます。
アニメーションを以下に使用:
汎用的なマイクロインタラクションをあちこちに散りばめないでください。1 つのよく演出されたロードシーケンスは、通常 20 のランダムなホバーエフェクトより強いです。
雰囲気を使用:
プロダクト向けページではフラットな空の背景がベストアンサーであることはまれです。
以下にデフォルトしない:
納品前に:
