lixyd/portal-ui

Portal UI

ポータルは複数の意図を叶えます。ランディングページは一つを勝ち取ります。ページに一つのオファーと一つのアクションしかない場合は、停止してランディングページ用のスキルを使用してください。このファイルは、個人の作品のための決定レイヤーです。

このファイルが再定義しないデフォルトは、2つのソースが設定します。ビジュアルコスチュームの禁止事項は Leonxlnx/taste-skill（MIT）に従います。スペース、フォーカス、モーションのタイミングは、このファイルが明示的に名前を挙げる場合にのみ elayadesign/ai-design-skills の landing-page-design（MIT）に従います。ポータルに関してこれら2つが競合する場合は、このファイルが優先されます。

アイデア

編集を始める前に一文を書いてください：

このページでは、[ここにしかないアーティファクト] が [唯一のライブデバイス] になります。

ターミナル、実行中のプロジェクト、または実際のインターフェースが該当します。スキャンライン、ネオングリッド、「SYS.ONLINE」などは該当しません：同じ文がどんな開発者にも当てはまるからです。ライブデバイスは一つだけにしてください。タップで操作可能で、スクリプトなしのフォールバックがあり、作品を遮ってはいけません。

実際のインターフェースの断片には data-ui でマークします。等幅フォントはその断片内部、pre/code 内部、および表形式の数字にのみ使用します。

ページの順序

1. 最初の画面：誰であるか、何を作っているか、ライブデバイス。1つの h1、どの幅でも2行以下。その下に、何をすべきかを示す一文。
2. 自身の作品。実際の写真またはクリップを含めます。他人のソフトウェアはガイドにします。ガイド行に作者名を記載します。作品グリッドには入れないでください。
3. オプションのライブリスト（フィード、ランキング）。それが実際に取得される場合に限ります。
4. ガイド：ツールの使い方を一文で。スター数は二次的なもので、自動更新される場合があります。
5. 既に存在するドキュメント。ドキュメントがないセクションでサイトにタイトルを付けないでください。約束されたブログには実際のリストが必要です。そうでなければタイトルからその言葉を削除します。
6. フッター：名前、連絡先、有料またはサポートの申し出。サポートの申し出は作品と同列に扱われません。

ナビゲーションのすべての項目には見出しと実際のターゲットがあります。スマートフォンレイアウトでもそのナビゲーションを維持します。バーがブレークポイント以下で非表示になる場合は、全高のフラットパネルを開くコントロールを追加します。リンクはリーディング順に到着し、60ミリ秒間隔、合計400ミリ秒未満。パネルの背景はページの背景色であり、ぼかしは使用しません。

ビジュアルカット

これらを追加する前に削除します：テキストグラデーション、ガラスバー、スキャンライン、アニメーショングリッド、円錐ボーダー、グロー（発光）、見出し内の絵文字、インデックス番号（01 //）、見出しの上のピルバッジ、作品の背後にある2つ以上の環境効果。

サイトに既に存在する場合は、既存の背景、インク、および一つのアクセントカラーを維持します。2つ目の表示用フォントは導入しないでください。ウェイトは700以下に留めます。

モーションには cubic-bezier(0.22, 1, 0.36, 1) を使用します。アニメーションは transform と opacity のみに適用します。各セクションは IntersectionObserver を使用して一度だけ表示します。存在しなければならないスクロールリスナーは requestAnimationFrame で制限します。prefers-reduced-motion はすべての単語を画面に残し、移動をなくします。

共有CSS：ポータル専用のカットはホームページのスタイルシートに配置します。共有ファイルを変更するのは、すべてのページに存在するバグ（フォーカスリングの欠落など）のみです。

出荷

• スキップリンク、可視の :focus-visible、現在のナビゲーション項目をマーク。
• href="#" は使用しない。
• og:image は作品のワイド画像。Twitterカードは summary_large_image。
• 作品画像にはaltテキスト。ライブデバイスにはアクセシブルな名前。

チェック

このスキルから node scripts/check.mjs <index.html> <css files> を実行します。その後、1440、768、390の幅でページを開きます。スマートフォンではメニューを開き、各リンクをたどります。モーションを縮小した状態でも、最初の画面はその人物と作品を適切に表示します。

スクリプトからの FAIL を修正します。ホームページのカットに合わせて兄弟ページのスタイルを変更しないでください。