mcpField
A
award-winning-website

award-winning-website

github.com/rebyteai-templateデザイン・UI17360 回インストール19 週間前に更新
リポジトリ

award-winning-website について

award-winning-website は、React 19、Vite、GSAP、Tailwind CSS を使った静的なゲームサイトを構築するスキルです。テンプレートの準備、ビルド、デプロイ手順に加え、スクロール連動アニメーション、幾何学的なトランジション、3D ホバー効果、動画によるストーリーテリングを扱います。

主な機能

  1. 01React 19 と Vite のテンプレート設定
  2. 02GSAP によるスクロール連動アニメーション
  3. 03幾何学的なトランジションと 3D ホバー効果
  4. 04dist ディレクトリへの本番ビルド
  5. 05Vercel または Netlify のデプロイ手順

活用シーン

  1. 01テンプレートからゲームサイトを作成
  2. 02スクロールアニメーションとホバー操作の追加
  3. 03本番向け静的 React サイトのビルド
  4. 04生成したサイトの Vercel または Netlify へのデプロイ

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rebyteai-template/rebyte-skills --skill award-winning-website

インストール後、Claude Code で/award-winning-websiteを入力して読み込まれたか確認します。

詳細

受賞歴のあるゲームウェブサイト

スクロールに連動するアニメーション、幾何学的なトランジション、3D ホバーエフェクト、動画を使ったストーリーテリングを備えた、視覚的に魅力的なウェブサイトです。

技術スタック

  • フレームワーク: React 19
  • ビルドツール: Vite
  • アニメーション: GSAP
  • スタイリング: Tailwind CSS
  • パッケージマネージャー: npm
  • 出力先: dist ディレクトリ
  • 開発ポート: 5173

セットアップ

1. テンプレートをクローンする
git clone --depth 1 https://github.com/Eng0AI/award-winning-website-template.git .

ディレクトリが空でない場合：

git clone --depth 1 https://github.com/Eng0AI/award-winning-website-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template
2. Git の履歴を削除する（任意）
rm -rf .git
git init
3. 依存関係をインストールする
npm install

ビルド

npm run build

dist/ ディレクトリに本番用ビルドを作成します。

デプロイ

重要: Vercel を使用する場合は、必ず vercel build --prod の後に vercel deploy --prebuilt --prod を実行してください。vercel --prod を直接実行しないでください。

Vercel（推奨）
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN
Netlify
netlify deploy --prod --dir=dist

開発

npm run dev

http://localhost:5173 で開きます

注意事項

  • バックエンドのない静的な React サイトのため、環境変数は不要です
  • VM 環境では npm run dev を実行しないでください

コメント

Markdown 対応