colbyvk/website-dev-skill

ウェブサイト開発スキル

思慮深い人が自分のために作るであろう個人ウェブサイトを構築します。自分が誰で、何をしているかを簡潔に伝え、実際の作品をすべての画面に表示し、その人自身のものに見えるようにします。ポートフォリオテーマではなく、ネット上の「こんにちは、私は情熱的な開発者です」サイトの統計的平均でもなく、作品を隠すアート作品でもありません。目標は、デザイナー、開発者、ライター、写真家、研究者による最高の手作り個人サイトです。静かで、具体的で、高速で、そして間違いなく一人の人間のものです。

対象範囲：個人ウェブサイトのみ。 一人の人間のポートフォリオ、ホームページ、ブログ、CVサイト、学術ページ、またはリンクハブ。フリーランサーのサイトは対象です（一人の人間とその仕事についてなので）。企業、ショップ、製品、スタートアップ、または代理店のサイトは対象外です。タスクがそれらのいずれかの場合、このスキルは個人サイト向けであると伝え、適用しないでください。

このスキルは assets/ 内の部品で構成される単一のスキルです。以下の表は、各部品がいつロードされ、セットアップ中に何を行い、エージェントがいつその部品に書き戻さなければならないかを示しています。3つの部品は毎回ロードされます。残りはタスクがそれらに触れるときにロードされます。

ファイル

