genesis
太初有道,道生代码。从零搭建 React19+TailwindV4+Vite 前端、FastAPI Python 后端、Go Gin 后端、Taro 4.x 小程序。用户说"新建项目"、"初始化"、"从零开始"、"搭建项目"、"创建项目"、"生成落地页"、"生成官网"、"生成 Landing Page"、"动画提升"、"动效升级"、"新建小程序"、"创建小程序"、"Taro 项目"时触发。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o genesis.zip https://jpskill.com/download/17501.zip && unzip -o genesis.zip && rm genesis.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17501.zip -OutFile "$d\genesis.zip"; Expand-Archive "$d\genesis.zip" -DestinationPath $d -Force; ri "$d\genesis.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
genesis.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
genesisフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 11
📖 Claude が読む原文 SKILL.md(中身を展開)
この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。
Genesis
太初有道,道生代码
首要决策:初始化模式
在开始前,必须询问用户选择初始化模式:
| 模式 | 说明 | 适用场景 |
|---|---|---|
| A. 模板复制 | 直接复制 templates/ 下的现成项目 |
快速启动、标准项目、不需要定制 |
| B. AI 生成 | 根据 references/ 文档从零构建 |
深度定制、学习过程、特殊需求 |
询问话术:
请选择初始化模式:
- A 模板复制:秒级启动,复制现成模板
- B AI 生成:逐步构建,可深度定制
输入 A 或 B:
决策流程
用户触发 "新建项目"
↓
确认项目类型 → Web 前端 / Python 后端 / Go 后端 / Taro 小程序
↓
确认项目名称和目标目录
↓
询问初始化模式 → A 模板复制 / B AI 生成
↓
A: 复制模板 → 改名 → 安装依赖 → 完成
B: 读取 references → 逐步执行 → 完成
前端初始化(React + 设计系统)
触发词:创建 React 项目、新建前端项目、Web 应用、H5 项目
技术栈:React 19 + Vite + TailwindCSS V4 + shadcn/ui
模式 A:模板复制(秒级完成)
直接执行,无需确认:
cp -r ~/.claude/skills/genesis/templates/web-react {目标目录}
cd {目标目录} && sed -i '' 's/"name": "web-react"/"name": "{项目名}"/g' package.json
npm install && npm run dev
模板已包含:Vite + React 19 + TailwindCSS V4 + shadcn/ui + 微拟物光影
模式 B:AI 生成
执行顺序:
- 读取 web-react.md → 搭建 Vite + React + Tailwind 环境
- 读取 design-system.md → 集成 shadcn/ui 组件库
- 读取 design-enhance.md → 应用微拟物光影质感
Python 后端初始化(FastAPI)
触发词:Python 后端、FastAPI、新建 API、初始化 Python 项目、创建 Python 项目
技术栈:FastAPI + UV + SQLModel + AsyncPG
模式 A:模板复制(秒级完成)
直接执行,无需确认:
cp -r ~/.claude/skills/genesis/templates/backend-python {目标目录}
cd {目标目录} && sed -i '' 's/name = "backend-python"/name = "{项目名}"/g' pyproject.toml
uv sync && ./local-run.sh
模板已包含:FastAPI + UV + SQLModel + AsyncPG + 统一响应格式
模式 B:AI 生成
参考文档:backend-python.md
按文档逐步执行:环境初始化 → 目录结构 → 核心模块 → 路由配置
Taro 小程序初始化(React + Tailwind)
触发词:新建小程序、创建小程序、Taro 项目、小程序开发、跨端小程序
技术栈:Taro 4.x + React 18 + TailwindCSS V4 + weapp-tailwindcss
模式 A:模板复制(秒级完成)
直接执行,无需确认:
cp -r ~/.claude/skills/genesis/templates/miniapp {目标目录}
cd {目标目录}
sed -i '' 's/"name": "mini0app"/"name": "{项目名}"/g' package.json
sed -i '' 's/projectName: '\''mini0app'\''/projectName: '\''${项目名}'\''/g' config/index.js
npm install && npm run dev:weapp
模板已包含:Taro 4.x + React + TailwindCSS V4 + weapp-tailwindcss + tweakcn 主题 + 跨端配置
模式 B:AI 生成
参考文档:taro-miniapp.md
按文档逐步执行:Taro CLI 初始化 → Tailwind 集成 → weapp-tailwindcss 配置 → tweakcn 主题集成 → 多端适配
支持平台:
- 微信小程序 (
npm run dev:weapp) - 支付宝小程序 (
npm run dev:alipay) - 抖音小程序 (
npm run dev:tt) - H5 (
npm run dev:h5)
Go 后端初始化(Gin)
触发词:Go 后端、Gin、Go API、初始化 Go 项目、创建 Go 项目
技术栈:Go + Gin + GORM + Viper
模式 A:模板复制(秒级完成)
直接执行,无需确认:
cp -r ~/.claude/skills/genesis/templates/backend-go {目标目录}
cd {目标目录}
# 替换模块名(go.mod + 所有 import)
find . -type f -name "*.go" -exec sed -i '' 's|backend-go|{项目名}|g' {} +
sed -i '' 's|module backend-go|module {项目名}|g' go.mod
go mod tidy && go run cmd/api/main.go
模板已包含:Gin + GORM + Viper + 标准目录结构 + 中间件
模式 B:AI 生成
参考文档:backend-go.md
按文档逐步执行:go mod init → 目录结构 → 核心模块 → 路由配置
动画提升(React 项目)
触发词:动画提升、Apple 动效、添加动画、动效升级
前置条件:已完成前端初始化 + 页面内容搭建
参考文档:design-motion.md
执行内容:
- 为现有 React 项目添加 Framer Motion 动画
- Apple 级 Spring 物理引擎
- 页面路由过渡、组件交互动效
Landing Page 生成(React 项目)
触发词:生成落地页、生成 Landing Page、生成官网首页、生成产品页、做一个落地页
前置条件:已完成前端初始化
参考文档:landing-page.md
执行内容:
- 一次性生成生产级落地页
- 10 个标准 Section 组件
- 遵循设计系统约束
- Framer Motion 入场动画
- 响应式 + 可访问性
通用原则
模式选择建议
| 场景 | 推荐模式 |
|---|---|
| 快速原型、标准项目 | A 模板复制 |
| 学习技术栈、理解构建过程 | B AI 生成 |
| 需要深度定制、非标准配置 | B AI 生成 |
| 团队统一模板、批量创建 | A 模板复制 |
初始化检查清单
- [ ] 确认项目类型
- [ ] 确认项目名称(小写+连字符)
- [ ] 确认目标目录
- [ ] 确认初始化模式(A/B)
- [ ] 安装依赖并验证运行
交互规范
- 必须询问模式:A 模板复制 or B AI 生成
- 验证运行:确保项目能正常启动
- 模板自带文档:L1/L2/L3 分形文档已内置于模板中,无需额外构建
同梱ファイル
※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (6,727 bytes)
- 📎 LICENSE (1,056 bytes)
- 📎 README.md (3,619 bytes)
- 📎 references/backend-go.md (13,522 bytes)
- 📎 references/backend-python.md (9,645 bytes)
- 📎 references/design-enhance.md (8,281 bytes)
- 📎 references/design-motion.md (5,626 bytes)
- 📎 references/design-system.md (2,720 bytes)
- 📎 references/landing-page.md (23,680 bytes)
- 📎 references/taro-miniapp.md (6,847 bytes)
- 📎 references/web-react.md (2,940 bytes)