Communitygithub.com

anubhavg-icpl/vibe

專案脚手架 — 為常見專案類型生成具備最佳實踐預設配置的模板。用途:scaffold、boilerplate、template、new project、init、create project、starter、setup、project structure、directory structure、monorepo、microservice、API template、web app template、CLI tool template、library template。

vibe 是什麼?

這項技能可協助 AI 代理根據開發者的需求,自動生成各種專案類型的完整模板與目錄結構。它涵蓋了 API / 後端服務(REST、GraphQL、gRPC)、Web 應用程式(SSR、SPA、靜態網站)、CLI 工具、函式庫/套件以及 Monorepo 等專案類型,並針對 Python、Node.js、Go、Rust 和 TypeScript 等多種語言提供最佳化建議。技能中包含決策樹、工具選擇矩陣、快速指令以及各類專案的目錄結構範本,例如 FastAPI 的 `my-api/` 或 Next.js 的 `my-app/`。此外,還涵蓋了 Git、CI/CD、Docker、程式碼品質、測試與文件等常見附加項目,並提供 `.editorconfig`、`pyproject.toml` 與 `tsconfig.json` 等組態檔案模板。此技能支援 Claude Code、Cursor、Codex 等代理平台,可大幅減少手動初始化設定的時間,確保專案從開始就遵循業界最佳實踐。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/anubhavg-icpl/vibe/tree/HEAD/skills/cmods-scaffold

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

建立專案骨架(Scaffold)

專案骨架模板與樣板產生工具,適用於常見專案類型,並內建最佳實踐預設值。

專案類型決策樹

你在建置什麼?
│
├─ API / 後端服務
│  ├─ REST API
│  │  ├─ Python → FastAPI(非同步,OpenAPI 自動文件)
│  │  ├─ Node.js → Express 或 Fastify(效能導向選 Fastify)
│  │  ├─ Go → Gin(易用)或 Echo(中介軟體豐富)
│  │  └─ Rust → Axum(tower 生態系,非同步優先)
│  ├─ GraphQL API
│  │  ├─ Python → Strawberry + FastAPI
│  │  ├─ Node.js → Apollo Server 或 Pothos + Yoga
│  │  ├─ Go → gqlgen(程式碼優先)
│  │  └─ Rust → async-graphql + Axum
│  └─ gRPC 服務
│     ├─ Python → grpcio + protobuf
│     ├─ Go → google.golang.org/grpc
│     └─ Rust → tonic
│
├─ Web 應用程式
│  ├─ 全端 SSR
│  │  ├─ React 生態系 → Next.js 14+(App Router)
│  │  ├─ Vue 生態系 → Nuxt 3
│  │  ├─ Svelte 生態系 → SvelteKit
│  │  └─ 內容豐富/多框架 → Astro
│  ├─ SPA(僅客戶端)
│  │  ├─ React → Vite + React + React Router
│  │  ├─ Vue → Vite + Vue + Vue Router
│  │  └─ Svelte → Vite + Svelte + svelte-routing
│  └─ 靜態網站
│     ├─ 部落格/文件 → Astro 或 VitePress
│     └─ 行銷/登陸頁 → Astro 或 Next.js(靜態匯出)
│
├─ CLI 工具
│  ├─ Python → Typer(簡單)或 Click(複雜)
│  ├─ Node.js → Commander + Inquirer
│  ├─ Go → Cobra + Viper
│  └─ Rust → Clap(derive API)
│
├─ 函式庫/套件
│  ├─ npm 套件 → TypeScript + tsup + Vitest
│  ├─ PyPI 套件 → uv + pyproject.toml + pytest
│  ├─ Go 模組 → go mod init + go test
│  └─ Rust crate → cargo init --lib + cargo test
│
└─ 單體倉庫(Monorepo)
   ├─ JavaScript/TypeScript → Turborepo + pnpm workspaces
   ├─ 全端 JS → Nx
   ├─ Go → Go workspaces (go.work)
   ├─ Rust → Cargo workspaces
   └─ Python → uv workspaces 或 hatch

技術棧選擇矩陣

