Communitygithub.com

fazer-site

サイト作成、再作成、改善、または任意のビジネス向けランディングページを構築する際に常に使用します。5つのスキルを強制的な順序で実行し、テンプレートを起点とします。

fazer-site とは?

このスキルは、ユーザーがサイト作成やランディングページ構築を依頼した際に、定義された5つのスキルを順序通りに適用することで、Cinematographic(映画的)な品質の静的HTMLサイトを生成します。デザイン(frontend-design)、アニメーション・仕上げ(landing-page-cinematografica)、コンバージョン最適化(revenue-centric-design)、コピーライティング(copywriting)、モバイル適応(adaptar-mobile)をこの順で実行し、順序を変えたりスキップすると品質が低下します。ビジネスの実在するアイデンティティ(ロゴの色、フォント、評価情報など)に厳密に従い、架空の事実を追加しないことが重視されます。テンプレートはCLAUDE_SKILL_DIR/template/を起点とし、Next.jsなどのフレームワークは必要な場合のみ使用します。主にClaude CodeやCodexなどのコードエージェント向けに設計されています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mkttpierre/site-demonstracao/tree/HEAD/skills/fazer-site

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

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

ドキュメント

Fazer site no padrão cinematográfico(映画品質のサイト作成)

新しいサイトは単一のテンプレートから始まり、5つのスキルをこの順序で適用して構築します。各スキルには明確な役割があります。順序を変えたりスキップすると、次の3つの結果のいずれかになります:美しいがコンバージョンしない、コンバージョンするが仕上げが不十分、またはモバイルで壊れる。

開始前

  1. ビジネスに関する既存の情報をすべて読んでください:identidade.md、site.json、_memoria/、またはオペレーターが渡すブリーフィング。事実(名前、電話番号、住所、価格、評価、レビュー、写真)はそれらとビジネスの公開情報のみから取得します。サイトに掲載する評価は100%肯定的なもののみ:欠陥、問題、苦情、取引不成立、疑念を生じさせる点を挙げた評価は、たとえ最後に賞賛があっても掲載しません。疑問がある場合は掲載しません。また、掲載しなかった評価の投稿者をサイトの他の部分で引用することもしません。
  2. ブランド全体の色、強調色だけではない:ロゴや店舗外観が2色(例:オレンジと青)を使用している場合、両方の色をサイトで使用し、店舗外観やロゴの色調で表示します。ほぼ黒の背景は2色目とは見なされません。
  3. ロゴが確定していればタブアイコンに:ビジネスにロゴがある場合(オーナーから送られた、Linktree、サイト、看板、または再デザインされて承認されたもの)、それをファビコンにします:ファイルimg/favicon.png(正方形、透明背景のロゴから、余白あり、64pxと180px)を<head>内で<link rel="icon">と<link rel="apple-touch-icon">でリンクします。ロゴが16pxで判読できないほど幅が広い場合は、その中心要素(タグ、モノグラム、ロゴのフォントのイニシャル)を使用し、他の文字やでっち上げたアイコンは使用しません。ロゴがない場合、ファビコンはブランドカラーのイニシャルにします。
  4. 同梱のテンプレートから始めます:${CLAUDE_SKILL_DIR}/template/(README.mdにプレースホルダー、写真、personalizar.shスクリプトの説明があります)。地元の店舗やサービスに適しています;ニッチに合わないセクションは置き換えてください。他のテンプレートは、ニッチがこのテンプレートにない構造を必要とし、かつその仕上げを保持できる場合のみ使用します。
  5. 技術ベース:静的HTML(CSSとJSを同一ファイルに含む単一のindex.htmlとimg/)。同じビジュアルとアニメーションを提供し、トークン消費が少なく、ビルドなしで公開でき、依存関係で壊れません。Next.jsは、サイトにサーバーが必要な場合のみ使用します:データベースに保存したり秘密鍵を含むwebhookを発火するフォーム、ログイン機能、多数のページを生成するブログ、またはプロジェクトがすでにNext.jsで存在する場合(その場合はベースを維持します)。
  6. 既存のサイトがある場合、変更前に現在のバージョンを保存します(versoes/vN-antes-vN+1/)。

シーケンス(各スキルを1つずつ、この順序で)

  1. frontend-design:ビジネスの実際のアイデンティティ(ロゴの色、ポスターフォント、セクションのコントラスト)によるビジュアルディレクション。パレット、フォント、セクション構造が決定した時点で終了します。
  2. landing-page-cinematografica:動きと仕上げ(段階的エントリー、ノイズ、重みのあるボタン、評価のハイライト、カウントアップする数字、生の角や斜線)。禁止リストの項目がなくなった時点で終了します。
  3. revenue-centric-design(references/conversion-and-landing-pages.mdを開く):5秒テストを通過するヒーロー、モバイルの最初のビューポートに証拠、特定のCTAとその下に保証ライン、1.5セクションごとのCTA、外部クリックを最小化。約束が証拠を上回らなくなった時点で終了します。
  4. copywriting(Eugene Schwartzベース):全テキストをエンドクライアントの言語で、事実をでっち上げずに。サイトのすべての文がビジネスの情報源で検証可能になった時点で終了します。
  5. adaptar-mobile、常に最後:360pxと375pxで確認し、1440pxが壊れていないことを確認します。スクリーンショットを開いて目視確認した時点で終了します。

完了時

  • ローカルで提供し、リンクを送信します(http://localhost:PORTA)。公開はオペレーターが指示した場合のみ行います。
  • 納品時に、5つのスキルのうちどれを実行したか、および証明がないまま残ったもの(未確認の事実、エミュレーションのみのテスト)を報告します。

Individual skills in this repo

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

関連スキル