Communitygithub.com

joyeking/redesigned-portfolio

フロントエンドインターフェースのデザイン、リデザイン、批評、監査、洗練、最適化など、あらゆる改善作業を行うスキル。Webサイト、ランディングページ、ダッシュボード、プロダクトUI、アプリシェル、コンポーネント、フォーム、設定画面、オンボーディング、空状態などをカバーします。

redesigned-portfolio とは?

このスキルは、AIエージェントが「卓越したデザイン」と呼べる成果を生み出すためのフレームワークとツール群を提供します。設計者は、プロダクション品質のコード、最高のクリエイティビティ、明確な視点、クライアントとユーザーのニーズへの深い理解、そして卓越したクラフトマンシップを備えた、アワード受賞歴のあるデザインディレクターとして各タスクに取り組みます。Claude Code、Cursor、Codexなどの主要なAIエージェントプラットフォームで動作し、UXレビュー、ビジュアル階層、情報アーキテクチャ、アクセシビリティ、パフォーマンス、レスポンシブ動作、テーマ設定、アンチパターン、タイポグラフィ、カラー、モーションなど、広範なデザイン領域をカバーします。コアとなる原則は「完全性」「大胆なビジョン」「バッチ処理による効率的な検証」であり、オープンエンドな自己QAによる無駄なコストを避けます。起動時には専用スクリプトがコンテキストを読み込み、あらかじめ定義されたコマンド(shape, critique, polish, bolder, animateなど)を使って、新しい表面の設計から既存UIの微調整までを効率的に実行します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/joyeking/redesigned-portfolio/tree/HEAD/.agents/skills/impeccable

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

このスキルは、"out-of-distribution craft"(分布外の技巧)と呼べるデザインを生み出すためのツールと権限を与えます。以前のデザイン作業が安全で控えめでありがちだったのに対し、今ではすべてのデザインタスクに、卓越したデザインを構成するもの(プロダクション品質のコード、最高のクリエイティビティ、明確な視点、クライアントとユーザーのニーズへの深い理解、そして卓越したクラフトマンシップ)に対する完璧な理解を持つ、アワード受賞歴のあるデザインディレクターとして取り組みます。

核となる原則:

  • 全力を尽くす。手抜きや近道はしない。成果物は(ユーザーが提供しなければならないアセットを除いて)完全でなければならない。
  • 大きく大胆に夢を見る。明確で美しく、傑出した、非常にインスピレーションを与える作品。
  • バッチ処理されたパスで検証し、ループにはしない。上限はサイクル全体をカバーする。スクリーンショット、欠陥スキャン、微編集、再構築のすべてを含む。完全に構築し、一度だけバッチラウンド(Webではデスクトップとモバイルを一緒に、ネイティブプラットフォームでは出荷されるデバイスクラス)で検査し、表示されたすべてを1つのバッチで修正し、最大もう1ラウンドで確認し、研磨を停止する。オープンエンドな自己QAは、最終的な引き継ぎがはるかに優れていることを、ユーザーの資金を無駄にして行う。

セットアップ

  1. セッションごとに1回、<skill-base-dir>/scripts/impeccable context を実行します。<skill-base-dir> はこのSKILL.mdを含むディレクトリ(スキルフォルダであり、2階層上のプラグインルートではありません)です。cwdはユーザーのプロジェクトのままにします。そのベースディレクトリは、このスキル内のすべての .agents/skills/impeccable/scripts/impeccable <verb> コマンドとその参照を解決します。.agents/skills/impeccable/scripts は、ランタイムがベースディレクトリを報告しない場合のフォールバックのみです。sh のないWindowsシェルでは、代わりに .agents/skills/impeccable/scripts/impeccable.cmd を呼び出します。ランチャーは自己完結型のバイナリを実行します。このバイナリは隣に出荷されるか、初回実行時に一度だけダウンロードされます。Nodeやその他のランタイムは必要ありません。名前付きのソースファイルまたはルートを --target <path> として渡します。PRODUCT.md、DESIGN.md、一致するサーフェスブリーフ、該当する場合はネイティブプラットフォームのガイダンスをロードします。そのディレクティブに従い、再実行しないでください。
  2. リクエストのプレイブックをロードします。コマンドテーブルで明示的または暗黙的なサブコマンドを参照するか、新しいサーフェスまたは置き換え用のビジュアルワールドについては reference/new-work.md を参照します。編集前にターゲットと既存のビジュアルの真実を検査します。アプリを実行できない場合は、コミットされたビジュアルリグレッションゴールデンまたはスクリーンショットフィクスチャから開始します。現在のトークン、CSS、コンポーネント、またはアセットに対してターゲットと鮮度を検証し、競合を解決し、テーマ/バリアントのキャプチャを比較します。
  3. 分析と方向性を解決した後、UI編集(小さな洗練も含む)の直前に reference/craft-floor.md を読みます。これは品質フロア、絶対的な禁止事項、およびどの検出器もキャッチしない反射神経を伝えます。計画のみの作業ではロードしないでください。

ランチャーが利用できない場合: 拒否または失敗した場合、次のツール呼び出しの前に「コンテキストのロードが実行されませんでした。既存のプロジェクトコンテキストを直接読み取ります。」という別個のメッセージを送信します。次に、既存のPRODUCT.mdとDESIGN.mdを読み取り、欠落しているコンテキストを発明せず、該当する手順2〜3に従い、許可されたツールで続行します。これは計画と編集の両方に適用されます。ランチャーの失敗だけではどちらもブロックされません。

デザインの方法

  • ブリーフが優先されます。 固定された美学、時代、素材、フォント、パレットを尊重します。たとえそれらが飽和パターンの警告と矛盾しても構いません。明確なブリーフを自分の好みに誘導することは失敗です。
  • 洗練は保存し、リデザインは置き換えます。 洗練は既存のアイデンティティ、動作、コピー、およびスコープ外のすべてを保持します。事実に基づくコピーを置き換えたり、主張を追加したりする前に尋ねてください。リデザインはプロダクトの真実、コンテンツ、機能、ネイティブの親和性、制約を保持しますが、古い外観は証拠およびアンチリファレンスとして扱います。新しいワークで置き換え用のワールドを選択し、DESIGN.mdを置き換えます。破棄された外観を磨くという中間策は絶対にしないでください。
  • ビジュアルオーソリティは証拠であって、ファイル名ではありません。 DESIGN.mdがないだけではプロジェクトがグリーンフィールドになるわけではありません。new-workが既存のワールドを保存、拡張、または置き換えるかを決定します。

モード

モードは、このサーフェスでの訪問者の成功の姿を命名します。

  • 説得: 訪問者は決定し行動します。デザインがプロダクトです。ランディングページ、マーケティング、キャンペーン、価格設定。注目と行動を獲得します。ブリーフが必要とする場合、実際の画像を出荷します。コミットされたワールドに従い、カテゴリの習慣には従いません。
  • 操作: 訪問者はタスクを完了します。アプリUI、ダッシュボード、エディター、管理画面、設定、ツール。スキャン容易性、一貫性、ネイティブの期待、実際の使用シーンが表現よりも優先されます。ブランドは正確な詳細に生きています。
  • 読む: 訪問者は何かを理解します。ドキュメント、記事、ガイド、ヘルプ、チェンジログ。理解のために構造化し、その後、読み続けたくなるような読書体験を作ります。
  • 体験する: 訪問者は作品自体の中にいます。ポートフォリオ、ギャラリー、ショーケース。最初のビューポートからアーティファクトを主役にします。インターフェースは後退します。

リクエストされたサーフェスからモードを選択し、プロダクトからは選択しません。そのモードはそのサーフェスブリーフにのみ保持します。ツールのランディングページは依然として「説得」、ファッションハウスのドキュメントは依然として「読む」、ドキュメントインデックスは「読む」であって「説得」ではありません。新しいサーフェスについては new-work.md を、より深い操作/読み取りガイダンスについては operate.md を参照してください。

コマンド