ファイル	起動	初期セットアップ	読み取りトリガー	更新トリガー
設計原則	常に	セットアップは行いません。 セットアップ中に書かれている通りに読み取ります。何も質問したり変更したりしません。	このスキルがロードされるたび、最初の設計またはコード決定の前。	エージェントは変更しません。 ユーザーが明示的に原則の変更を依頼した場合のみ編集します。不満は「やってはいけない台帳」へ。ここではありません。
やってはいけない台帳	常に	セットアップ時に常に実行されます。 セットアップ中に提案されるすべての方向性、パレット、フォント、コンポーネントは、ユーザーに表示される前にすべての行に対してチェックされます。ユーザーがセットアップ回答で気に入らないと述べた参照サイトや特性は、すぐにユーザー行になります。既存のサイトでは、すでに違反している行をリストアップします。	このスキルがロードされるたび、さらにサイト上で表示されるものが書き込まれたり変更されたりする前にもう一度。	ユーザーがサイトの何か（色、形、レイアウト、効果、言葉、フォント、動き、または参照サイト）を気に入らないと言うたびに。 同じターン内で一番下に1行追加し、作業を続行します。追加されるすべての行はユーザー行です。
ユーザーデザインシステム	常に	真のデザインシステムが存在しない場合は、最初にセットアップします。 真のデザインシステムがないとは、方向性行が confirmed でない、または色とタイプのテーブルに confirmed の行がないことを意味します。その後、設計作業の前に、初期セットアップからセットアップ質問を行います。ユーザーはいつでもセットアップを開始できます（「デザインシステムを設定して」「見た目をやり直して」）。ユーザーが「あなたが決めて」または「設定して」と答えた場合は、リサーチパスを実行します。ユーザーの回答は confirmed に、リサーチ結果は proposed に、既存のコードから読み取った値は extracted になります。真のデザインシステムが存在する場合は、再度質問せず、現在のタスクに必要な行でまだ空のものについてのみ質問します。	このスキルがロードされるたび。確認された値は他のファイルのすべてのデフォルトよりも優先されます。	ユーザーがデザインシステムの何か（色、フォント、サイズ、スペーシングステップ、半径、影、モーショントークン、コンポーネントルール、ロゴまたはモノグラム、イメージルール、ボイスルール）を追加または変更するたびに。 同じターン内で行を更新し、変更を記録します。また、セットアップがトークンを抽出またはリサーチした場合も同様です。
初期セットアップ	以下の場合: 新しいウェブサイトまたはリポジトリ、サイトでの初回実行、リデザイン開始、またはユーザーデザインシステムに確認された方向性がない場合。	以下のいずれかのシグナルが発生した場合にセットアップを実行します: (1) ユーザーデザインシステムに真のデザインシステムがない、(2) 新しいウェブサイトまたはリポジトリ、(3) ユーザーがデザインシステムの設定またはやり直しを依頼、(4) リデザインが開始されます。最初の返信で、設計作業の前に、質問ラウンドを一度に行います。ユーザーが「あなたが決めて」「解決して」「設定して」と言った場合は、代わりにリサーチパスを実行します。真のデザインシステムが存在し、ユーザーが依頼しなかった場合はスキップします。	タスクの開始時、ページやコンポーネントが書き込まれる前。	ユーザーがサイトの開始方法（質問、スタック、ツール）を変更した場合、またはセットアップ手順が実際に間違っていることが証明された場合。
デザイン方向性	以下の場合: セットアップが全体的な外観を尋ねる、リサーチパスが実行される、またはユーザーがサイトの外観の変更を依頼する。	セットアップが方向性の質問をするか、リサーチパスを実行するときに実行されます。 最初のセットアップ質問では、その人に最も合う3つの方向性と「自分でリサーチして」を提供します。リサーチパスはこのカタログから始まり、それを超えたニッチな方向性を検索します。	方向性の質問をする前、および方向性のリサーチの前。	リサーチでカタログにない方向性が見つかった場合、追加します。ユーザーが方向性を選択または拒否した場合、それを記録します。拒否された方向性の定義特性も「やってはいけない台帳」に追加します。
ヒーローデザイン	以下の場合: タスクがホームページまたはその最初の画面を構築、リデザイン、またはレビューする。	セットアップがQ13を尋ねるときに実行されます（その人に作品の画像や写真がない場合のみ）。回答は、ヒーローの視覚的ソースをユーザーデザインシステムに設定します。	画面計画ステップで、ヒーローが構築される前、およびレビュー時。	ユーザーがヒーローを承認した場合、記録し、ユーザーデザインシステムに書き込みます。気に入らなかったヒーローは「やってはいけない台帳」へ。生成されたヒーローのプロンプトはそのログに記録します。
ビジュアルモジュール	以下の場合: タスクがページまたはセクションを計画する、サイトが味気なく読める、またはユーザーが「もっと活気を」と依頼する。	リサーチパスとともに実行されます: 各候補は2〜4つのモジュールを指定します。	画面計画ステップで、セクションが構築される前、およびレビュー時。	ユーザーがモジュールを気に入った場合、記録し、ユーザーデザインシステムに追加します。気に入らなかったモジュールは「やってはいけない台帳」へ。リサーチで見つかったモジュールはそのカタログに追加します。
モーションデザイン	以下の場合: タスクがアニメーション、トランジション、ホバーまたはプレス状態、スクロール効果、ローダー、ページエントランス、または動くものに触れる場合。	セットアップがモーションの質問を尋ねるときに実行されます。 回答はユーザーデザインシステムのモーションダイヤルを設定します。ダイヤルが confirmed になると再度尋ねられません。	モーションコードが作成またはレビューされる前。	ユーザーがモーションパターンを承認したり、モーション値を変更した場合: その決定テーブルに記録します。ユーザーが気に入らなかったモーションは「やってはいけない台帳」へ。
コピーライティング	以下の場合: タスクがサイト上に表示されるテキスト（イントロ、経歴、プロジェクトの書き起こし、見出し、リンク、altテキスト、メタタグ）を執筆、書き直し、またはレビューする場合。	セットアップがボイスの質問を尋ねるときに実行されます。 回答はユーザーデザインシステムのボイスを設定します。ボイスが confirmed になると再度尋ねられません。	最初のコピーの単語が書かれる前、および引き渡しの前にもう一度。	ユーザーが1つの文字列を超えて適用されるコピールールを述べた場合: そのユーザーコピールールテーブルに追加します。気に入らなかったフレーズやトーンも「やってはいけない台帳」へ。ボイスルールはユーザーデザインシステムへ。
レビューゲート	以下の場合: ページ、セクション、またはコンポーネントを引き渡す前、およびユーザーがサイトのレビューや監査を依頼した場合。	セットアップは行いません。 セットアップ中は使用しません。	ビルド後、ユーザーへのレポートの前。	引き渡し後にユーザーがゲートが見逃した問題を発見した場合: そのユーザーチェックテーブルにチェックを追加し、問題を「やってはいけない台帳」に追加します。

ここでの「センス」の意味

センスとはスタイルではありません。それは、モデルがそうでなければデフォルトを取るであろうところで、この人のために、意図的に行われた一連の決定です。

• 具体的がジェネリックに勝る。 モデルが書くすべての個人サイトは、誰にでも当てはまるバージョンにドリフトします：「こんにちは、[名前] 👋」「デジタル体験を作り出すことに情熱を持つ開発者」、スキルバー、タイムライン、GitHubボタン付きの3つのプロジェクトカード、紫色のグロー。これらのそれぞれは、誰も行わなかった決定です。具体的なものは、その人自身から来なければなりません：彼らの作品、言葉、写真、デザインシステム。スタイルルールから決して来ず、決して発明されてはいけません。
• 作品が主役です。 訪問者は、この人が作ったもの、書いたもの、見つけたものを見に来ます。最高のものを最初の画面または1スクロール以内に配置します。デコレーション（オーブ、パーティクル、3Dブロブ、偽のターミナル、コンセプトデモウィジェット）は、作品がないときにページを埋めるものです。
• 一人の人間、一つの声。 個人サイトは、誰かのように聞こえ、リクルーターのテンプレートのようには聞こえません。その人が選んだ声で、短く、簡潔で、具体的な文。自己賛美はなし：作品が賛美します。
• 厳選し、アーカイブしない。 3〜6の強力な作品が30のサムネイルに勝ります。最高のものが先頭に立ち、より多くのスペースを得ます。残りは1クリック先にあります。
• 抑制は贅沢です。 1つのパレット。1つの半径スケール。1つのリンクスタイル。1つのテーマ。スペースを素材として使用。より少なく、より良い決定を持つサイトは、より熟考されたものとして読まれます。
• 生き生きとして、味気なくない。 テキストとグレーのサイトは、グローのサイトと同じくらいジェネリックです。色を与えてください：2つの調和する色と、ヘッダーとヒーローでのみそれらを際立たせる1つのポップカラー。デザインされたヒーローと2〜4つのビジュアルモジュールを与えてください：その人の作品が技巧を凝らして表示され、何も主張しないパレットからのフォルム。スペースを埋めるための偽のセクションは絶対に避けてください。
• 一目でわかる階層。 スクリーンショットを目を細めて見てください。各画面で1つのものが主導します：名前、作品、または言葉。
• タイポグラフィが人を運ぶ。 この人のための書体を選び、タイトなディスプレイトラッキング、読みやすいボディメジャー（約65文字）、リアルなウェイトステップで設定します。ライターにとって、本文テキストがデザインです。
• リズム、均一性ではない。 1つのプロジェクトを長く、別のプロジェクトを2行にさせます。グリッド内の同一カードはテーマの外観です。
• モーションは応答し、演じない。 イントロは一度到着し、1つのデザインされた瞬間がその居場所を獲得し、すべてのリンクがポインターに応答します。何も自分でタイプアウトしたり、回転したり、スクロールでフェードインしたりしません（それができるからという理由で）。
• 小さくて速いのは機能です。 個人サイトは瞬時に読み込まれ、スマートフォンでよく読め、JavaScriptなしでも動作し、5年後でも動作します。
• 人はエージェントではなく、外観を選びます。 写真家、詩人、バックエンドエンジニア、イラストレーターはそれぞれ異なる答えに値します。同じリクエストが同じサイトを二度生み出してはなりません。

ハウスルール

これらは、ユーザー自身の言葉と確認されたデザインシステムを除き、アセット内のすべてに優先します。

1. 個人サイトのみ。 一人の人間とその仕事。その他は対象外です。
2. 設計前にセットアップ。 真のデザインシステムがない場合（ユーザーデザインシステムの方向性行が confirmed でない、または色とタイプに confirmed の行がない）、最初に初期セットアップを実行し、最初の返信で質問ラウンドを行います。ユーザーはいつでもセットアップを開始したり、「あなたが決めて」と言ってエージェントにシステムをリサーチおよび提案させたりすることもできます。想定されたセンスでサイトを開始しないでください。
3. 絶対にグロー、ピル型グロー、AIパープルは使わない。 ユーザーはこれらを名前で禁止しました。ユーザーのデザインシステムが確認しない限り、いかなる表面にも、アウターグロー、ネオン、光るオーブ、光るボーダー、パープルやバイオレットのグラデーションは決して使用しないでください。
4. 台帳は絶対のルール。 表示されるものを書く前に、やってはいけない台帳に対してチェックしてください。ユーザー行は決して破られません。
5. 聞いて、書き留める。 ユーザーが何かを気に入らないと言ったら、修正する前に同じターンで台帳行を追加します。ユーザーが色、フォント、またはトークンを指定したら、同じターンでユーザーデザインシステムを更新します。スキルは同じ人に対して同じ間違いを二度と犯してはなりません。
6. 値ではなくトークン。 すべての色、サイズ、半径、影、および期間は、1つのCSS変数ブロックまたはテーマを通じてデザインシステムから取得します。コンポーネント内に生の16進数は使用しません。
7. 実際の作品を表示する。 実際のプロジェクト画像、実際の文章、望むならその人の実際の写真。灰色のボックスで作られた偽のプロジェクトUI、ストックやAI画像を本人のものとして決して使用しないでください。オープンライセンスまたは生成された画像は、ヒーローの雰囲気としてのみ許可され、ユーザーが生成画像に同意した場合のみ、そして人物や作品を決して表示しない場合のみです。
8. 何も発明しない。 偽の推薦文、クライアント、雇用主、賞、数字、ライフストーリーは発明しないでください。想定されたものはコード内にマークされ、レポートにリストされます。
9. 最初の画面は誰と何を言う 1440x900および390x844で：名前、何をしているかを一行で、作品または連絡先への方法。
10. デフォルトでアクセシブル。 コントラスト4.5:1、表示可能なフォーカスリング、すべての作品にaltテキスト、44pxタップターゲット、縮小モーションを尊重。見た目のために決して犠牲にしない。
11. 引き渡す前に確認。 レビューゲートを実行します。失敗したもの、または最初にチェックされなかったものを報告します。

3つのダイヤル

セットアップ後、3つのダイヤルがすべてのレイアウト、モーション、および密度の決定を導きます。それらの値はユーザーのデザインシステムに存在します（セットアップが設定し、ユーザーは「もっと落ち着かせて」「もっと動きを」「もっと密に」という一文で変更できます）。

ダイヤル	1 〜 3	4 〜 6	7 〜 10
バリアンス（対称性から非対称性へ）	中央揃え、対称、1カラムのテキスト。ライター、アカデミック、CVサイト。	左揃えのリーディング、分割イントロ、混在した画像サイズ、変化するセクションレイアウト。	非対称グリッド、大きな空きゾーン、イメージとしてのタイプセット、エディトリアルブレイク。どのレベルでも768px未満では1カラム。
モーション（静止から映画的へ）	ホバーとプレス状態のみ。	デフォルト。さらにイントロエントランスと1つのデザインされた瞬間。	その人の作品自体がインタラクティブまたは動的である場合のみ（クリエイティブコーディング、モーション…

（文は省略されていますが、全体の構造と内容は上記の通りです。）