Empro Labs アニメーション は何をしますか？
1ページにつき1つの新しいアニメーションメカニックを設計・構築します。各ページはローカルで完結するデモであり、プレースホルダーのブランドコピーが含まれているため、不動産を含むあらゆるビジネスに適応できます。
リクエスト
スラッシュコマンドからのユーザーリクエスト：
$ARGUMENTS
上記のリクエストが空の場合は、1つの質問をしてください：どのメカニックまたはセクションを構築すべきか、あるいはどの参考事例から学ぶべきか？その後、ワークフローを開始します。
知識ベース（読んでください。推測しないでください）
| ファイル | 読むタイミング |
|---|---|
references/thinking-process.md | 常に、メカニックを選択する前に。新しいメカニックを発明し、それを正当化する方法。 |
references/used-designs.md | 常に。すでに使用されたファミリー、フォント、パレットを確認し、重複を避けるため。 |
references/mechanic-library.md | 常に。25の構築済みファミリーと、まだ構築されていない約26のテスト済みアイデア。 |
references/design-language.md | ステップ3。タイプのペアリング、パレット、レイアウトとコピーのルール、避けるべきこと。 |
references/technique-recipes.md | ステップ4。動作する構成要素：チルト、FLIP、パーティクル、物理演算、WebGL、オーディオなど。 |
references/real-estate-applications.md | ブリーフが不動産または物件セクションの場合。 |
references/premium-quality-bar.md | ステップ6。必須項目と推奨項目のリスト、およびレポートテンプレート。 |
references/build-and-test-process.md | ステップ5と6。命名ルール、テストチェックリスト、過去に発生したバグ。 |
references/mechanics-catalogue.md | 既存の例の詳細が必要な場合。 |
references/layered-stack-hyperframe.md | リクエストがレイヤーまたはスタック型の3Dホバー効果の場合。 |
ルール
- 発明する。繰り返さない。
used-designs.mdにないメカニックファミリーを選択するか、入力と視覚的アイデアを十分に変更して、thinking-process.mdの新規性テストに合格できるようにします。 - 再現する。コピーしない。 ユーザーが参考サイトを指定した場合、その動作とテクニックを研究し、新しいコード、コピー、レイアウトを記述します。他のサイトのコード、テキスト、ロゴ、フォント、画像を決してコピーしないでください。
- プレースホルダーブランド。 ユーザーがブランドを提供しない限り、発明したブランドコピーを使用します。メールアドレス、電話番号、クライアント名、実際の数値を追加しないでください。すべてのデモをコンセプトとしてラベル付けします。
- ローカルのみ。 ページをlocalhostで提供します。ユーザーが依頼しない限り、GitHub、Vercel、その他のホストに接続しないでください。
- 1ページに1つの特徴的な瞬間。 それ以外はすべて落ち着いた状態を保ちます。
- 報告前にテストする。 コンソールエラーがないこと、インタラクションが機能すること、375px画面で横スクロールがないこと、動きの軽減が処理されていること、コンテンツが動きなしでも読めることを確認します。テストしなかったことを明記します。
- 一意のIDと接頭辞付きクラス名。
.topや.unit spanのような汎用的な名前はページを壊します。
ワークフロー
- 知識ベースを読む: リクエストに応じて
thinking-process.md、used-designs.md、mechanic-library.md。 - スケッチする: 返信でページをスケッチします：訪問者と目標、プリミティブ、入力、特徴的な瞬間、補助的な動き、フォールバック。
thinking-process.mdのセクション4を使用します。 - デザイン言語を選択する:
used-designs.mdの最後の3行で使用されていないディスプレイフォント、1つのアクセントカラー、4.5:1のテキストコントラストを持つパレット。design-language.mdを使用します。 - フォルダを作成する
<mechanic>-site/。templates/starter-site/をその中にコピーし、コピー、パレット、フォント、特徴的な瞬間を置き換えます。technique-recipes.mdからメカニックを構築します。 - 提供してテストする: フォルダ内で
python -m http.server <port>を実行します。8000から次の空きポートを使用します。build-and-test-process.mdのチェックリストを1440pxと375pxで実行します。 - 評価する:
premium-quality-bar.mdに照らして評価します。失敗した必須項目は報告前に修正します。 - 報告する:
premium-quality-bar.mdのテンプレートを使用します。 - 記録する: ユーザーがページを保持する場合、
used-designs.mdに行を追加し、新しいファミリーの場合はmechanic-library.mdで構築済みとしてマークします。
例
examples/には25の実行可能なデモが含まれており、ニュートラルなレイヤードスタックの例も含まれます。これらを試すには、examples/内でpython -m http.server 8000を実行し、フォルダを開きます（例：http://localhost:8000/layered-stack-hyperframe/）。
テンプレート
| フォルダ | 用途 |
|---|---|
templates/starter-site/ | すべての新しいページの開始点。レイアウト、トークン、リビール、チルト、動きの軽減がすでに組み込まれています。 |
フォールバックチェーン
- ユーザーが参考事例を指定したが、調査するページがない場合 → URLまたは画面録画を要求します。名前からメカニックを推測しないでください。
- メカニックにブラウザが欠けている機能（WebGL、Web Audio、スクロール駆動CSSなど）が必要な場合 → まずフォールバックを構築し、次に機能を構築し、テストしたブラウザを明記します。
- リクエストがまったくない場合 →
mechanic-library.mdからまだ構築されていない2つのファミリーを提案し、どちらにするか尋ねます。 - リクエストが実際の不動産物件（実際のリスティング、実際の価格、実際の写真）の場合 → プレースホルダーデータを使用し、その旨を伝え、公開前に実際のコンテンツを要求します。