專案類型語言框架資料庫ORM/查詢工具部署目標
REST APIPythonFastAPIPostgreSQLSQLAlchemy + AlembicDocker / AWS ECS
REST APINode.jsFastifyPostgreSQLPrisma 或 DrizzleDocker / Vercel
REST APIGoGinPostgreSQLsqlx(原始)或 GORMDocker / Fly.io
REST APIRustAxumPostgreSQLsqlxDocker / Fly.io
Web AppTypeScriptNext.js 14+PostgreSQLPrisma 或 DrizzleVercel / Docker
Web AppTypeScriptNuxt 3PostgreSQLPrismaVercel / Netlify
Web AppTypeScriptAstroSQLite / 無DrizzleCloudflare / Netlify
CLI 工具PythonTyperSQLitesqlite3 標準庫PyPI
CLI 工具GoCobraSQLite / BoltDBsqlxGitHub Releases
CLI 工具RustClapSQLiterusqlitecrates.io
函式庫TypeScripttsup不適用不適用npm
函式庫Pythonhatch/uv不適用不適用PyPI

快速建立指令

Python(API)

# FastAPI 搭配 uv
mkdir my-api && cd my-api
uv init --python 3.12
uv add fastapi uvicorn sqlalchemy alembic psycopg2-binary pydantic-settings
uv add --dev pytest pytest-asyncio httpx ruff mypy

Node.js(Web App)

# Next.js 14+
npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"

# Vite + React
npm create vite@latest my-app -- --template react-ts

Go(API)

mkdir my-api && cd my-api
go mod init github.com/user/my-api
go get github.com/gin-gonic/gin
go get github.com/jmoiron/sqlx
go get github.com/lib/pq

Rust(CLI)

cargo init my-cli
cd my-cli
cargo add clap --features derive
cargo add serde --features derive
cargo add anyhow tokio --features tokio/full

單體倉庫(Turborepo)

npx create-turbo@latest my-monorepo
# 或手動設定:
mkdir my-monorepo && cd my-monorepo
npm init -y
npm install turbo --save-dev
mkdir -p apps/web apps/api packages/shared

API 專案模板

目錄結構(FastAPI 範例)

my-api/
├── src/
│   └── my_api/
│       ├── __init__.py
│       ├── main.py              # FastAPI 應用程式、生命週期、中介軟體
│       ├── config.py            # pydantic-settings 配置
│       ├── database.py          # SQLAlchemy 引擎、會話
│       ├── dependencies.py      # 共享 FastAPI 依賴注入
│       ├── routers/
│       │   ├── __init__.py
│       │   ├── health.py        # 健康檢查端點
│       │   └── users.py         # 使用者 CRUD 端點
│       ├── models/
│       │   ├── __init__.py
│       │   └── user.py          # SQLAlchemy 模型
│       ├── schemas/
│       │   ├── __init__.py
│       │   └── user.py          # Pydantic 請求和回應結構定義
│       └── services/
│           ├── __init__.py
│           └── user.py          # 業務邏輯
├── alembic/
│   ├── alembic.ini
│   ├── env.py
│   └── versions/
├── tests/
│   ├── conftest.py              # 測試用固定裝置:測試資料庫、客戶端、工廠
│   ├── test_health.py
│   └── test_users.py
├── pyproject.toml
├── Dockerfile
├── docker-compose.yml
├── .env.example
├── .gitignore
└── .dockerignore

目錄結構(Express/Fastify 範例)

my-api/
├── src/
│   ├── index.ts                 # 進入點,伺服器啟動
│   ├── app.ts                   # Express/Fastify 應用程式設定
│   ├── config.ts                # 環境配置搭配 zod 驗證
│   ├── database.ts              # Prisma 客戶端或 Drizzle 配置
│   ├── middleware/
│   │   ├── auth.ts
│   │   ├── error-handler.ts
│   │   └── request-logger.ts
│   ├── routes/
│   │   ├── health.ts
│   │   └── users.ts
│   ├── services/
│   │   └── user.service.ts
│   └── types/
│       └── index.ts
├── prisma/
│   └── schema.prisma
├── tests/
│   ├── setup.ts
│   └── routes/
│       └── users.test.ts
├── package.json
├── tsconfig.json
├── Dockerfile
├── docker-compose.yml
├── .env.example
└── .gitignore

Web 應用程式專案模板

