AI TOOLS RADAR
すべての Skills / REBYTEAI-TEMPLATE
rebyteai-template/rebyte-skills

award-winning-website

Gaming landing page with GSAP scroll animations, 3D effects, and video storytelling.

ソースを見る

使い方

  1. インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
  2. 必要なツール、認証情報、対応環境を原文で確認します。
  3. 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/rebyteai-template/rebyte-skills --skill award-winning-website

開始前の確認

  • 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
  • スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

Award-Winning Gaming Website

A visually captivating website with scroll-triggered animations, geometric transitions, 3D hover effects, and video storytelling.

Tech Stack

  • Framework: React 19
  • Build Tool: Vite
  • Animation: GSAP
  • Styling: Tailwind CSS
  • Package Manager: npm
  • Output: dist directory
  • Dev Port: 5173

Setup

1. Clone the Template

bash
git clone --depth 1 https://github.com/Eng0AI/award-winning-website-template.git .

If the directory is not empty:

bash
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. Remove Git History (Optional)

bash
rm -rf .git
git init

3. Install Dependencies

bash
npm install

Build

bash
npm run build

Creates a production build in the dist/ directory.

Deploy

CRITICAL: For Vercel, you MUST use vercel build --prod then vercel deploy --prebuilt --prod. Never use vercel --prod directly.

Vercel (Recommended)

bash
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN

Netlify

bash
netlify deploy --prod --dir=dist

Development

bash
npm run dev

Opens at http://localhost:5173

Notes

  • Static React site with no backend - no environment variables needed
  • Never run npm run dev in VM environment

タスクに関連する項目

affaan-m
コミュニティ

motion-patterns

Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll.

導入数
3
GitHub Stars
28.6万
更新日
10月20日
MIT1 ファイル
詳細を見る →

関連する理由: デザインとメディア

affaan-m
コミュニティ

frontend-design-direction

Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.

導入数
3
GitHub Stars
28.6万
更新日
10月20日
MIT2 ファイル
詳細を見る →

関連する理由: デザインとメディア

affaan-m
コミュニティ

remotion-video-creation

Best practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, animations, audio, captions, charts, transitions, and more. Use when building video in React with Remotion — animations, audio, captions, charts, or transitions.

導入数
6
GitHub Stars
28.5万
更新日
10月20日
MIT32 ファイル
詳細を見る →

関連する理由: デザインとメディア

affaan-m
コミュニティ

fal-ai-media

Unified media generation via fal.ai MCP — image, video, and audio. Covers text-to-image (Nano Banana), text/image-to-video (Seedance, Kling, Veo 3), text-to-speech (CSM-1B), and video-to-audio (ThinkSound). Use when the user wants to generate images, videos, or audio with AI.

導入数
3
GitHub Stars
28.6万
更新日
10月20日
MIT1 ファイル
詳細を見る →

関連する理由: デザインとメディア

同じリポジトリから

関連する Skills

すべての Skills
rebyteai-template
コミュニティ

nano-banana

Generate images from text prompts using Google Nano Banana (Gemini image generation) via eng0 data API. Use when user asks to generate, create, or make images, pictures, illustrations, or artwork from descriptions. Triggers include "generate image", "create image", "make a picture", "draw", "illustrate", "image of", "picture of", "nano banana". Do NOT use for image editing or manipulation of existing images.

導入数
2
GitHub Stars
16
更新日
6月16日
3 ファイル
詳細を見る →