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. 01配置 React 19 与 Vite 模板
  2. 02使用 GSAP 创建滚动触发动画
  3. 03实现几何转场和 3D 悬停效果
  4. 04在 dist 目录生成生产构建文件
  5. 05提供 Vercel 或 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