目錄結構(Next.js App Router)

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx           # 根佈局
│   │   ├── page.tsx             # 首頁
│   │   ├── loading.tsx          # 全域載入 UI
│   │   ├── error.tsx            # 全域錯誤邊界
│   │   ├── not-found.tsx        # 404 頁面
│   │   ├── globals.css          # 全域樣式 + Tailwind
│   │   ├── (auth)/
│   │   │   ├── login/page.tsx
│   │   │   └── register/page.tsx
│   │   ├── dashboard/
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   └── api/
│   │       └── health/route.ts
│   ├── components/
│   │   ├── ui/                  # 可複用的基本元件
│   │   └── features/            # 特定功能元件
│   ├── lib/
│   │   ├── db.ts                # 資料庫客戶端
│   │   ├── auth.ts              # 驗證輔助函式
│   │   └── utils.ts             # 共用工具函式
│   └── types/
│       └── index.ts
├── public/
│   └── favicon.ico
├── tests/
│   ├── setup.ts
│   └── components/
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── package.json
├── .env.local.example
└── .gitignore

CLI 工具專案模板

目錄結構(Python / Typer)

my-cli/
├── src/
│   └── my_cli/
│       ├── __init__.py
│       ├── __main__.py          # python -m my_cli 進入點
│       ├── cli.py               # Typer 應用程式、指令群組
│       ├── commands/
│       │   ├── __init__.py
│       │   ├── init.py          # my-cli init
│       │   └── run.py           # my-cli run
│       ├── config.py            # 設定檔載入(TOML/YAML)
│       └── utils.py
├── tests/
│   ├── conftest.py
│   └── test_commands.py
├── pyproject.toml               # [project.scripts] 進入點
├── .gitignore
└── README.md

目錄結構(Go / Cobra)

my-cli/
├── cmd/
│   ├── root.go                  # 根指令、全域標誌
│   ├── init.go                  # my-cli init
│   └── run.go                   # my-cli run
├── internal/
│   ├── config/
│   │   └── config.go            # Viper 設定檔載入
│   └── runner/
│       └── runner.go            # 核心邏輯
├── main.go                      # 進入點,呼叫 cmd.Execute()
├── go.mod
├── go.sum
├── Makefile
└── .gitignore

函式庫專案模板

目錄結構(npm 套件)

my-lib/
├── src/
│   ├── index.ts                 # 公開 API 匯出
│   ├── core.ts                  # 核心實作
│   └── types.ts                 # 公開型別定義
├── tests/
│   └── core.test.ts
├── package.json                 # "type": "module", exports 對應表
├── tsconfig.json                # declaration: true, declarationMap: true
├── tsup.config.ts               # 建置設定:cjs + esm
├── vitest.config.ts
├── .npmignore
├── .gitignore
├── CHANGELOG.md
└── LICENSE

目錄結構(PyPI 套件)

my-lib/
├── src/
│   └── my_lib/
│       ├── __init__.py          # 公開 API,__version__
│       ├── core.py
│       └── py.typed             # PEP 561 標記
├── tests/
│   ├── conftest.py
│   └── test_core.py
├── pyproject.toml               # 建置系統、中繼資料、工具設定
├── .gitignore
├── CHANGELOG.md
└── LICENSE

單體倉庫模板

Turborepo + pnpm Workspaces

my-monorepo/
├── apps/
│   ├── web/                     # Next.js 前端
│   │   ├── src/
│   │   ├── package.json         # 相依於 @repo/shared
│   │   └── tsconfig.json        # 繼承 ../../tsconfig.base.json
│   └── api/                     # Fastify 後端
│       ├── src/
│       ├── package.json
│       └── tsconfig.json
├── packages/
│   ├── shared/                  # 共用型別、工具函式、驗證器
│   │   ├── src/
│   │   ├── package.json         # "name": "@repo/shared"
│   │   └── tsconfig.json
│   ├── ui/                      # 共用 React 元件
│   │   ├── src/
│   │   └── package.json         # "name": "@repo/ui"
│   └── config/                  # 共用設定
│       ├── eslint/
│       ├── typescript/
│       └── package.json
├── turbo.json                   # 管線:build, test, lint
├── pnpm-workspace.yaml          # packages: ["apps/*", "packages/*"]
├── package.json                 # 根目錄 devDeps: turbo
├── tsconfig.base.json           # 共用 TypeScript 設定
├── .gitignore
└── .npmrc

Cargo Workspaces(Rust)

