メニュー
高い設計品質を持つ、個性的でプロダクショングレードのフロントエンドインタフェースを作成します。ユーザーが web コンポーネント、ページ、またはアプリケーションの構築を要求し、視覚的な方向性がコード品質と同じくらい重要な場合に使用します。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/linnefromice/claude-code-workspace --skill frontend-designコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
キャプチャ、診断、抑制されたリカバリ、内省レポートを用いた、AI エージェント障害向けの体系的なセルフデバッグワークフローです。
リポジトリ認識の並列レビューパスを使用してスキル、コマンド、ルール、フック、その他を DAILY と LIBRARY のバケットに分類することで、特定のリポジトリ向けにエビデンスに基づく ECC インストールプランを構築します。フルバンドルをロードするのではなく、プロジェクトが実際に必要とするものに ECC をトリミングすべき場合に使用します。
対象リポジトリの既存の統合パターンに正確に合わせて新しい API コネクタやプロバイダを構築します。第二のアーキテクチャを発明することなく、もう一つの統合を追加する場合に使用します。
SKILL.md を表示中
SOC 職業分類に基づく
| name | frontend-design |
| description | 高い設計品質を持つ、個性的でプロダクショングレードのフロントエンドインタフェースを作成します。ユーザーが web コンポーネント、ページ、またはアプリケーションの構築を要求し、視覚的な方向性がコード品質と同じくらい重要な場合に使用します。 |
| origin | ECC |
タスクが単に「動作させる」ではなく「デザインされたように見せる」ことである場合に使用します。
このスキルは、汎用的な AI っぽい UI ではなく、明確な視点を必要とするプロダクトページ、ダッシュボード、アプリシェル、コンポーネント、または視覚システム向けです。
方向性を選んでコミットします。
安全で平均的な UI は、強く、首尾一貫した美学といくつかの大胆な選択を持つ UI よりも通常悪いものです。
コーディング前に以下を確定:
可能な方向性:
方向性をカジュアルに混ぜないでください。1 つを選んでクリーンに実行します。
以下を定義:
CSS 変数またはプロジェクトのトークンシステムを使用して、インタフェースが成長しても首尾一貫した状態を保ちます。
優先:
明らかに適切でない限り、対称的なカードグリッドへのデフォルトを避けます。
アニメーションを以下に使用:
汎用的なマイクロインタラクションをあちこちに散りばめないでください。1 つのよく演出されたロードシーケンスは、通常 20 のランダムなホバーエフェクトより強いです。
雰囲気を使用:
プロダクト向けページではフラットな空の背景がベストアンサーであることはまれです。
以下にデフォルトしない:
納品前に:
