Communitygithub.com

anubhavg-icpl/vibe

项目脚手架 - 为常见项目类型生成具有最佳实践默认值的样板代码。适用于:脚手架、样板、模板、新项目、初始化、创建项目、启动器、设置、项目结构、目录结构、单体仓库、微服务、API模板、Web应用模板、CLI工具模板、库模板。

vibe 是什么?

该技能提供了一套全面的项目脚手架和样板代码生成工具,覆盖 API 后端服务、Web 应用、CLI 工具、库和单体仓库等多种常见项目类型。它基于一个决策树,帮助开发者根据项目需求(如 REST/GraphQL/gRPC API、SSR/SPA/静态站点)选择最佳的技术栈组合,并提供了详细的堆栈选择矩阵,涵盖语言、框架、数据库、ORM 和部署目标。技能文档包含了 FastAPI、Next.js、Typer 等主流框架的快速脚手架命令和标准目录结构示例,以及 CI/CD、Docker、代码质量和测试等常见附加组件的检查清单。此外,它还提供了 .editorconfig、pyproject.toml 和 tsconfig.json 等配置文件的模板,并总结了常见的陷阱及其预防措施。该技能适用于 Claude Code、Cursor、Codex 等 AI 编码助手,通过结构化模板和最佳实践,显著加速项目初始化过程,减少手动配置错误。

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

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

脚手架

为常见项目类型提供项目脚手架模板和样板代码生成,并包含最佳实践默认值。

项目类型决策树

你在构建什么?
│
├─ 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
│
└─ 单体仓库
   ├─ 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 应用TypeScriptNext.js 14+PostgreSQLPrisma 或 DrizzleVercel / Docker
Web 应用TypeScriptNuxt 3PostgreSQLPrismaVercel / Netlify
Web 应用TypeScriptAstroSQLite / 无DrizzleCloudflare / Netlify
CLI 工具PythonTyperSQLitesqlite3 stdlibPyPI
CLI 工具GoCobraSQLite / BoltDBsqlxGitHub Releases
CLI 工具RustClapSQLiterusqlitecrates.io
库TypeScripttsup不适用不适用npm
库Pythonhatch/uv不适用不适用PyPI

快速脚手架命令

Python (API)

# FastAPI with 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 应用)

# 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
│  └─ [ ] 健康检查端点
│
├─ 代码质量
│  ├─ [ ] 代码检查工具(ESLint, Ruff, golangci-lint, Clippy)
│  ├─ [ ] 代码格式化工具(Prettier, Black/Ruff, gofmt, rustfmt)
│  ├─ [ ] 预提交钩子(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
未提交锁文件不同环境间的依赖版本不一致提交 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.

相关技能