my-workspace/
├── crates/
│   ├── my-core/                 # 核心函式庫
│   │   ├── src/lib.rs
│   │   └── Cargo.toml
│   ├── my-cli/                  # CLI 二進位檔
│   │   ├── src/main.rs
│   │   └── Cargo.toml           # 相依於 my-core
│   └── my-server/               # API 二進位檔
│       ├── src/main.rs
│       └── Cargo.toml
├── Cargo.toml                   # [workspace] members = ["crates/*"]
├── Cargo.lock
├── .gitignore
└── rust-toolchain.toml

常見附加項目檢查清單

專案設定完成?加入以下項目:
│
├─ 版本控制
│  ├─ [ ] .gitignore(語言專用)
│  ├─ [ ] .gitattributes(換行符號、二進位檔案)
│  └─ [ ] 分支保護規則
│
├─ CI/CD
│  ├─ [ ] GitHub Actions 工作流程(PR 測試,合併後部署)
│  ├─ [ ] 矩陣測試(作業系統、執行時期版本)
│  └─ [ ] 發佈自動化
│
├─ Docker
│  ├─ [ ] 多階段 Dockerfile
│  ├─ [ ] docker-compose.yml(應用程式 + 資料庫 + 快取)
│  ├─ [ ] .dockerignore
│  └─ [ ] 健康檢查端點
│
├─ 程式碼品質
│  ├─ [ ] Lint 工具(ESLint, Ruff, golangci-lint, Clippy)
│  ├─ [ ] 格式化工具(Prettier, Black/Ruff, gofmt, rustfmt)
│  ├─ [ ] Pre-commit 鉤子(Husky, pre-commit)
│  └─ [ ] 型別檢查(TypeScript strict, mypy, go vet)
│
├─ 測試
│  ├─ [ ] 測試框架已設定(Vitest, pytest, go test)
│  ├─ [ ] 覆蓋率報告
│  ├─ [ ] 測試資料庫設定
│  └─ [ ] CI 測試管線
│
├─ 編輯器
│  ├─ [ ] .editorconfig
│  ├─ [ ] .vscode/settings.json
│  └─ [ ] .vscode/extensions.json
│
└─ 文件
   ├─ [ ] README.md(專案描述、設定、使用方法)
   ├─ [ ] CONTRIBUTING.md
   └─ [ ] API 文件(OpenAPI, godoc, rustdoc)

組態檔案模板

.editorconfig(通用)

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.{py,rs}]
indent_size = 4

[*.go]
indent_style = tab

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

pyproject.toml(Python)

[project]
name = "my-project"
version = "0.1.0"
requires-python = ">=3.12"

[tool.ruff]
target-version = "py312"
line-length = 88

[tool.ruff.lint]
select = ["E", "F", "I", "UP", "B", "SIM"]

[tool.pytest.ini_options]
testpaths = ["tests"]
asyncio_mode = "auto"

[tool.mypy]
strict = true

tsconfig.json(TypeScript - 嚴格模式)

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

常見陷阱

陷阱原因預防方式
語言專用 .gitignore 錯誤使用了通用模板,缺少語言專用條目使用 gitignore.io 或 GitHub 的模板
忘記建立 .env.example團隊成員不知道需要哪些環境變數專案開始時就建立 .env.example,每個變數留空
未提交 lock 檔案不同環境間相依版本不一致提交 package-lock.json, uv.lock, go.sum, Cargo.lock
程式碼中寫死連接埠/主機在本機可運作,但在 Docker/雲端會失效一律從環境變數讀取,並設定合理的預設值
測試直接依賴真實資料庫無資料庫時測試會失敗,CI 設定複雜使用測試容器或記憶體中的 SQLite 進行單元測試
缺少健康檢查端點部署調度工具無法確認服務就緒狀態新增 /health 端點,回傳服務狀態

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

anubhavg-icpl/vibe

|. Use when you need help with 8 bit orbit video template. Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.

anubhavg-icpl/vibe

Reference DESIGN.md for luxury automotive editorial that needs to feel engineered. White slabs, full-bleed performance photography, BMW corporate blue rising into a deeper blue at active states, restrained Helvetica-grade typography. Use when building UI components, applying design tokens, or implementing visual styles for cinematic bmw.

anubhavg-icpl/vibe

