jpskill.com
💬 コミュニケーション コミュニティ

genesis

React19やTailwindV4などを用いたWebサイトや、FastAPIやGo Ginによるサーバーサイド、Taro 4.xのミニプログラムを、指示に応じてゼロから構築し、アニメーションや動的エフェクトも加えて、プロジェクトを迅速に立ち上げるSkill。

📜 元の英語説明(参考)

太初有道，道生代码。从零搭建 React19+TailwindV4+Vite 前端、FastAPI Python 后端、Go Gin 后端、Taro 4.x 小程序。用户说"新建项目"、"初始化"、"从零开始"、"搭建项目"、"创建项目"、"生成落地页"、"生成官网"、"生成 Landing Page"、"动画提升"、"动效升级"、"新建小程序"、"创建小程序"、"Taro 项目"时触发。

🇯🇵 日本人クリエイター向け解説

一言でいうと

React19やTailwindV4などを用いたWebサイトや、FastAPIやGo Ginによるサーバーサイド、Taro 4.xのミニプログラムを、指示に応じてゼロから構築し、アニメーションや動的エフェクトも加えて、プロジェクトを迅速に立ち上げるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
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
🪟 Windows (PowerShell) 
$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. 1. 下の青いボタンを押して genesis.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → genesis フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
11

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。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生成

実行順序：

  1. web-react.md を読み込む → Vite + React + Tailwind 環境を構築
  2. design-system.md を読み込む → shadcn/ui コンポーネントライブラリを統合
  3. 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）
  • [ ] 依存関係をインストールして実行を検証

交互規範

  1. モードを必ず尋ねる：A テンプレートコピー or B AI生成
  2. 実行を検証：プロジェクトが正常に起動することを確認
  3. テンプレートにドキュメントが付属：L1/L2/L3 分形ドキュメントはテンプレートに組み込まれており、追加の構築は不要
📜 原文 SKILL.md(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 生成

执行顺序：

  1. 读取 web-react.md → 搭建 Vite + React + Tailwind 环境
  2. 读取 design-system.md → 集成 shadcn/ui 组件库
  3. 读取 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）
  • [ ] 安装依赖并验证运行

交互规范

  1. 必须询问模式：A 模板复制 or B AI 生成
  2. 验证运行：确保项目能正常启动
  3. 模板自带文档：L1/L2/L3 分形文档已内置于模板中，无需额外构建

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。