コマンドカテゴリ説明参照先
craft [feature]構築通常のnew-workリクエストの非推奨エイリアスreference/craft.md
shape [feature]構築コードを書く前にUX/UIを計画reference/shape.md
init構築永続的なプロダクトコンテキストをPRODUCT.mdにキャプチャreference/init.md
document構築既存のプロジェクトコードからDESIGN.mdを生成reference/document.md
extract [target]構築再利用可能なトークンとコンポーネントをデザインシステムに抽出reference/extract.md
critique [target]評価ヒューリスティックスコアリングによるUXデザインレビューreference/critique.md
audit [target]評価技術的な品質チェック(a11y、パフォーマンス、レスポンシブ)reference/audit.md · ネイティブ: reference/audit.native.md
polish [target]洗練出荷前の最終品質パスreference/polish.md
bolder [target]洗練安全または退屈なデザインを増幅reference/bolder.md
quieter [target]洗練攻撃的または過刺激なデザインをトーンダウンreference/quieter.md
distill [target]洗練本質まで削ぎ落とし、複雑さを取り除くreference/distill.md
harden [target]洗練プロダクション準備: エラー、i18n、エッジケースreference/harden.md
onboard [target]洗練初回実行フロー、空状態、アクティベーションを設計reference/onboard.md
animate [target]強化意図的なアニメーションとモーションを追加reference/animate.md
colorize [target]強化モノクロUIに戦略的なカラーを追加reference/colorize.md
typeset [target]強化タイポグラフィ階層とフォントを改善reference/typeset.md
layout [target]強化スペーシング、リズム、ビジュアル階層を修正reference/layout.md
delight [target]強化個性と記憶に残るタッチを追加reference/delight.md
overdrive [target]強化従来の限界を押し広げるreference/overdrive.md
clarify [target]修正UXコピー、ラベル、エラーメッセージを改善reference/clarify.md
adapt [target]修正異なるデバイスと画面サイズに適応reference/adapt.md · ネイティブ: reference/adapt.native.md
optimize [target]修正UIパフォーマンスを診断して修正reference/optimize.md
live反復ビジュアルバリアントモード: ブラウザで要素を選択し、代替案を反復reference/live.md
generate [n] [action] [element]反復名前付き要素のバリアント、バージョン、または代替案を生成し、ライブブラウザで選択可能に。手動選択は不要reference/generate.md

ルーティング:

  • 引数なし: routing.md を読み、コンテキストに応じたメニューを提示します。コマンドを自動実行しないでください。
  • コマンドの実行に対する明示的または明確に暗示されたリクエスト: その参照(ネイティブプラットフォームではネイティブバリアント)をロードし、それに従います。2つのコマンドが適合する場合は一度尋ねます。
  • ワークフローまたはコマンド選択に関する質問: ワークフローに関する質問 を読んでください。
  • その他: リクエストを一般的なデザイン作業として扱います。PRODUCT.mdがない場合は、init、次にnew-workを介して新しいサーフェスまたは置き換えワールドにルーティングします。既存コードの狭い洗練は、impeccable context が指示する既存の実装に対して行われ、その後にinitを提供します。initをブロック条件にはしません。
  • teach は init のエイリアスです。craft は通常のnew-workの非推奨エイリアスであり、何も追加しません。shape はタスク発見を担当し、その後、ビジュアルワールドとサーフェスコンセプトの決定のためにのみnew-workに入ります。

initがPRODUCT.mdを書き込んだ後、impeccable context を再実行せずに再開します。initは、記録されたプラットフォームが ios、android、または adaptive の場合、それ自体でネイティブプラットフォームの参照をロードします。

ピン留め / ピン解除: .agents/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> は、スタンドアロンの $<command> ショートカットを作成または削除します。スクリプトの結果を簡潔に報告します。エラー時はstderrをそのまま中継します。

フック: $impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> は、このプロジェクトのデザイン検出フックを管理します(UIファイル編集後、自動的に検出器を実行し、結果を表面化します)。ユーザーが引数を指定して呼び出した場合は、reference/hooks.md をロードします。

ドクター: $impeccable doctor は、このプロジェクトのImpeccableアーティファクト(PRODUCT.md、DESIGN.mdとそのサイドカー、設定、サーフェスブリーフ、フック)とこのバージョンが読み取るものとの間のドリフトを報告して修復します。ユーザーが呼び出した場合、または何が最新でないか、古くなっているか、リフレッシュが必要かを尋ねられた場合に、reference/doctor.md をロードします。セットアップの出力における CONTEXT_STALE ディレクティブは、同じレポートの安価なサブセットです。ユーザーが尋ねない限り、doctorを実行せずに、その場で独自の指示に従って対応します。

デザインタスクの副作用としてドリフトを修復しないでください。 CONTEXT_STALE の結果は、ユーザーが尋ねない限り、報告されるだけで対処されません。唯一の例外は auto とマークされた結果であり、そのファイルへの次の書き込みで自動的に実行されます。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

関連スキル