Reference DESIGN.md for enterprise-AI brands that need to feel premium, dark, and quietly futuristic. Ink canvas, Unica grotesque type, saturated coral-to-violet brand gradient deployed as backdrop and accent rule, full-pill buttons, gen. Use when building UI components, applying design tokens, or implementing visual styles for cinematic cohere.

anubhavg-icpl/vibe

Reference DESIGN.md for performance brands that need to feel theatrical. High-contrast black-and-white frames cut by Rosso Corsa red, sharp 0-radius components, FerrariSans across the entire page, photography that treats the car as sculp. Use when building UI components, applying design tokens, or implementing visual styles for cinematic ferrari.

anubhavg-icpl/vibe

Reference DESIGN.md for hyper-luxury that needs to feel forged. True-black canvas, oversized LamboType nameplates at 120px+, hexagonal angle motifs, single warm-gold accent for primary actions, photography lit like a vault. Use when building UI components, applying design tokens, or implementing visual styles for cinematic lamborghini.

anubhavg-icpl/vibe

Reference DESIGN.md for AI-lab cinematic: pure black canvas, neon-lime accent on charcoal chrome, geometric DM Sans / Outfit type, pill-shaped CTAs. Use when building UI components, applying design tokens, or implementing visual styles for cinematic minimax.

anubhavg-icpl/vibe

Reference DESIGN.md for GPU-vendor cinematic: chrome-black canvas, signature green action, video-led hero, hard-edged grotesque headlines. Use when building UI components, applying design tokens, or implementing visual styles for cinematic nvidia.

anubhavg-icpl/vibe

Skill for discovering and researching autonomous AI agents, tools, and ecosystems using the AgentFolio directory. Use when you need help with agentfolio.

anubhavg-icpl/vibe

Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support. Use when you need help with astro.

anubhavg-icpl/vibe

Expert in building portfolios that actually land jobs and clients -. Use when you need help with interactive portfolio. not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities.

anubhavg-icpl/vibe

Generates high-converting Next.js/React landing pages with Tailwind CSS. Uses PAS, AIDA, and BAB frameworks for optimized copy/components (Heroes, Features, Pricing). Focuses on Core Web Vitals/SEO. Use when you need help with landing page generator.

anubhavg-icpl/vibe

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays. Use when you need help with remotion.

anubhavg-icpl/vibe

Writes complete, structured landing pages optimized for SEO ranking, AEO citation, and visitor conversion. Activate when the user wants to write or generate a landing page for a product, service, or offer.

anubhavg-icpl/vibe

Automate Klipfolio tasks via Rube MCP (Composio). Always search tools first for current schemas. Use when you need help with klipfolio automation.

anubhavg-icpl/vibe

>. Use when you need help with kami landing. Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.

anubhavg-icpl/vibe

>. Use when you need help with open design landing deck. Produce a single-file slide deck in the Atelier Zero visual language (warm-paper background, italic-serif emphasis spans, coral terminating dots, surreal collage plates) — Open Design's brand deck recipe. The deck uses **horizontal magazine-style swipe pagination** (←/→, wheel, swipe), a per-slide chrome strip with brand mark and slide counter, an ESC overview grid, a coral progress bar, and inherits the canonical stylesheet + 16-slot image library from the sister `open-design-landing` skill.

anubhavg-icpl/vibe

>. Use when you need help with open design landing. Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file; a separate path can mirror the Astro marketing site in `apps/landing-page/`. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically.

anubhavg-icpl/vibe

>. Use when building UI with epic design language and visual style. Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.

anubhavg-icpl/vibe

Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, promo page, or conversion-optimised web page — or when they want to A/B test landing page variants or replace a static page with one designed to convert.

anubhavg-icpl/vibe

Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forcing intake (product + elevator pitch, audience register, brand overrides, tone) locks down positioning before any copy or markup is written, so the page reflects the actual product rather than generic boilerplate. Use whenever the user says 'landing for X', 'create a landing page', 'build a landing page', 'make a landing page for X', 'I need a web page for Y', or provides product/service details and wants a polished website. Also triggers on 'promotional page', 'product page', 'one-pager', 'web presence', 'sales page'. Outputs a single self-contained HTML file (Claude Code) or HTML artifact (Claude.ai). Supports configurable brand colors via CSS custom property overrides.

相關技能